timeline update;

assets/style/timeline-content.scss

@@ -1,39 +0,0 @@
-.timeline {
-  .timeline-record {
-    .user{
-      margin-top: 4px;
-
-      span{
-        vertical-align: top;
-        line-height: 40px;
-      }
-
-      img {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-      }
-    }
-
-    .date{
-      margin: 5px 0 0;
-      color: #999;
-      font-size: 0.75em;
-    }
-
-    .body{
-      a{
-        border-bottom: none;
-      }
-
-      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-instagram.scss

@@ -0,0 +1,34 @@
+.timeline-record {
+  .instagram {
+    margin: 0 auto;
+    max-width: 640px;
+
+    .head {
+      width: 100%;
+      margin: 0 0 .5em;
+
+      .user {
+        span {
+          vertical-align: top;
+          line-height: 40px;
+        }
+
+        img {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    .body img {
+      width: 100%;
+      height: auto;
+      box-sizing: border-box;
+      border: .5em solid white;
+      box-shadow: 0 .2em 0.35em rgba(0, 0, 0, 0.35);
+      border-radius: .35em;
+      margin: 0 0 1em;
+    }
+  }
+}

assets/style/timeline-record.scss

@@ -0,0 +1,8 @@
+.timeline-record {
+  margin: 0 0 3em;
+  .date {
+    margin: 0 0 0.45em;
+    font-size: 0.75em;
+    color: #999;
+  }
+}

assets/style/timeline.scss

@@ -1,72 +1,13 @@
 .timeline{
-  min-width: 400px;
-  position: relative;
-  display: block;
-  width: 75%;
-  margin: 0 auto 50px;
+  display: flex;
+  flex-direction: column;
+  width: 70%;
+  margin: 0 auto 2em;
 }
 
-.timeline-record{
-  position: relative;
-
-  .body {
-    margin: 0 0 50px;
-
-    img{
-      margin: 0 auto;
-      display: block;
-      min-height: 500px;
-    }
-  }
-}
-
-@media screen and (max-device-width: 400px) {
-  .timeline {
-    min-width: 0;
-    position: relative;
-    margin: 0 0 50px;
-
-    .head{
-      margin: 0;
-      padding: 0;
-    }
-
-    .body{
-      margin: 0 0 40px;
-      padding: 0;
-    }
-
-    .body p{
-      text-align: left;
-      margin: 0 0 2px;
-      padding: 0;
-    }
-
-    .timeline-record {
-      position: relative;
-      display: flex;
-
-      .head, .body {
-        position: relative;
-        width: 90%;
-        box-sizing: border-box;
-      }
-
-      .head {
-        padding: 5px 20px;
-      }
-
-      .body {
-        padding: 0 20px;
-      }
-    }
-  }
-}
-
-.timeline-end{
-  width: 50%;
-  margin: 0 auto;
-  text-align: center;
+.timeline-footer{
+  display: flex;
+  justify-content: center;
 
   button.more{
     position: relative;
@@ -88,4 +29,10 @@
       top: 0;
     }
   }
+}
+
+@media screen and (max-device-width: 31.25em) {
+  .timeline {
+    width: 98%;
+  }
 }

client/ui/timeline.js

@@ -37,7 +37,7 @@ module.exports = function(app) {
                 image: post.data.image.standard_resolution.url,
                 url: post.data.url,
                 username: name,
-                //userpic: post.data.user.profile_picture,
+                userpic: 'https://igcdn-photos-a-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-19/11357496_464997000344800_2124591831_a.jpg',
                 text: post.body,
                 //text: postText(post),
                 type: post.type
@@ -78,9 +78,6 @@ module.exports = function(app) {
                         .success(function (list) {
                             $scope.timelineUpdating = false;
                             usSpinnerService.stop("timelineMore");
-                            //$timeout(function () {
-                            //
-                            //}, 5000);
 
                             var feed = list.map(function (post) {
                                 if(post.type == "instagram") return toInstagram(post);
@@ -96,7 +93,6 @@ module.exports = function(app) {
 
                 io.on("post", function (params) {
                     var posts = params instanceof Array ? params : [params];
-                    console.log("post", posts);
 
                     var feed = posts.map(function (post) {
                         if(post.type == "instagram") return toInstagram(post);

templates/views/timeline-gram.html

@@ -1,15 +1,16 @@
-<div class="head">
-    <div class="user">
-        <img ng-src="{{post.userpic}}" alt=""/>
-        <span>{{post.username}}</span>
+<div class="instagram">
+    <div class="head">
+        <p class="date">{{post.date | date : "dd.MM.yyyy"}}</p>
+        <div class="user">
+            <img ng-src="{{post.userpic}}" alt=""/>
+            <span>{{post.username}}</span>
+        </div>
     </div>
-    <p class="date">{{post.date | date : "dd.MM.yyyy"}}</p>
-</div>
 
-<div class="body">
-    <!--<h2>Рисунок</h2>-->
-    <p>{{post.text}}</p>
-    <a href="{{post.url}}" target="_blank">
-        <img ng-src="{{post.image}}" alt="">
-    </a>
+    <div class="body">
+        <a href="{{post.url}}" target="_blank" class="invisible">
+            <img ng-src="{{post.image}}" alt="">
+        </a>
+        <p>{{post.text | removeHashtags | strip}}</p>
+    </div>
 </div>

templates/views/timeline.html

@@ -5,7 +5,7 @@
                      ng-class="{left: isEven($index), right: !isEven($index)}">
 
     </timeline-record>
-    <div class="timeline-end">
+    <div class="timeline-footer">
         <button class="more"
                 ng-click="loadNext()"
                 ng-disabled="timelineUpdating">