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, 5 insertions, 0 deletions

diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 6ce92fc22..8251ec1b5 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -3,6 +3,7 @@
 
 #search-video {
   @include peertube-input-text($search-input-width);
+  padding-left: 10px;
   margin-right: 15px;
   padding-right: 40px; // For the search icon
 
@@ -10,6 +11,10 @@
     color: #000;
   }
 
+  &:focus::placeholder {
+    opacity: 0 !important;
+  }
+
   @media screen and (max-width: 800px) {
     width: calc(100% - 150px);
   }