jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(blurFeed): apply new design

pull/3/head
alex 2016-02-05 13:00:35 +03:00
parent 4ab926218c
commit 7cac9a412c
5 changed files with 160 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js
View File

@ -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;
}
}
})();

18
src/app/pages/dashboard/blurFeed/blurFeed.html
View File

@ -1,26 +1,26 @@
<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}">
<div class="feed-message" ng-repeat="message in feed" ng-click="expandMessage(message)">
<div class="message-icon" ng-if="message.type == 'text-message'">
<img class="photo-icon" ng-src="{{::( message.author | profilePicture )}}">
</div>
<div class="message-icon" ng-if="message.type != 'text-message'">
<span class="media-icon" ng-class="::message.type"></span>
<img class="sub-photo-icon" ng-src="{{::( message.author | profilePicture )}}">
<img class="photo-icon" ng-src="{{::( message.author | profilePicture )}}">
<span class="sub-photo-icon" ng-class="::message.type"></span>
</div>
<div class="text-block" ng-class="{'small-message': smallContainerWidth && message.type != 'text-message', '{{::message.type}}': true}">
<div class="text-block text-message">
<div class="message-header">
<span class="author">{{ ::message.author }}</span>{{ ::message.header }}
<span class="author">{{ ::message.author }} {{ ::message.surname}}</span>
</div>
<div class="message-content">
{{::message.text}}
<div class="message-content line-clamp" ng-class="{'line-clamp-2' : !message.expanded}">
<span ng-if="message.preview">{{message.header}} </span>{{::message.text}}
</div>
<div class="preview" ng-if="message.preview">
<div class="preview" ng-show="message.expanded" ng-if="message.preview">
<a href="{{::message.link}}" target="_blank">
<img ng-src="{{ ::( message.preview | appImage )}}">
</a>
</div>
<div class="message-time">
<div ng-show="message.expanded" class="message-time">
<div class="post-time">
{{::message.time}}
</div>

BIN
src/assets/img/app/feed/genom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/img/app/profile/Alexander.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

149
src/sass/theme/dashboard/_blurFeed.scss
View File

@ -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);
}