diff --git a/CREDITS.md b/CREDITS.md index a4e627c3c..004cebaf9 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -11,7 +11,7 @@ Inspirations from: * [Aurélien Salomon](https://dribbble.com/shots/1338727-Youtube-Redesign) - * [Adrien Thomas](https://dribbble.com/shots/1363194-YouTube-Redesign-Profil-page) + * [Wojciech Zieliński](https://dribbble.com/shots/3000315-youtube-concept) # Fonts diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html index 826aa6a29..ba70002b0 100644 --- a/client/src/app/videos/video-list/video-miniature.component.html +++ b/client/src/app/videos/video-list/video-miniature.component.html @@ -24,6 +24,12 @@ {{ getVideoName() }} +
+ + {{ tag }} + +
+ {{ video.by }} {{ video.createdAt | date:'short' }} diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html index 059465d65..124a3ba8b 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html @@ -157,6 +157,19 @@ {{ video.languageLabel }} + +
+ + Tags: + + +
+ + {{ tag }} + +
+
+ diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss index a8c7fdbac..8d8454cfd 100644 --- a/client/src/app/videos/video-watch/video-watch.component.scss +++ b/client/src/app/videos/video-watch/video-watch.component.scss @@ -80,7 +80,7 @@ .option .glyphicon { font-size: 22px; color: inherit; - opacity: 0.9; + opacity: 0.6; margin-bottom: 10px; } @@ -170,5 +170,15 @@ margin-right: 5px; } } + + .video-details-tags { + display: inline-block; + + a { + display: inline-block; + margin-right: 3px; + font-size: 11px; + } + } } } diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss index 723b2bcc8..5c06fae9d 100644 --- a/client/src/sass/_variables.scss +++ b/client/src/sass/_variables.scss @@ -15,6 +15,6 @@ $video-miniature-other-infos: #686767; $video-watch-border-color: #eceef4; $video-watch-title-height: 90px; -$video-watch-info-color: #8e909b; +$video-watch-info-color: #9da0ae; $video-watch-info-height: 120px; $video-watch-info-padding-left: 40px;