Design other videos in watch video page

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 b17392ff14a6a3cdb6faf7272f95a47e89168685..88d89f9e458a1a99c0c0f45bb62d3712a1e65527 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -159,6 +159,10 @@
   </div>
 
   <div class="other-videos">
+    <div class="title-page title-page-single">
+      Other videos
+    </div>
+
     <div *ngFor="let video of otherVideos">
       <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
     </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 5064ceb951a701082d4eca11924a515cb667c174..d7f47ed7570127239c13cd55a34a7cfe094d9d97 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -158,6 +158,22 @@
         }
       }
     }
+  }
+
+  .other-videos {
+    .title-page {
+      margin-top: 0;
+    }
+
+    /deep/ .video-miniature {
+      display: flex;
+      height: 100%;
+      margin-bottom: 20px;
 
+      .video-miniature-information {
+        margin-left: 10px;
+      }
+    }
   }
 }
+