From 4e1b09735de70dabc5987b8258a01aac8063ae26 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Thu, 6 Jul 2017 17:18:10 +0200
Subject: [PATCH] Clean up bottom video bar

---
 .../video-watch/video-watch.component.html    |  5 ++--
 .../video-watch/video-watch.component.scss    | 24 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

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 58a48ca9c..8676b5b72 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -43,8 +43,9 @@
 
   <div class="row video-small-blocks">
     <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-author">
-      <a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]">
-        {{ video.by }}
+      <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]">
+        <span class="glyphicon glyphicon-user"></span>
+        <span class="video-small-block-text">{{ video.by }}</span>
       </a>
     </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 789260a91..69661747c 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -77,13 +77,18 @@
         &:hover {
           color: #000 !important;
         }
+
+        &:hover > .glyphicon {
+          opacity: 1 !important;
+        }
       }
 
       .option .glyphicon {
         font-size: 22px;
         color: inherit;
-        opacity: 0.6;
+        opacity: 0.15;
         margin-bottom: 10px;
+        transition: opacity 0.3s;
       }
 
       .video-small-block-text {
@@ -98,11 +103,14 @@
       border-style: solid;
     }
 
-    .video-small-block-author {
-      font-size: 15px;
-      font-weight: bold;
-      text-align: left;
-      padding-left: $video-watch-info-padding-left;
+    .video-small-block-author, .video-small-block-more {
+      a.option {
+        display: block;
+
+        .glyphicon {
+          display: block;
+        }
+      }
     }
 
     .video-small-block-share, .video-small-block-more {
@@ -136,13 +144,15 @@
       .glyphicon {
         font-size: 18px;
         margin: 0 10px 0 0;
+        opacity: 0.3;
       }
 
       .interactive {
         cursor: pointer;
-        transition: color 0.3s;
+        transition: opacity, color 0.3s;
 
         &.activated, &:hover {
+          opacity: 1;
           color: #000;
         }
       }
-- 
2.41.0