Client: beautiful watch page

4 files changed, 15 insertions, 26 deletions

diff --git a/client/src/app/videos/video-list/video-list.component.html b/client/src/app/videos/video-list/video-list.component.html
index 2a753adba..72d5512a6 100644
--- a/client/src/app/videos/video-list/video-list.component.html
+++ b/client/src/app/videos/video-list/video-list.component.html
@@ -1,16 +1,19 @@
-<div class="row col-md-12 videos-info">
-  <div class="col-md-9 col-xs-5 videos-total-results">
-    <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
-
-    <my-loader [loading]="loading | async"></my-loader>
-  </div>
+<div class="row">
+  <div class="content-padding">
+    <div class="videos-info">
+      <div class="col-md-9 col-xs-5 videos-total-results">
+        <span *ngIf="pagination.totalItems !== null">{{ pagination.totalItems }} videos</span>
 
+        <my-loader [loading]="loading | async"></my-loader>
+      </div>
 
-  <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+      <my-video-sort class="col-md-3 col-xs-7" [currentSort]="sort" (sort)="onSort($event)"></my-video-sort>
+    </div>
+  </div>
 </div>
 
-<div class="videos-miniatures">
-  <div class="col-md-12 no-video" *ngIf="isThereNoVideo()">There is no video.</div>
+<div class="content-padding videos-miniatures">
+  <div class="no-video" *ngIf="isThereNoVideo()">There is no video.</div>
 
   <my-video-miniature
     class="ng-animate"
diff --git a/client/src/app/videos/video-list/video-list.component.scss b/client/src/app/videos/video-list/video-list.component.scss
index 5ece9d003..eddcf0776 100644
--- a/client/src/app/videos/video-list/video-list.component.scss
+++ b/client/src/app/videos/video-list/video-list.component.scss
@@ -3,18 +3,12 @@
     margin-left: 0;
   }
 
-  margin-bottom: 20px;
   border-bottom: 1px solid #f1f1f1;
   height: 40px;
   line-height: 40px;
 
-  my-video-sort {
-    padding-right: 0;
-  }
-
   .videos-total-results {
     font-size: 13px;
-    padding-left: 0;
   }
 
   my-loader {
@@ -26,6 +20,7 @@
 .videos-miniatures {
   min-height: 720px;
   text-align: center;
+  padding-top: 0;
 
   my-video-miniature {
     text-align: left;
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index 0b0b0d944..826aa6a29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -25,9 +25,6 @@
     </span>
 
     <a [routerLink]="['/videos/list', { field: 'author', search: video.author, sort: currentSort }]" class="video-miniature-author">{{ video.by }}</a>
-    <span class="video-miniature-views-created-at">
-      <span class="video-miniature-views">{{ video.views }} views</span>
-      <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
-    </span>
+    <span class="video-miniature-created-at">{{ video.createdAt | date:'short' }}</span>
   </div>
 </div>
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index 1a73648c4..778bffa29 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -64,7 +64,6 @@
       font-weight: bold;
       transition: color 0.2s;
       font-size: 15px;
-      color: $video-miniature-title-color;
 
       &:hover {
         text-decoration: none;
@@ -88,17 +87,12 @@
       }
     }
 
-    .video-miniature-author, .video-miniature-views-created-at {
+    .video-miniature-author, .video-miniature-created-at {
       display: block;
       margin-left: 1px;
       font-size: 11px;
       color: $video-miniature-other-infos;
       opacity: 0.9;
-
-      .video-miniature-created-at::before {
-        content: '\002022';
-        margin: 0 2px 0 1px;
-      }
     }
 
     .video-miniature-author {