From 7a26ed407f0ff9c8426359d29b861c327e2392b1 Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Tue, 17 Nov 2015 15:45:11 +0300 Subject: [PATCH] add feed widget --- src/app/components/sidebar/_sidebar.scss | 2 +- .../dashboard/widgets/blurFeed/_blurFeed.scss | 117 +++++++++++++++++- .../dashboard/widgets/blurFeed/blurFeed.html | 20 ++- .../dashboard/widgets/blurFeed/blurFeed.js | 52 ++++++++ .../widgets/popularApp/popularApp.html | 2 +- .../dashboard/widgets/timeline/_timeline.scss | 4 +- src/assets/css/_variables.scss | 2 +- src/assets/pictures/Andrey.png | Bin 0 -> 212317 bytes src/assets/pictures/Kolya.png | Bin 0 -> 64438 bytes src/assets/pictures/Kostya.png | Bin 0 -> 358719 bytes src/assets/pictures/Nasta.png | Bin 0 -> 53136 bytes src/assets/pictures/Vlad.png | Bin 0 -> 47573 bytes src/assets/pictures/tinder-logo.jpg | Bin 0 -> 24940 bytes 13 files changed, 192 insertions(+), 7 deletions(-) create mode 100644 src/assets/pictures/Andrey.png create mode 100644 src/assets/pictures/Kolya.png create mode 100644 src/assets/pictures/Kostya.png create mode 100644 src/assets/pictures/Nasta.png create mode 100644 src/assets/pictures/Vlad.png create mode 100644 src/assets/pictures/tinder-logo.jpg diff --git a/src/app/components/sidebar/_sidebar.scss b/src/app/components/sidebar/_sidebar.scss index 8b47b78..05f8cdf 100644 --- a/src/app/components/sidebar/_sidebar.scss +++ b/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; diff --git a/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss b/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss index 2e36278..1fd0ded 100644 --- a/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss +++ b/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss @@ -1,3 +1,118 @@ .blur-feed { height: 983px; -} \ No newline at end of file +} + +.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; + } + } +} diff --git a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html index b6632aa..c0534a5 100644 --- a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html +++ b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html @@ -1,3 +1,21 @@
- +
+ +
+
+ {{ ::message.author }}{{ ::message.header }} +
+
+ {{::message.text}} +
+
+
+
+ {{::message.time}} +
+
+ {{::message.ago}} +
+
+
\ No newline at end of file diff --git a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.js b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.js index 87c2f68..cfc5055 100644 --- a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.js +++ b/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' }; diff --git a/src/app/pages/dashboard/widgets/popularApp/popularApp.html b/src/app/pages/dashboard/widgets/popularApp/popularApp.html index 9481c01..ad277b7 100644 --- a/src/app/pages/dashboard/widgets/popularApp/popularApp.html +++ b/src/app/pages/dashboard/widgets/popularApp/popularApp.html @@ -1,6 +1,6 @@