Verified Commit 4d5e572f authored by Chocobozzz's avatar Chocobozzz

Account/channel videos display as rows

parent 0f7407d9
......@@ -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()
}
}
......@@ -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;
}
}
......@@ -112,4 +112,8 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
this.reloadVideos()
}
displayAsRow () {
return this.screenService.isInMobileView()
}
}
......@@ -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)"
>
......
......@@ -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;
......
......@@ -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 */ }
......
......@@ -157,11 +157,4 @@
}
}
}
@media screen and (max-width: $mobile-view) {
.videos,
.playlists {
text-align: center;
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment