diff --git a/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss b/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss index 08bf33b..781659f 100644 --- a/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss +++ b/src/app/pages/dashboard/widgets/blurFeed/_blurFeed.scss @@ -11,11 +11,62 @@ padding-top: 0; } - img { - float: left; - border-radius: 30px; + .message-icon { width: 60px; height: 60px; + float: left; + position: relative; + + > img, .media-icon { + border-radius: 30px; + width: 100%; + height: 100%; + } + + .media-icon { + display: inline-block; + padding: 4px; + &:after { + content: ''; + display: inline-block; + width: 52px; + height: 52px; + background-size: contain; + } + &.video-message { + background: $video-message-color; + &:after { + background-image: url(../img/feed-video.svg); + } + } + &.image-message { + background: $image-message-color; + padding: 15px; + &:after { + width: 30px; + height: 30px; + background-image: url(../img/feed-image.svg); + } + } + &.geo-message { + background: $geo-message-color; + padding: 15px; + &:after { + width: 30px; + height: 30px; + background-image: url(../img/feed-location.svg); + } + } + } + + .sub-photo-icon { + position: absolute; + width: 25px; + height: 25px; + right: -2px; + bottom: -2px; + border: 2px solid #fff; + } } .text-block { @@ -130,7 +181,7 @@ } &.right { - img { + .message-icon { float: right; } .text-block { diff --git a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html index f220fc2..40c1dc6 100644 --- a/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html +++ b/src/app/pages/dashboard/widgets/blurFeed/blurFeed.html @@ -1,7 +1,13 @@