Fix overview page on mobile

4 files changed, 43 insertions, 35 deletions

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 91091a5bb..3f9c73a29 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -18,31 +18,6 @@ my-video-feed {
 
 @media screen and (max-width: 500px) {
   .videos {
-    text-align: center;
-
-    /deep/ .video-miniature {
-      padding-right: 0;
-      height: auto;
-      width: 100%;
-      margin-bottom: 20px;
-
-      .video-miniature-information {
-        width: 100% !important;
-
-        span {
-          width: 100%;
-        }
-      }
-
-      .video-thumbnail {
-        width: 100%;
-        height: auto;
-
-        img {
-          width: 100%;
-          height: auto;
-        }
-      }
-    }
+    @include video-miniature-small-screen;
   }
 }
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index be9db3d90..4150cd5e1 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,9 +7,7 @@
       <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
   <div class="section" *ngFor="let object of overview.tags">
@@ -17,9 +15,7 @@
       <a routerLink="/search" [queryParams]="{ tagOneOf: [ object.tag ] }">{{ object.tag }}</a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
   <div class="section channel" *ngFor="let object of overview.channels">
@@ -31,9 +27,7 @@
       </a>
     </div>
 
-    <div>
-      <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
-    </div>
+    <my-video-miniature *ngFor="let video of object.videos" [video]="video" [user]="user"></my-video-miniature>
   </div>
 
 </div>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index 73b6d2e53..e7dc60b4b 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -7,6 +7,10 @@
   &:first-child {
     padding-top: 30px;
   }
+
+  my-video-miniature {
+    text-align: left;
+  }
 }
 
 .section-title {
@@ -33,4 +37,10 @@
       margin-right: 10px;
     }
   }
+}
+
+@media screen and (max-width: 500px) {
+  .section {
+    @include video-miniature-small-screen;
+  }
 }
\ No newline at end of file
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 547f03caa..765297c87 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -471,4 +471,33 @@
     text-align: center;
     align-items: center;
   }
+}
+
+@mixin video-miniature-small-screen {
+  text-align: center;
+
+  /deep/ .video-miniature {
+    padding-right: 0;
+    height: auto;
+    width: 100%;
+    margin-bottom: 20px;
+
+    .video-miniature-information {
+      width: 100% !important;
+
+      span {
+        width: 100%;
+      }
+    }
+
+    .video-thumbnail {
+      width: 100%;
+      height: auto;
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
 }
\ No newline at end of file