From 3f4b07e6c971522bcc54ab71b413e4be93c95ac8 Mon Sep 17 00:00:00 2001
From: Roman Timashev <roman@tmshv.ru>
Date: Mon, 24 Nov 2014 03:04:55 +0300
Subject: [PATCH] visual update: main menu, timeline, etc

---
 assets/style/main.scss             | 14 +++++++-------
 assets/style/menu.scss             |  3 ++-
 assets/style/tape-viewer.scss      |  2 +-
 assets/style/timeline-content.scss | 12 ++++++++----
 assets/style/timeline.scss         | 14 ++++++++++++++
 client/ui/timeline.js              | 26 ++++++++++++++++++++++----
 views/home.html                    |  2 +-
 views/timeline.html                |  8 +++++---
 8 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/assets/style/main.scss b/assets/style/main.scss
index d76c6065..118d9977 100644
--- a/assets/style/main.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/assets/style/menu.scss b/assets/style/menu.scss
index edcbfb8d..c1383caf 100644
--- a/assets/style/menu.scss
+++ b/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 {
diff --git a/assets/style/tape-viewer.scss b/assets/style/tape-viewer.scss
index 3996084d..1893b277 100644
--- a/assets/style/tape-viewer.scss
+++ b/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{
diff --git a/assets/style/timeline-content.scss b/assets/style/timeline-content.scss
index 31047626..d3413907 100644
--- a/assets/style/timeline-content.scss
+++ b/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 {
diff --git a/assets/style/timeline.scss b/assets/style/timeline.scss
index cfe8ffa6..a9342a8f 100644
--- a/assets/style/timeline.scss
+++ b/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{
diff --git a/client/ui/timeline.js b/client/ui/timeline.js
index d701ae21..bf8d94d0 100644
--- a/client/ui/timeline.js
+++ b/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_]+/, "")
+                            };
                         });
                     });
             }
diff --git a/views/home.html b/views/home.html
index fe454b90..31eb2d0d 100644
--- a/views/home.html
+++ b/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>
diff --git a/views/timeline.html b/views/timeline.html
index efa634b9..87155362 100644
--- a/views/timeline.html
+++ b/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>
\ No newline at end of file