aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+video-channels')
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html8
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss29
-rw-r--r--client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts9
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss4
4 files changed, 37 insertions, 13 deletions
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
index 594935afd..b69d1682a 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html
@@ -1,13 +1,13 @@
1<div class="margin-content"> 1<div class="margin-content">
2 <div i18n class="title-page title-page-single"> 2 <div i18n class="title-page title-page-single" *ngIf="pagination.totalItems">
3 Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}} 3 Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
4 </div> 4 </div>
5 5
6 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div> 6 <div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
7 7
8 <div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"> 8 <div class="playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
9 <div *ngFor="let playlist of videoPlaylists" class="playlist-miniature-container"> 9 <div *ngFor="let playlist of videoPlaylists" class="playlist-wrapper">
10 <my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature> 10 <my-video-playlist-miniature [playlist]="playlist" [toManage]="false" [displayAsRow]="displayAsRow()"></my-video-playlist-miniature>
11 </div> 11 </div>
12 </div> 12 </div>
13</div> 13</div>
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 cb2931858..3dd35ef3f 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
@@ -1,14 +1,33 @@
1.title-page { 1@import '_variables';
2 margin-top: 0; 2@import '_mixins';
3} 3@import '_miniature';
4 4
5.video-playlist { 5.playlists {
6 display: flex; 6 display: flex;
7 flex-wrap: wrap; 7 flex-wrap: wrap;
8 justify-content: center; 8 justify-content: center;
9 9
10 .playlist-miniature-container { 10 .playlist-wrapper {
11 margin-right: 15px; 11 margin-right: 15px;
12 margin-bottom: 30px; 12 margin-bottom: 30px;
13 } 13 }
14} 14}
15
16.margin-content {
17 @include grid-videos-miniature-layout;
18}
19
20@media screen and (max-width: $mobile-view) {
21 .title-page {
22 display: block;
23 text-align: center;
24 }
25
26 .playlists {
27 text-align: left !important;
28 justify-content: left !important;
29
30 margin-left: pvar(--horizontalMarginContent) !important;
31 margin-right: var(--horizontalMarginContent) !important;
32 }
33}
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
index 8b507c626..14465bb8d 100644
--- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
+++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts
@@ -1,6 +1,6 @@
1import { Subject, Subscription } from 'rxjs' 1import { Subject, Subscription } from 'rxjs'
2import { Component, OnDestroy, OnInit } from '@angular/core' 2import { Component, OnDestroy, OnInit } from '@angular/core'
3import { ComponentPagination, hasMoreItems } from '@app/core' 3import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core'
4import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' 4import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
5import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' 5import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
6 6
@@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
25 25
26 constructor ( 26 constructor (
27 private videoPlaylistService: VideoPlaylistService, 27 private videoPlaylistService: VideoPlaylistService,
28 private videoChannelService: VideoChannelService 28 private videoChannelService: VideoChannelService,
29 private screenService: ScreenService
29 ) {} 30 ) {}
30 31
31 ngOnInit () { 32 ngOnInit () {
@@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
48 this.loadVideoPlaylists() 49 this.loadVideoPlaylists()
49 } 50 }
50 51
52 displayAsRow () {
53 return this.screenService.isInMobileView()
54 }
55
51 private loadVideoPlaylists () { 56 private loadVideoPlaylists () {
52 this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination) 57 this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
53 .subscribe(res => { 58 .subscribe(res => {
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 3b27f3aa1..ce33e7be6 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -16,11 +16,11 @@
16} 16}
17 17
18.links { 18.links {
19 @include fluid-videos-miniature-margins; 19 @include grid-videos-miniature-margins;
20} 20}
21 21
22.channel-info { 22.channel-info {
23 @include fluid-videos-miniature-margins(false, 15px); 23 @include grid-videos-miniature-margins(false, 15px);
24 24
25 display: grid; 25 display: grid;
26 grid-template-columns: 1fr auto; 26 grid-template-columns: 1fr auto;