+ timeline

assets/style/feed.scss

@@ -1,30 +0,0 @@
-.feed {
-  width: 50%;
-  margin: 30px auto 0;
-
-  ul{
-    margin: 0;
-    padding: 0;
-
-    list-style: none;
-  }
-
-  .post {
-    margin-bottom: 30px;
-
-    .user img {
-      width: 60px;
-      border-radius: 50%;
-    }
-
-    .body img {
-      display: block;
-      width: 100%;
-      max-width: 640px;
-      box-sizing: border-box;
-      border-radius: 5px;
-      border: 8px solid white;
-      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
-    }
-  }
-}

assets/style/timeline-content.scss

@@ -0,0 +1,24 @@
+.timeline {
+  .post {
+    .user img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+
+    .body{
+      h2{
+        padding: 12px 0 0;
+      }
+
+      img {
+        width: 100%;
+        max-width: 500px;
+        box-sizing: border-box;
+        border-radius: 5px;
+        border: 8px solid white;
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.35);
+      }
+    }
+  }
+}

assets/style/timeline.scss

@@ -0,0 +1,89 @@
+.timeline{
+  min-width: 500px;
+}
+
+.post{
+  position: relative;
+  display: flex;
+
+  .head, .body{
+    position: relative;
+    width: 50%;
+    box-sizing: border-box;
+  }
+
+  .head {
+    padding: 25px 20px;
+  }
+
+  .body {
+    padding: 0 20px;
+  }
+
+  &.left{
+    flex-flow: row-reverse;
+
+    .body{
+      text-align: right;
+    }
+
+    .head{
+      text-align: left;
+    }
+
+    .body:after{
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: calc(100% - 98px);
+      top: 98px;
+      right: 0;
+      background: url(/graphics/timeline-line.png) no-repeat right;
+      background-size: 2px 100%;
+    }
+
+    .head:after{
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: 98px;
+      top: 0;
+      left: -12px;
+      background: url(/graphics/timeline-arrow-left.png) no-repeat;
+    }
+  }
+
+  &.right{
+    flex-flow: row;
+
+    .body{
+      text-align: left;
+    }
+
+    .head{
+      text-align: right;
+      margin: 0 10px;
+    }
+
+    .body:after{
+      content: '';
+      position: absolute;
+      width: 100px;
+      height: calc(100% - 98px);
+      top: 98px;
+      left: -12px;
+      background: url(/graphics/timeline-line.png) no-repeat;
+      background-size: 2px 100%;
+    }
+
+    .head:after{
+      content: '';
+      position: absolute;
+      width: 12px;
+      height: 98px;
+      top: 0;
+      left: calc(100% - 2px);
+      background: url(/graphics/timeline-arrow-right.png) no-repeat;
+    }
+  }
+}

client/app.js

@@ -41,6 +41,7 @@ app.config(function ($locationProvider, $routeProvider) {
 
 require("./api/api")(app);
 require("./ui/menu")(app);
+require("./ui/timeline")(app);
 require("./filters/uppercase-first")(app);
 require("./pages/home")(app);
 require("./pages/schedule")(app);

client/pages/home.js

@@ -6,20 +6,4 @@ module.exports = function (app) {
     app.controller("HomePageController", function ($scope) {
         $scope.pageClass = "page-home";
     });
-
-    app.controller("FeedController", function ($scope, api) {
-        api.feed.post()
-            .success(function (list) {
-                $scope.feed = list.map(function (post) {
-                    return {
-                        date: post.publishDate,
-                        image: post.data.images.standard_resolution.url,
-                        url: post.data.link,
-                        username: post.data.user.username,
-                        userpic: post.data.user.profile_picture,
-                        text: post.data.caption.text
-                    }
-                });
-            });
-    });
 };

client/ui/timeline.js

@@ -0,0 +1,34 @@
+/**
+ * Created by tmshv on 23/11/14.
+ */
+
+module.exports = function(app) {
+    app.directive("timeline", function () {
+        return {
+            templateUrl: "/views/timeline.html",
+            scope: {
+
+            },
+            link: function(scope, element, attrs){
+                scope.isEven = function(index){
+                    return index % 2 === 1;
+                }
+            },
+            controller: function($scope, api){
+                api.feed.post()
+                    .success(function (list) {
+                        $scope.feed = list.map(function (post) {
+                            return {
+                                date: post.publishDate,
+                                image: post.data.images.standard_resolution.url,
+                                url: post.data.link,
+                                username: post.data.user.username,
+                                userpic: post.data.user.profile_picture,
+                                text: post.data.caption.text
+                            }
+                        });
+                    });
+            }
+        };
+    });
+};

views/home.html

@@ -1,16 +1,17 @@
 <div>
-    <div class="feed" ng-controller="FeedController">
-        <ul>
-            <li ng-repeat="post in feed" class="post" ng-class="{instagram: post.type === 'instagram'}">
-                <div class="user">
-                    <img ng-src="{{post.userpic}}" alt=""/>
-                    <span>{{post.username}}</span>
-                </div>
-                <div class="body">
-                    <p>{{post.text}}</p>
-                    <img ng-src="{{post.image}}" alt=""/>
-                </div>
-            </li>
-        </ul>
-    </div>
+    <timeline></timeline>
+    <!--<div class="feed" ng-controller="FeedController">-->
+        <!--<ul>-->
+            <!--<li ng-repeat="post in feed" class="post" ng-class="{instagram: post.type === 'instagram'}">-->
+                <!--<div class="user">-->
+                    <!--<img ng-src="{{post.userpic}}" alt=""/>-->
+                    <!--<span>{{post.username}}</span>-->
+                <!--</div>-->
+                <!--<div class="body">-->
+                    <!--<p>{{post.text}}</p>-->
+                    <!--<img ng-src="{{post.image}}" alt=""/>-->
+                <!--</div>-->
+            <!--</li>-->
+        <!--</ul>-->
+    <!--</div>-->
 </div>

views/timeline.html

@@ -0,0 +1,20 @@
+<div class="timeline">
+    <div class="post"
+         ng-repeat="post in feed"
+         ng-class="{left: isEven($index), right: !isEven($index)}">
+
+        <div class="head">
+            <div class="user">
+                <img ng-src="{{post.userpic}}" alt=""/>
+                <span>{{post.username}}</span>
+            </div>
+            <p class="date">23.12.2012</p>
+        </div>
+
+        <div class="body">
+            <h2>Рисунок</h2>
+            <p>{{post.text}}</p>
+            <img ng-src="{{post.image}}" alt="">
+        </div>
+    </div>
+</div>