add preview images to the feed control

src/app/common/directives/trackWidth.js

@@ -0,0 +1,26 @@
+(function(blurAdminApp) {
+  'use strict';
+
+  blurAdminApp.directive('trackWidth', [function () {
+    return {
+      scope: {
+        trackWidth: '=',
+        minWidth: '=',
+      },
+      link: function (scope, element) {
+        scope.trackWidth = $(element).width() < scope.minWidth;
+        scope.prevTrackWidth = scope.trackWidth;
+
+        $(window).resize(function() {
+          var trackWidth = $(element).width() < scope.minWidth;
+          if (trackWidth !== scope.prevTrackWidth) {
+            scope.$apply(function() {
+              scope.trackWidth = trackWidth;
+            });
+          }
+          scope.prevTrackWidth = trackWidth;
+        });
+      }
+    };
+  }]);
+})(blurAdminApp);

src/app/components/sidebar/_sidebar.scss

@@ -225,7 +225,7 @@ a.al-sidebar-list-link {
   }
 }
 
-@media (min-width: $resXL) {
+@media (min-width: 1200px) {
   .menu-collapsed {
     @include layout-collapsed();
   }
@@ -237,11 +237,11 @@ a.al-sidebar-list-link {
   }
 }
 
-@media (max-width: $resXL) and (min-width: $resXS) {
+@media (max-width: 1200px) and (min-width: $resXS) {
   @include layout-collapsed();
 }
 
-@media (max-width: $resXL) {
+@media (max-width: 1200px) {
   @include sidebar-overlap();
 }
 

src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss

@@ -5,14 +5,11 @@
   $geo-message-color: $primary;
 
   min-height: 90px;
-  clear: both;
+  overflow: hidden;
-  padding: 15px 0;
+  padding: 15px 0 30px;
   &:first-child {
     padding-top: 0;
   }
-  &:last-child {
-    padding-bottom: 0;
-  }
 
   img {
     float: left;
@@ -27,6 +24,8 @@
     margin: 0 0 0 80px;
     padding: 7px 10px;
     color: #fff;
+    width: 280px;
+    height: 70px;
 
     &:before {
       display: none;
@@ -45,6 +44,9 @@
       &:before { border-right-color: $text-message-color; }
       color: $default-text;
       font-size: 12px;
+      width: inherit;
+      max-width: calc(100% - 80px);
+      height: inherit;
       &:before {
         display: block;
       }
@@ -65,6 +67,20 @@
       background: $geo-message-color;
       &:before { border-right-color: $geo-message-color; }
     }
+    &.small-message {
+      width: 155px;
+      height: 145px;
+      .preview {
+        bottom: 0;
+        top: initial;
+        height: 87px;
+        img {
+          width: 155px;
+          height: 87px;
+          border-radius: 0 0 5px 5px;
+        }
+      }
+    }
   }
 
   .message-header {
@@ -80,9 +96,26 @@
     line-height: 20px;
   }
   
+  .preview {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: inline-block;
+    height: 70px;
+    img {
+      width: 125px;
+      height: 70px;
+      border-radius: 0 5px 5px 0;
+      float: none!important;
+    }
+  }
+
   .message-time {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    bottom: -22px;
     font-size: 11px;
-    margin: 0 0 0 80px;
     padding-top: 5px;
     color: $help-text;
     .post-time {
@@ -101,14 +134,12 @@
       float: right;
     }
     .text-block {
-      margin: 0 80px 0 0;
+      float: right;
+      margin: 0 20px 0 0;
       &:before {
         left: calc(100% - 2px);
         transform: rotate(180deg);
       }
     }
-    .message-time {
-      margin: 0 80px 0 0;
-    }
   }
 }

src/app/pages/dashboard/widgets/blurFeed/blurFeed.html

@@ -1,19 +1,27 @@
-<div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
+
-  <img ng-src="img/{{ ::message.author }}.png">
+<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
-  <div class="text-block" ng-class="message.type">
+  <div class="feed-message" ng-repeat="message in feed" ng-class="{'left': $index%2==0, 'right': $index%2==1}">
-    <div class="message-header">
+    <img ng-src="img/{{ ::message.author }}.png">
-      <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
+    <div class="text-block" ng-class="{'small-message': smallContainerWidth && message.type != 'text-message', '{{::message.type}}': true}">
-    </div>
+      <div class="message-header">
-    <div class="message-content">
+        <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
-      {{::message.text}}
+      </div>
-    </div>
+      <div class="message-content">
-  </div>
+        {{::message.text}}
-  <div class="message-time">
+      </div>
-    <div class="post-time">
+      <div class="preview" ng-if="message.preview">
-      {{::message.time}}
+        <a href="{{::message.link}}" target="_blank">
-    </div>
+          <img ng-src="img/{{ ::message.preview }}.png">
-    <div class="ago-time">
+        </a>
-      {{::message.ago}}
+      </div>
+      <div class="message-time">
+        <div class="post-time">
+          {{::message.time}}
+        </div>
+        <div class="ago-time">
+          {{::message.ago}}
+        </div>
+      </div>
     </div>
   </div>
 </div>

src/app/pages/dashboard/widgets/blurFeed/blurFeed.js

@@ -9,51 +9,57 @@ blurAdminApp.directive('blurFeed', function () {
           type: 'text-message',
           author: 'Kostya',
           header: 'posted new message',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat felis, laoreet porta enim non, malesuada suscipit lectus. Duis auctor interdum tellus vitae vulputate. Etiam ligula nulla, maximus eget sem a, sollicitudin tempor tortor. Etiam venenatis vitae magna vel tincidunt. Mauris aliquam finibus tincidunt. Pellentesque ut velit sed nulla mattis pellentesque in ac diam. Suspendisse at dolor eget ipsum egestas ultrices.',
+          text: 'Guys, check this out: \nA robber was robbing a house when he heard a voice. "Jesus is watching you!" "who is there?" The robber said But no sound was heard. So he kept going and he heard it two more times when he spotted a parrot. "What is your name," the robber asked. "Cocodora" said the parrot. "Now, what kind of idiot would name a bird Cocodora" said the robber. "The same idiot who named the rotweiler Jesus", said the parrot.',
           time: 'Today 11:55 pm',
           ago: '25 minutes ago',
         }, {
           type: 'video-message',
-          author: 'Nasta',
+          author: 'Andrey',
           header: 'added new video',
-          text: '"Best practices of web development.mkv"',
+          text: 'Vaider and Me',
+          preview: 'vader-and-me-preview',
+          link: 'https://www.youtube.com/watch?v=IfcpzBbbamk',
           time: 'Today 9:30 pm',
           ago: '3 hrs ago',
         }, {
           type: 'image-message',
           author: 'Vlad',
           header: 'added new image',
-          text: '"My little kitten.png"',
+          text: 'My little kitten',
+          preview: 'my-little-kitten',
+          link: 'http://api.ning.com/files/DtcI2O2Ry7A7VhVxeiWfGU9WkHcMy4WSTWZ79oxJq*h0iXvVGndfD7CIYy-Ax-UAFCBCdqXI4GCBw3FOLKTTjQc*2cmpdOXJ/1082127884.jpeg',
           time: 'Today 2:20 pm',
           ago: '10 hrs ago',
         }, {
           type: 'text-message',
-          author: 'Andrey',
+          author: 'Nasta',
           header: 'posted new message',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat felis, laoreet porta enim non, malesuada suscipit lectus. Duis auctor interdum tellus vitae vulputate. Etiam ligula nulla, maximus eget sem a, sollicitudin tempor tortor. Etiam venenatis vitae magna vel tincidunt. Mauris aliquam finibus tincidunt.',
+          text: 'Haha lol',
-          time: 'Yesterday 3:20 pm',
+          time: '11.11.2015',
-          ago: 'a day ago',
+          ago: '2 days ago',
         }, {
           type: 'geo-message',
           author: 'Nick',
           header: 'posted location',
-          text: 'New York, NY, USA',
+          text: 'New York, USA',
-          time: 'Yesterday 11:37 am',
+          preview: 'new-york-location',
-          ago: 'a day ago',
+          link: 'https://www.google.by/maps/place/New+York,+NY,+USA/@40.7201111,-73.9893872,14z',
+          time: '11.11.2015',
+          ago: '2 days ago',
         }, {
           type: 'text-message',
           author: 'Vlad',
           header: 'posted new message',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat felis, laoreet porta enim non, malesuada suscipit lectus.',
+          text: "First snake:I hope I'm not poisonous. Second snake:Why? First snake:Because I bit my lip!",
-          time: 'Yesterday 10:45 am',
+          time: '12.11.2015',
-          ago: 'a day ago',
+          ago: '3 days ago',
         }, {
           type: 'text-message',
           author: 'Andrey',
           header: 'posted new message',
-          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur erat felis, laoreet porta enim non, malesuada suscipit lectus. Duis auctor interdum tellus vitae vulputate. Etiam ligula nulla, maximus eget sem a, sollicitudin tempor tortor.',
+          text: 'How do you smuggle an elephant across the border? Put a slice of bread on each side, and call him "lunch".',
-          time: 'Yesterday 9:21 am',
+          time: '14.11.2015',
-          ago: 'a day ago',
+          ago: '5 days ago',
         }
       ];
     }],

src/assets/js/global-variables.js

@@ -22,5 +22,5 @@ var colorDefaultText = '#585858';
 
 var pageLoaded = false;
 
-var resWidthCollapseSidebar = 1170;
+var resWidthCollapseSidebar = 1200;
 var resWidthHideSidebar = 500;