Account/channel videos display as rows

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 484d60e25d3e3354f2c34f13a2ab26d8befa8dc6..78af2316a78d77452569de560e5fcc93c02bdb01 100644 (file)
--- 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 3dd35ef3fb4a774637dd59a8e989d67985b4677d..acd2e409e002ae563715dc037141eafd97f91ceb 100644 (file)
--- 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 5e2af1b92539d5631a4d75ae4bd9b0f61d60b990..e05b06e5c0200b586786f9b6d7d55d4e4708ec22 100644 (file)
--- 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 81c773b5a0c62d7c18441f063d4d113edcb1d1a8..ee5df28be2138844a9765e66d9a95ba887d52bbc 100644 (file)
--- 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 26c412402d606cfcca6520080160740230b7ad02..6570b63d0011fb0c7c9059894aa3b1cab2662a52 100644 (file)
--- 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 18615c37a115a9931f69137f79bcbd0792e26291..f833805136c50eb7f9eb2f6bfd8585231bfe23e9 100644 (file)
--- 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 9e1fc63e3f6eaa73250f2419f0878e8fc072b1f5..3b86f29b4fcc59657624e2e77e4f20c7eac5be94 100644 (file)
--- 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;
-    }
-  }
 }