Clean up bottom video bar

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