<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
</head>

<body ng-app="starter">
  <!--
      The nav bar that will be updated as we navigate between views.
    -->
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
  <ion-nav-view></ion-nav-view>
  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-color-active-positive">

      <!-- Timeline pictures -->
      <ion-tab title="Pictures" icon="ion-person" href="#/tab/pictures">
        <ion-nav-view name="tab-pictures"></ion-nav-view>
      </ion-tab>

      <!-- Timeline icons -->
      <ion-tab title="Icons" icon="ion-heart" href="#/tab/icons">
        <ion-nav-view name="tab-icons"></ion-nav-view>
      </ion-tab>


    </ion-tabs>
  </script>
  <script id="templates/tab-pictures.html" type="text/ng-template">
    <ion-view view-title="Pictures">
      <ion-content class="padding">
        <section id="cd-timeline" class="cd-container">
          <div ng-repeat="activity in timeline">
            <div class="cd-timeline-block">
              <div class="cd-timeline-picture dark">
                <img ng-src={{activity.profilePicture}}></img>
              </div>
              <!-- cd-timeline-img -->
              <div class="cd-timeline-content dark">
                <h5 class="marginBottom0 marginTop0">{{activity.title}}</h5>
                <p class="marginTop5 cd-author">by {{activity.author}} on {{activity.date | date: "d MMM"}}</p>
                <p class="timelineText">{{activity.text}}</p>
              </div>
            </div>
          </div>
        </section>
      </ion-content>
    </ion-view>

  </script>
  <script id="templates/tab-icons.html" type="text/ng-template">
    <ion-view view-title="Icons">
      <ion-content class="padding">
        <section id="cd-timeline" class="cd-container">
          <div ng-repeat="activity in timeline">
            <div class="cd-timeline-block">
              <div class="cd-timeline-icon royal">
                <i class="ion-image timelineIcon" ng-if="(activity.type=='picture')"></i>
                <i class="ion-ios-videocam timelineIcon" ng-if="activity.type=='video' "></i>
                <i class="ion-location timelineIcon" ng-if="activity.type=='location'"></i>
                <i class="ion-android-textsms timelineIcon" ng-if="activity.type=='text'"></i>
              </div>
              <!-- cd-timeline-img -->
              <div class="cd-timeline-content royal">
                <h5 class="marginBottom0 marginTop0">{{activity.title}}</h5>
                <p class="marginTop5 cd-author">by {{activity.author}} on {{activity.date | date: "d MMM"}}</p>
                <p class="timelineText">{{activity.text}}</p>
              </div>
            </div>
          </div>
        </section>
      </ion-content>
    </ion-view>

  </script>
</body>

</html>
/* -------------------------------- 

All the CSS needed for the timeline!

-------------------------------- */
/* -------------------------------- 

Paddings and margins

-------------------------------- */

.marginBottom0 {
  margin-bottom: 0;
}

.marginTop0 {
  margin-top: 0;
}

.marginTop5 {
  margin-top: 5px !important;
}


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */

.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 93%;
  max-width: 1170px;
  margin: 0 auto;
}

.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}


/* -------------------------------- 

Main components 

-------------------------------- */

.timelineText {
  color: black;
}

.timelineIcon {
  font-size: 25px;
  color: white;
}

.cd-author {
  color: gray;
}

#cd-timeline {
  position: relative;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: 10px !important;
}

#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: gray;
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}

.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-block:first-child {
  margin-top: 0;
}

.cd-timeline-block:last-child {
  margin-bottom: 0;
}

.cd-timeline-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: #4a87ee;
  border-style: solid;
  border-width: 2px;
  padding-top: 5px;
  background: white;
  text-align: center;
}

.cd-timeline-icon i {
  color: #4a87ee;
}

.cd-timeline-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: #4a87ee;
  border-style: solid;
  border-width: 2px;
  background: white;
}

.cd-timeline-picture img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
}

