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

2 files changed, 6 insertions, 1 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
index 8ea7f04ed..f65a88d20 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.html
@@ -3,7 +3,8 @@
     <img [src]="user.accountAvatarUrl" alt="Avatar" />
 
     <div class="form-group">
-      <textarea i18n-placeholder placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
+      <textarea i18n-placeholder placeholder="Add comment..." autosize
+                formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
                 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
 
       </textarea>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index dbce744bf..a55e743fb 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -22,6 +22,10 @@ form {
 
     textarea {
       @include peertube-textarea(100%, 60px);
+
+      &:focus::placeholder {
+        opacity: 0;
+      }
     }
   }
 }