Improve abstract videos list

Better responsive and align miniatures to the left

5 files changed, 36 insertions, 16 deletions

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 65842af35..a1d9168de 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,14 +1,6 @@
 @import '_mixins';
 @import '_miniature';
 
-.videos {
-  text-align: center;
-
-  my-video-miniature {
-    text-align: left;
-  }
-}
-
 .videos-header {
   display: flex;
   height: 80px;
@@ -32,8 +24,33 @@
   }
 }
 
-@media screen and (max-width: 500px) {
-  .videos {
-    @include video-miniature-small-screen;
+.margin-content {
+  width: $video-miniature-width * 6;
+  margin: auto;
+
+  @media screen and (max-width: 1800px) {
+    width: $video-miniature-width * 5;
+  }
+
+  @media screen and (max-width: 1800px - $video-miniature-width) {
+    width: $video-miniature-width * 4;
+  }
+
+  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+    width: $video-miniature-width * 3;
+  }
+
+  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+    width: $video-miniature-width * 2;
+  }
+
+  @media screen and (max-width: 500px) {
+    width: auto;
+    margin: 0 !important;
+
+    .videos {
+      @include video-miniature-small-screen;
+    }
   }
 }
+
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 7d857a74e..4799e00c2 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -3,8 +3,9 @@
 @import '_miniature';
 
 .video-miniature {
+  width: $video-miniature-width;
+
   display: inline-block;
-  padding-right: 15px;
   margin-bottom: 30px;
   height: 195px;
   vertical-align: top;
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 11406e887..2874847cd 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -20,8 +20,6 @@ $player-factor: 1.7; // 16/9
 }
 
 .root {
-  margin: 0 -15px;
-
   &.theater-enabled #video-wrapper {
     flex-direction: column;
     justify-content: center;
@@ -51,6 +49,7 @@ $player-factor: 1.7; // 16/9
   background-color: #000;
   display: flex;
   justify-content: center;
+  margin: 0 -15px;
 
   .remote-server-down {
     color: #fff;
@@ -531,7 +530,7 @@ my-video-comments {
 
 @media screen and (max-width: 600px) {
   .video-bottom {
-    margin: 20px 0 0 0;
+    margin: 20px 0 0 0 !important;
 
     .video-info {
       padding: 0;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 95b759225..2ea4aa105 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -121,6 +121,7 @@ $play-overlay-width: 18px;
 
     .video-miniature-information {
       width: 100% !important;
+      text-align: left;
 
       span {
         width: 100%;
@@ -128,8 +129,9 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      width: 100%;
+      width: calc(100% + 30px);
       height: auto;
+      margin: 0 -15px;
 
       img {
         width: 100%;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index b8eb06f2c..0e71a1867 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -46,6 +46,7 @@ $footer-border-color: $header-border-color;
 
 $separator-border-color: rgba(0, 0, 0, 0.10);
 
+$video-miniature-width: 238px;
 $video-thumbnail-height: 122px;
 $video-thumbnail-width: 223px;