diff --git a/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js b/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js index 4bb826a..5ffb29a 100644 --- a/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js +++ b/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js @@ -14,59 +14,116 @@ { type: 'text-message', author: 'Kostya', - header: 'posted new message', + surname: 'Danovsky', + header: 'Posted new message', text: 'Guys, check this out: \nA police officer found a perfect hiding place for watching for speeding motorists. One day, the officer was amazed when everyone was under the speed limit, so he investigated and found the problem. A 10 years old boy was standing on the side of the road with a huge hand painted sign which said "Radar Trap Ahead." A little more investigative work led the officer to the boy\'s accomplice: another boy about 100 yards beyond the radar trap with a sign reading "TIPS" and a bucket at his feet full of change.', time: 'Today 11:55 pm', ago: '25 minutes ago', + expanded: false, }, { type: 'video-message', author: 'Andrey', - header: 'added new video', - text: 'Vader and Me', + surname: 'Hrabouski', + header: 'Added new video', + text: '"Vader and Me"', preview: 'app/feed/vader-and-me-preview.png', link: 'https://www.youtube.com/watch?v=IfcpzBbbamk', time: 'Today 9:30 pm', ago: '3 hrs ago', + expanded: false, }, { type: 'image-message', author: 'Vlad', - header: 'added new image', - text: 'My little kitten', + surname: 'Lugovsky', + header: 'Added new image', + text: '"My little kitten"', preview: 'app/feed/my-little-kitten.png', link: 'http://api.ning.com/files/DtcI2O2Ry7A7VhVxeiWfGU9WkHcMy4WSTWZ79oxJq*h0iXvVGndfD7CIYy-Ax-UAFCBCdqXI4GCBw3FOLKTTjQc*2cmpdOXJ/1082127884.jpeg', time: 'Today 2:20 pm', ago: '10 hrs ago', + expanded: false, }, { type: 'text-message', author: 'Nasta', - header: 'posted new message', + surname: 'Linnie', + header: 'Posted new message', text: 'Haha lol', time: '11.11.2015', ago: '2 days ago', + expanded: false, }, { type: 'geo-message', author: 'Nick', - header: 'posted location', - text: 'New York, USA', + surname: 'Cat', + header: 'Posted location', + text: '"New York, USA"', preview: 'app/feed/new-york-location.png', link: 'https://www.google.by/maps/place/New+York,+NY,+USA/@40.7201111,-73.9893872,14z', time: '11.11.2015', ago: '2 days ago', + expanded: false, }, { type: 'text-message', author: 'Vlad', - header: 'posted new message', + surname: 'Lugovsky', + header: 'Posted new message', 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', + expanded: false, }, { type: 'text-message', author: 'Andrey', - header: 'posted new message', + surname: 'Hrabouski', + header: 'Posted new message', 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', + expanded: false, + }, { + type: 'text-message', + author: 'Nasta', + surname: 'Linnie', + header: 'Posted new message', + text: 'When your hammer is C++, everything begins to look like a thumb.', + time: '14.11.2015', + ago: '5 days ago', + expanded: false, + }, { + type: 'text-message', + author: 'Alexander', + surname: 'Demeshko', + header: 'Posted new message', + text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." © Banksy', + time: '15.11.2015', + ago: '6 days ago', + expanded: false, + }, { + type: 'image-message', + author: 'Nick', + surname: 'Cat', + header: 'Posted photo', + text: '"Protein Heroes"', + preview: 'app/feed/genom.png', + link: 'https://dribbble.com/shots/2504810-Protein-Heroes', + time: '16.11.2015', + ago: '7 days ago', + expanded: false, + }, + { + type: 'text-message', + author: 'Kostya', + surname: 'Danovsky', + header: 'Posted new message', + text: 'Why did the CoffeeScript developer keep getting lost? Because he couldn\'t find his source without a map', + time: '18.11.2015', + ago: '9 days ago', + expanded: false, } ]; + + $scope.expandMessage = function(message){ + message.expanded = !message.expanded; + } } })(); \ No newline at end of file diff --git a/src/app/pages/dashboard/blurFeed/blurFeed.html b/src/app/pages/dashboard/blurFeed/blurFeed.html index 1422ff5..958181d 100644 --- a/src/app/pages/dashboard/blurFeed/blurFeed.html +++ b/src/app/pages/dashboard/blurFeed/blurFeed.html @@ -1,26 +1,26 @@
-
+
- - + +
-
+
- {{ ::message.author }}{{ ::message.header }} + {{ ::message.author }} {{ ::message.surname}}
-
- {{::message.text}} +
+ {{message.header}} {{::message.text}}
-
+
-
+
{{::message.time}}
diff --git a/src/assets/img/app/feed/genom.png b/src/assets/img/app/feed/genom.png new file mode 100644 index 0000000..9dbfa2d Binary files /dev/null and b/src/assets/img/app/feed/genom.png differ diff --git a/src/assets/img/app/profile/Alexander.png b/src/assets/img/app/profile/Alexander.png new file mode 100644 index 0000000..79195b7 Binary files /dev/null and b/src/assets/img/app/profile/Alexander.png differ diff --git a/src/sass/theme/dashboard/_blurFeed.scss b/src/sass/theme/dashboard/_blurFeed.scss index d7350d6..0c87149 100644 --- a/src/sass/theme/dashboard/_blurFeed.scss +++ b/src/sass/theme/dashboard/_blurFeed.scss @@ -1,36 +1,40 @@ +.feed-panel .panel-body{ + padding: 10px 0; +} + .feed-message { $text-message-color: $default; $video-message-color: $danger; $image-message-color: $success; $geo-message-color: $primary; - - min-height: 90px; - overflow: hidden; - padding: 15px 0 30px; + padding: 10px 0 ; + border-bottom: 1px solid rgba(0,0,0,0.12); + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12); &:first-child { padding-top: 0; } .message-icon { + cursor: pointer; width: 60px; height: 60px; float: left; position: relative; - + margin-left: 20px; > img, .media-icon { border-radius: 30px; width: 100%; height: 100%; } - .media-icon { + .sub-photo-icon { display: inline-block; padding: 4px; &:after { content: ''; display: inline-block; - width: 52px; - height: 52px; + width: 22px; + height: 22px; background-size: contain; } &.video-message { @@ -41,19 +45,20 @@ } &.image-message { background: $image-message-color; - padding: 15px; &:after { - width: 30px; - height: 30px; + width: 21px; + height: 21px; + margin-top: 1px; + margin-left: 1px; + border-radius: 5px; @include bg-image('theme/icon/feed/feed-image.svg'); } } &.geo-message { background: $geo-message-color; - padding: 15px; &:after { - width: 30px; - height: 30px; + width: 22px; + height: 22px; @include bg-image('theme/icon/feed/feed-location.svg'); } } @@ -65,59 +70,35 @@ height: 30px; right: -2px; bottom: -4px; - border: 2px solid #fff; + border-radius: 15px; } } .text-block { + cursor: pointer; position: relative; border-radius: 5px; margin: 0 0 0 80px; - padding: 7px 10px; + padding: 5px 20px; color: #fff; width: 280px; height: 70px; - &: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; width: inherit; max-width: calc(100% - 80px); height: inherit; + min-height: 60px; &:before { display: block; } .message-content { font-size: 12px; line-height: 15px; + font-weight: $font-light; } } - &.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; } - } &.small-message { width: 155px; height: 145px; @@ -149,26 +130,21 @@ } .preview { - position: absolute; - right: 0; - top: 0; + transition: 0s linear all; display: inline-block; - height: 70px; img { - width: 125px; - height: 70px; - border-radius: 0 5px 5px 0; + padding-top: 10px; + width: 100%; + height: auto; float: none!important; } } .message-time { - position: absolute; width: 100%; left: 0; - bottom: -22px; font-size: 11px; - padding-top: 5px; + padding-top: 10px; color: $help-text; .post-time { float: left; @@ -177,18 +153,61 @@ float: right; } } +} - &.right { - .message-icon { - float: right; - } - .text-block { - float: right; - margin: 0 19px 0 0; - &:before { - left: calc(100% - 2px); - transform: rotate(180deg); - } - } +.line-clamp +{ + display : block; + display : -webkit-box; + -webkit-box-orient : vertical; + position : relative; + + line-height : 1.2; + overflow : hidden; + text-overflow : ellipsis; + padding : 0 !important; +} +.line-clamp:after +{ + content : '...'; + text-align : right; + bottom : 0; + right : 0; + width : 25%; + display : block; + position : absolute; + height : calc(1em * 1.2); + background : linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 75%); +} +@supports (-webkit-line-clamp: 1) +{ + .line-clamp:after + { + display : none !important; } } +.line-clamp-1 +{ + -webkit-line-clamp : 1; + height : calc(1em * 1.2 * 1); +} +.line-clamp-2 +{ + -webkit-line-clamp : 2; + height : calc(1em * 1.2 * 2); +} +.line-clamp-3 +{ + -webkit-line-clamp : 3; + height : calc(1em * 1.2 * 3); +} +.line-clamp-4 +{ + -webkit-line-clamp : 4; + height : calc(1em * 1.2 * 4); +} +.line-clamp-5 +{ + -webkit-line-clamp : 5; + height : calc(1em * 1.2 * 5); +}