.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: white;
  border-radius: 0.25em;
  border-color: #BDDFB3;
  border-style: solid;
  border-width: 2px;
  margin-bottom: 10px;
  padding: 10px;
}

.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}

.cd-timeline-content h2 {
  color: #303e49;
}

.cd-timeline-content p,
.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
}

.cd-timeline-content .cd-read-more,
.cd-timeline-content .cd-date {
  display: inline-block;
}

.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content::before {
  content: '';
  position: absolute;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
  border-right-color: inherit;
}


/*COLORS*/


/*POSITIVE*/

.positive {
  border-color: #4a87ee;
}

.positive i {
  color: #4a87ee;
}


/*CALM*/

.calm {
  border-color: #43cee6;
}

.calm i {
  color: #43cee6;
}


/*BALANCED*/

.balanced {
  border-color: #66cc33;
}

.balanced i {
  color: #66cc33;
}


/*ENERGIZED*/

.energized {
  border-color: #f0b840;
}

.energized i {
  color: #f0b840;
}


/*ASSERTIVE*/

.assertive {
  border-color: #ef4e3a;
}

.assertive i {
  color: #ef4e3a;
}


/*ROYAL*/

.royal {
  border-color: #8a6de9;
}

.royal i {
  color: #8a6de9;
}


/*DARK*/

.dark {
  border-color: #444;
}

.dark i {
  color: #444;
}

@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
    font-size: 20px;
    font-size: 1.25rem;
  }
  .cd-timeline-content p {
    font-size: 16px;
    font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more,
  .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.875rem;
  }
}
angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.pictures', {
    url: '/pictures',
    views: {
      'tab-pictures': {
        templateUrl: 'templates/tab-pictures.html',
        controller: 'PicturesCtrl'
      }
    }
  })

  .state('tab.icons', {
    url: '/icons',
    views: {
      'tab-icons': {
        templateUrl: 'templates/tab-icons.html',
        controller: 'IconsCtrl'
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/pictures');

})

.controller('PicturesCtrl', function($scope) {
  $scope.timeline = [{
    date: new Date(),
    title: "I am here",
    author: "Ludo Anderson",
    profilePicture: "https://upload.wikimedia.org/wikipedia/en/7/70/Shawn_Tok_Profile.jpg",
    text: "Lorem ipsum dolor sit amet",
    type: "location"

  }, {
    date: new Date(),
    title: "For my friends",
    author: "Sara Orwell",
    profilePicture: "https://lh5.googleusercontent.com/-ZadaXoUTBfs/AAAAAAAAAAI/AAAAAAAAAGA/19US52OmBqc/photo.jpg",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    type: "text"

  }, {
    date: new Date(),
    title: "Look at my video!",
    author: "Miranda Smith",
    profilePicture: "https://static.licdn.com/scds/common/u/images/apps/plato/home/photo_profile_headshot_200x200_v2.jpg",
    text: "Lorem ipsum dolor sit amet",
    type: "video"

  }, {
    date: new Date(),
    title: "Awesome picture",
    author: "John Mybeweeg",
    profilePicture: "https://www.lawyersweekly.com.au/images/LW_Media_Library/LW-602-p24-partner-profile.jpg",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    type: "picture"
  }]
})

.controller('IconsCtrl', function($scope) {
  $scope.timeline = [{
    date: new Date(),
    title: "Awesome picture",
    author: "John Mybeweeg",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    type: "picture"
  }, {
    date: new Date(),
    title: "Look at my video!",
    author: "Miranda Smith",
    text: "Lorem ipsum dolor sit amet",
    type: "video"

  }, {
    date: new Date(),
    title: "I am here",
    author: "Ludo Anderson",
    text: "Lorem ipsum dolor sit amet",
    type: "location"

  }, {
    date: new Date(),
    title: "For my friends",
    author: "Sara Orwell",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
    type: "text"

  }]
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.