visual update: main menu, timeline, etc

assets/style/main.scss

@@ -15,6 +15,13 @@ body {
 	font-size: 1.25em;
 	margin-left: 30px;
   }
+
+  h1 {
+    text-align: right;
+    margin: 20px 50px 0 0;
+    font-weight: normal;
+    padding: 0;
+  }
 }
 
 a {
@@ -49,11 +56,4 @@ ul.submenu {
 	  color: #999;
 	}
   }
-}
-
-h1 {
-  text-align: right;
-  margin: 20px 50px 0 0;
-  font-weight: normal;
-  padding: 0;
 }

assets/style/menu.scss

@@ -20,11 +20,12 @@
   :link, :visited {
     text-decoration: none;
     border-bottom: 1px solid #333;
-    color: $text_color;
+    color: #ccc;
   }
 
   a:hover {
     color: white;
+    border-bottom: 1px solid #555;
   }
 
   .vk {

assets/style/tape-viewer.scss

@@ -3,7 +3,7 @@
   max-width: 700px;
   min-width: 300px;
 
-  margin: 100px auto 0;
+  margin: 100px auto 100px;
 }
 
 .tape-block-content{

assets/style/timeline-content.scss

@@ -6,8 +6,6 @@
       span{
         vertical-align: top;
         line-height: 40px;
-        /*   display: inline-block; */
-        /*   background-color: #333; */
       }
 
       img {
@@ -24,8 +22,14 @@
     }
 
     .body{
-      h2{
-        padding: 12px 0 0;
+      padding: 20px 20px 50px;
+//      padding: 12px 0 0;
+//      h2{
+//
+//      }
+
+      a{
+        border-bottom: none;
       }
 
       img {

assets/style/timeline.scss

@@ -1,5 +1,19 @@
 .timeline{
   min-width: 500px;
+  position: relative;
+  margin: 0 0 50px;
+
+  &:before{
+    content: '';
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    background-color: black;
+    top: 0;
+    left: calc(50% - 6px);
+    border-radius: 50%;
+    z-index: 1;
+  }
 }
 
 .post{

client/ui/timeline.js

@@ -2,8 +2,24 @@
  * Created by tmshv on 23/11/14.
  */
 
+function personByInstagram(list, instagram){
+    list = list.filter(function (member) {
+        try {
+            return member.contacts.instagram === instagram;
+        } catch (error) {
+            return false;
+        }
+    });
+
+    if(list.length){
+        return list[0].id;
+    }else{
+        return null;
+    }
+}
+
 module.exports = function(app) {
-    app.directive("timeline", function () {
+    app.directive("timeline", function (team) {
         return {
             templateUrl: "/views/timeline.html",
             scope: {
@@ -18,14 +34,16 @@ module.exports = function(app) {
                 api.feed.post()
                     .success(function (list) {
                         $scope.feed = list.map(function (post) {
+                            var author_id = personByInstagram(team.team, post.data.user.username);
+                            var name = author_id ? team.short(author_id) : post.data.user.username;
                             return {
                                 date: post.publishDate,
                                 image: post.data.images.standard_resolution.url,
                                 url: post.data.link,
-                                username: post.data.user.username,
+                                username: name,
                                 userpic: post.data.user.profile_picture,
-                                text: post.data.caption.text
-                            }
+                                text: post.data.caption.text.replace(/#[\w_]+/, "")
+                            };
                         });
                     });
             }

views/home.html

@@ -9,7 +9,7 @@
                 <!--<li><a href="/contacts">контактная информация</a></li>-->
                 <!--<li><a href="/awards">награды</a></li>-->
             <!--</ul>-->
-        </div>gi
+        </div>
 
         <h1>«Художественная школа <strong>Шлиссельбурга</strong>»</h1>
     </div>

views/timeline.html

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