Client: display video tags

diff --git a/CREDITS.md b/CREDITS.md
index a4e627c3c23ce7aeb37915445f1c3ad6cc0e8ee4..004cebaf9e7bd29e997cfc7b369cb3b2fc0fa9a6 100644 (file)
--- 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 826aa6a29fed7ee9bc25b578f4e419482e4dd3aa..ba70002b02c660eed3bf81edb3b721af93c48749 100644 (file)
--- 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 @@
       <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
     </span>
 
+    <div class="video-miniature-tags">
+      <span *ngFor="let tag of video.tags" class="video-miniature-tag">
+        <a [routerLink]="['/videos/list', { field: 'tags', search: tag, sort: currentSort }]" class="label label-primary">{{ tag }}</a>
+      </span>
+    </div>
+
     <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
     <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
   </div>

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 059465d65f106921269ab2a52f16ae55be8c35f7..124a3ba8be900f7c94562df31d28c0ef4f9857cb 100644 (file)
--- 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 }}
         </span>
       </div>
+
+      <div class="video-details-attribute">
+        <span class="video-details-attribute-label">
+          Tags:
+        </span>
+
+        <div class="video-details-tags">
+          <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
+            {{ tag }}
+          </a>
+        </div>
+      </div>
+
     </div>
   </div>
 </div>

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 a8c7fdbacf92dadf68336ad3b1359321e8ab111e..8d8454cfdc38fc9f2766b4972f7dcf530057e0f3 100644 (file)
--- 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 723b2bcc88120e93be4192293cc5c168214f9ac7..5c06fae9d1b952a5340bd9fb64e114906141c558 100644 (file)
--- 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;