From 4d5e572f52e000034abb076e4bf7d7044d704f94 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 1 Apr 2021 16:14:34 +0200 Subject: [PATCH] Account/channel videos display as rows --- .../+accounts/account-videos/account-videos.component.ts | 4 ++++ .../video-channel-playlists.component.scss | 5 ++--- .../video-channel-videos.component.ts | 4 ++++ .../shared-video-miniature/abstract-video-list.html | 4 ++-- .../shared-video-miniature/abstract-video-list.scss | 9 +++++++++ .../shared/shared-video-miniature/abstract-video-list.ts | 5 +++++ client/src/sass/include/_miniature.scss | 7 ------- 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 @@
No results.

@@ -52,7 +52,7 @@
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; - } - } }