Account/channel videos display as rows

pull/3920/head
Chocobozzz 2021-04-01 16:14:34 +02:00
parent 0f7407d926
commit 4d5e572f52
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 26 additions and 12 deletions

View File

@ -93,4 +93,8 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit,
generateSyndicationList () { generateSyndicationList () {
this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id) this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id)
} }
displayAsRow () {
return this.screenService.isInMobileView()
}
} }

View File

@ -24,10 +24,9 @@
} }
.playlists { .playlists {
text-align: left !important; justify-content: left;
justify-content: left !important;
margin-left: pvar(--horizontalMarginContent) !important; margin-left: pvar(--horizontalMarginContent) !important;
margin-right: var(--horizontalMarginContent) !important; margin-right: pvar(--horizontalMarginContent) !important;
} }
} }

View File

@ -112,4 +112,8 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
this.reloadVideos() this.reloadVideos()
} }
displayAsRow () {
return this.screenService.isInMobileView()
}
} }

View File

@ -43,7 +43,7 @@
<div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div> <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
<div <div
myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" 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;"> <ng-container *ngFor="let video of videos; trackBy: videoById;">
<h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)"> <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@ -52,7 +52,7 @@
<div class="video-wrapper"> <div class="video-wrapper">
<my-video-miniature <my-video-miniature
[video]="video" [user]="userMiniature" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
[displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
(videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
> >

View File

@ -72,6 +72,15 @@ $iconSize: 16px;
@include grid-videos-miniature-layout; @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) { @media screen and (max-width: $mobile-view) {
.videos-header { .videos-header {
flex-direction: column; flex-direction: column;

View File

@ -319,6 +319,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
viewContainerRef.createComponent(componentFactory, 0, injector) viewContainerRef.createComponent(componentFactory, 0, injector)
} }
// Can be redefined by child
displayAsRow () {
return false
}
// On videos hook for children that want to do something // On videos hook for children that want to do something
protected onMoreVideos () { /* empty */ } protected onMoreVideos () { /* empty */ }

View File

@ -157,11 +157,4 @@
} }
} }
} }
@media screen and (max-width: $mobile-view) {
.videos,
.playlists {
text-align: center;
}
}
} }