Account/channel videos display as rows

7 files changed, 26 insertions, 12 deletions

diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts
index 484d60e25..78af2316a 100644
--- a/client/src/app/+accounts/account-videos/account-videos.component.ts
+++ b/client/src/app/+accounts/account-videos/account-videos.component.ts
@@ -93,4 +93,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
   generateSyndicationList () {
     this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id)
   }
+
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
 }
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
index 3dd35ef3f..acd2e409e 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss
@@ -24,10 +24,9 @@
   }
 
   .playlists {
-    text-align: left !important;
-    justify-content: left !important;
+    justify-content: left;
 
     margin-left: pvar(--horizontalMarginContent) !important;
-    margin-right: var(--horizontalMarginContent) !important;
+    margin-right: pvar(--horizontalMarginContent) !important;
   }
 }
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 5e2af1b92..e05b06e5c 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -112,4 +112,8 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
 
     this.reloadVideos()
   }
+
+  displayAsRow () {
+    return this.screenService.isInMobileView()
+  }
 }
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 81c773b5a..ee5df28be 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -43,7 +43,7 @@
   <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
   <div
     myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-    class="videos"
+    class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
   >
     <ng-container *ngFor="let video of videos; trackBy: videoById;">
       <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -52,7 +52,7 @@
 
       <div class="video-wrapper">
         <my-video-miniature
-          [video]="video" [user]="userMiniature"
+          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
           [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
           (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
         >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 26c412402..6570b63d0 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -72,6 +72,15 @@ $iconSize: 16px;
   @include grid-videos-miniature-layout;
 }
 
+.display-as-row.videos {
+  margin-left: pvar(--horizontalMarginContent);
+  margin-right: pvar(--horizontalMarginContent);
+
+  .video-wrapper {
+    margin-bottom: 15px;
+  }
+}
+
 @media screen and (max-width: $mobile-view) {
   .videos-header {
     flex-direction: column;
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index 18615c37a..f83380513 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -319,6 +319,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
     viewContainerRef.createComponent(componentFactory, 0, injector)
   }
 
+  // Can be redefined by child
+  displayAsRow () {
+    return false
+  }
+
   // On videos hook for children that want to do something
   protected onMoreVideos () { /* empty */ }
 
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 9e1fc63e3..3b86f29b4 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -157,11 +157,4 @@
       }
     }
   }
-
-  @media screen and (max-width: $mobile-view) {
-    .videos,
-    .playlists {
-      text-align: center;
-    }
-  }
 }