add feed widget

src/app/components/sidebar/_sidebar.scss

@@ -203,7 +203,7 @@ a.al-sidebar-list-link {
 @mixin sidebar-overlap() {
   .al-sidebar {
     width: $sidebar-width;
-    background: rgba(0, 0, 0, .75);
+    @include bg-translucent-dark(0.75);
 
     .fa-angle-down, .fa-angle-up {
       opacity: 1;

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

@@ -1,3 +1,118 @@
 .blur-feed {
   height: 983px;
-}
+}
+
+.feed-message {
+  $text-message-color: $default;
+  $video-message-color: $danger;
+  $image-message-color: $success;
+  $geo-message-color: $primary;
+
+  min-height: 90px;
+  clear: both;
+  padding: 15px 0;
+  &:first-child {
+    padding-top: 0;
+  }
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  img {
+    float: left;
+    border-radius: 30px;
+    width: 60px;
+    height: 60px;
+  }
+
+  .text-block {
+    position: relative;
+    border-radius: 5px;
+    margin: 0 0 0 80px;
+    padding: 7px 10px;
+    color: #fff;
+
+    &:before {
+      display: none;
+      content: '';
+      position: absolute;
+      top: 8px;
+      right: 100%;
+      height: 0;
+      width: 0;
+      border: 7px solid transparent;
+      border-right: 7px solid #fff;
+    }
+
+    &.text-message {
+      background: $text-message-color;
+      &:before { border-right-color: $text-message-color; }
+      color: $default-text;
+      font-size: 12px;
+      &:before {
+        display: block;
+      }
+      .message-content {
+        font-size: 12px;
+        line-height: 15px;
+      }
+    }
+    &.video-message {
+      background: $video-message-color;
+      &:before { border-right-color: $video-message-color; }
+    }
+    &.image-message {
+      background: $image-message-color;
+      &:before { border-right-color: $image-message-color; }
+    }
+    &.geo-message {
+      background: $geo-message-color;
+      &:before { border-right-color: $geo-message-color; }
+    }
+  }
+
+  .message-header {
+    padding-bottom: 5px;
+    .author {
+      font-weight: 600;
+      padding-right: 5px;
+    }
+  }
+
+  .message-content {
+    font-size: 18px;
+    line-height: 20px;
+  }
+
+  .message-time {
+    font-size: 11px;
+    margin: 0 0 0 80px;
+    padding-top: 5px;
+    color: $help-text;
+    .post-time {
+      display: inline-block;
+      width: 50%;
+    }
+    .ago-time {
+      display: inline-block;
+      width: 50%;
+      text-align: right;
+    }
+  }
+
+  &.right {
+    img {
+      float: right;
+    }
+    .text-block {
+      margin: 0 80px 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,3 +1,21 @@
 <div class="blur-feed">
-
+  <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>
+    </div>
+  </div>
 </div>

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

@@ -4,6 +4,58 @@ blurAdminApp.directive('blurFeed', function () {
   return {
     restrict: 'E',
     controller: ['$scope', function ($scope) {
+      $scope.feed = [
+        {
+          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.',
+          time: 'Today 11:55 pm',
+          ago: '25 minutes ago',
+        }, {
+          type: 'video-message',
+          author: 'Nasta',
+          header: 'added new video',
+          text: '"Best practices of web development.mkv"',
+          time: 'Today 9:30 pm',
+          ago: '3 hrs ago',
+        }, {
+          type: 'image-message',
+          author: 'Vlad',
+          header: 'added new image',
+          text: '"My little kitten.png"',
+          time: 'Today 2:20 pm',
+          ago: '10 hrs 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. Etiam venenatis vitae magna vel tincidunt. Mauris aliquam finibus tincidunt.',
+          time: 'Yesterday 3:20 pm',
+          ago: 'a day ago',
+        }, {
+          type: 'geo-message',
+          author: 'Kolya',
+          header: 'posted location',
+          text: 'New York, NY, USA',
+          time: 'Yesterday 11:37 am',
+          ago: 'a day 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',
+        }, {
+          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',
+        }
+      ];
     }],
     templateUrl: 'app/pages/dashboard/widgets/blurFeed/blurFeed.html'
   };

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

@@ -1,6 +1,6 @@
 <div class="popular-app">
   <div class="popular-app-img">
-
+    <!--<img src="img/tinder-logo.jpg"/>-->
   </div>
   <div class="popular-app-main">
     <div class="popular-app-top">

src/app/pages/dashboard/widgets/timeline/_timeline.scss

@@ -139,7 +139,7 @@
     opacity: .7;
   }
 
-  &::before {
+  &:before {
     content: '';
     position: absolute;
     top: 16px;
@@ -153,7 +153,7 @@
 
 @mixin cd-timeline-color($color) {
   background: $color;
-  &::before {
+  &:before {
     border-right-color: $color;
   }
 }

src/assets/css/_variables.scss

@@ -5,7 +5,7 @@ $info: #5bc0de;
 $success: #348779;
 $warning: #bbcb50;
 $danger: #9d498c;
-$default: #c9c9c9;
+$default: #e9e9e9;
 
 $primary-dark: #1694bf;
 $success-dark: #1c4a42;