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;
-  padding: 15px 0;
+  overflow: hidden;
+  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 {
@@ -79,10 +95,27 @@
     font-size: 18px;
     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="text-block" ng-class="message.type">
-    <div class="message-header">
-      <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
-    </div>
-    <div class="message-content">
-      {{::message.text}}
-    </div>
-  </div>
-  <div class="message-time">
-    <div class="post-time">
-      {{::message.time}}
-    </div>
-    <div class="ago-time">
-      {{::message.ago}}
+
+<div class="feed-messages-container" track-width="smallContainerWidth" min-width="360">
+  <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="text-block" ng-class="{'small-message': smallContainerWidth && message.type != 'text-message', '{{::message.type}}': true}">
+      <div class="message-header">
+        <span class="author">{{ ::message.author }}</span>{{ ::message.header }}
+      </div>
+      <div class="message-content">
+        {{::message.text}}
+      </div>
+      <div class="preview" ng-if="message.preview">
+        <a href="{{::message.link}}" target="_blank">
+          <img ng-src="img/{{ ::message.preview }}.png">
+        </a>
+      </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.',
-          time: 'Yesterday 3:20 pm',
-          ago: 'a day ago',
+          text: 'Haha lol',
+          time: '11.11.2015',
+          ago: '2 days ago',
         }, {
           type: 'geo-message',
           author: 'Nick',
           header: 'posted location',
-          text: 'New York, NY, USA',
-          time: 'Yesterday 11:37 am',
-          ago: 'a day ago',
+          text: 'New York, USA',
+          preview: 'new-york-location',
+          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.',
-          time: 'Yesterday 10:45 am',
-          ago: 'a day ago',
+          text: "First snake:I hope I'm not poisonous. Second snake:Why? First snake:Because I bit my lip!",
+          time: '12.11.2015',
+          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.',
-          time: 'Yesterday 9:21 am',
-          ago: 'a day ago',
+          text: 'How do you smuggle an elephant across the border? Put a slice of bread on each side, and call him "lunch".',
+          time: '14.11.2015',
+          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;