watch view visual tweaks and search/comment placeholder dismiss on focus (#983)

- make the placeholder disappear on focus in the search bar
- make the placeholder disappear on focus in the comment textarea
- make the texarea resize automagically
- refactor the watch view to use bootstrap 4's flexgrid
- move action buttons of the watch view to the right of the video info
- responsive tweaks and margin adjustments in the watch view

1 files changed, 7 insertions, 12 deletions

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 9bd510c9f..afd846af3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -76,12 +76,9 @@
 
 .video-bottom {
   margin-top: 40px;
-  display: flex;
-  flex-grow: 1;
 
   .video-info {
     flex-grow: 1;
-    margin-right: 40px;
     // Set min width for flex item
     min-width: 1px;
 
@@ -284,10 +281,13 @@
         }
 
         .video-info-likes-dislikes-bar {
-          height: 5px;
+          $likes-bar-height: 2px;
+          height: $likes-bar-height;
+          margin-top: -$likes-bar-height;
           width: 186px;
           background-color: #E5E5E5;
-          margin-top: 25px;
+          position: relative;
+          top: 10px;
 
           .likes-bar {
             height: 100%;
@@ -439,19 +439,14 @@
 @media screen and (max-width: 1600px) {
   .video-bottom {
     .video-info {
-      margin-right: 20px;
-
       .video-info-first-row {
         flex-direction: column;
-        margin-bottom: 30px;
+        margin-bottom: 20px;
 
         .video-actions-rates {
           margin-top: 20px;
+          margin-bottom: 10px;
           align-items: start;
-
-          .video-info-likes-dislikes-bar {
-            margin-top: 10px;
-          }
         }
       }