aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-01 16:14:34 +0200
committerChocobozzz <me@florianbigard.com>2021-04-01 16:54:49 +0200
commit4d5e572f52e000034abb076e4bf7d7044d704f94 (patch)
treeb064e9902bf68e5e67c4f1750779c2e2ef2b47f1 /client
parent0f7407d926cf7774f8f730dba08327569c11680c (diff)
downloadPeerTube-4d5e572f52e000034abb076e4bf7d7044d704f94.tar.gz
PeerTube-4d5e572f52e000034abb076e4bf7d7044d704f94.tar.zst
PeerTube-4d5e572f52e000034abb076e4bf7d7044d704f94.zip
Account/channel videos display as rows
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+accounts/account-videos/account-videos.component.ts4
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss5
-rw-r--r--client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts4
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html4
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss9
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.ts5
-rw-r--r--client/src/sass/include/_miniature.scss7
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,
93 generateSyndicationList () { 93 generateSyndicationList () {
94 this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id) 94 this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id)
95 } 95 }
96
97 displayAsRow () {
98 return this.screenService.isInMobileView()
99 }
96} 100}
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 @@
24 } 24 }
25 25
26 .playlists { 26 .playlists {
27 text-align: left !important; 27 justify-content: left;
28 justify-content: left !important;
29 28
30 margin-left: pvar(--horizontalMarginContent) !important; 29 margin-left: pvar(--horizontalMarginContent) !important;
31 margin-right: var(--horizontalMarginContent) !important; 30 margin-right: pvar(--horizontalMarginContent) !important;
32 } 31 }
33} 32}
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
112 112
113 this.reloadVideos() 113 this.reloadVideos()
114 } 114 }
115
116 displayAsRow () {
117 return this.screenService.isInMobileView()
118 }
115} 119}
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 @@
43 <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div> 43 <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
44 <div 44 <div
45 myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" 45 myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
46 class="videos" 46 class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
47 > 47 >
48 <ng-container *ngFor="let video of videos; trackBy: videoById;"> 48 <ng-container *ngFor="let video of videos; trackBy: videoById;">
49 <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)"> 49 <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -52,7 +52,7 @@
52 52
53 <div class="video-wrapper"> 53 <div class="video-wrapper">
54 <my-video-miniature 54 <my-video-miniature
55 [video]="video" [user]="userMiniature" 55 [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
58 > 58 >
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;
72 @include grid-videos-miniature-layout; 72 @include grid-videos-miniature-layout;
73} 73}
74 74
75.display-as-row.videos {
76 margin-left: pvar(--horizontalMarginContent);
77 margin-right: pvar(--horizontalMarginContent);
78
79 .video-wrapper {
80 margin-bottom: 15px;
81 }
82}
83
75@media screen and (max-width: $mobile-view) { 84@media screen and (max-width: $mobile-view) {
76 .videos-header { 85 .videos-header {
77 flex-direction: column; 86 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
319 viewContainerRef.createComponent(componentFactory, 0, injector) 319 viewContainerRef.createComponent(componentFactory, 0, injector)
320 } 320 }
321 321
322 // Can be redefined by child
323 displayAsRow () {
324 return false
325 }
326
322 // On videos hook for children that want to do something 327 // On videos hook for children that want to do something
323 protected onMoreVideos () { /* empty */ } 328 protected onMoreVideos () { /* empty */ }
324 329
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 @@
157 } 157 }
158 } 158 }
159 } 159 }
160
161 @media screen and (max-width: $mobile-view) {
162 .videos,
163 .playlists {
164 text-align: center;
165 }
166 }
167} 160}