diff options
Diffstat (limited to 'client/src/app/shared/shared-custom-markup/peertube-custom-tags')
3 files changed, 26 insertions, 13 deletions
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html index a2fd2fe40..15ef9d418 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.html | |||
@@ -1,8 +1,13 @@ | |||
1 | <div class="videos"> | 1 | <div class="root"> |
2 | <my-video-miniature | 2 | <div class="videos" [ngStyle]="limitRowsStyle()"> |
3 | *ngFor="let video of videos" | 3 | |
4 | [video]="video" [user]="getUser()" [displayAsRow]="false" | 4 | <div class="video-wrapper" *ngFor="let video of videos"> |
5 | [displayVideoActions]="false" [displayOptions]="displayOptions" | 5 | <my-video-miniature |
6 | > | 6 | [video]="video" [user]="getUser()" [displayAsRow]="false" |
7 | </my-video-miniature> | 7 | [displayVideoActions]="false" [displayOptions]="displayOptions" |
8 | > | ||
9 | </my-video-miniature> | ||
10 | </div> | ||
11 | |||
12 | </div> | ||
8 | </div> | 13 | </div> |
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss index 6b7274480..5a9a926fe 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss | |||
@@ -1,10 +1,7 @@ | |||
1 | @import '_variables'; | 1 | @import '_variables'; |
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | ||
3 | 4 | ||
4 | my-video-miniature { | 5 | .root { |
5 | @include margin-right(15px); | 6 | @include grid-videos-miniature-layout; |
6 | |||
7 | display: inline-block; | ||
8 | min-width: $video-thumbnail-width; | ||
9 | max-width: $video-thumbnail-width; | ||
10 | } | 7 | } |
diff --git a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts index fe084afd9..d4402dd9f 100644 --- a/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts +++ b/client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.ts | |||
@@ -20,6 +20,7 @@ export class VideosListMarkupComponent implements OnInit { | |||
20 | @Input() count: number | 20 | @Input() count: number |
21 | @Input() onlyDisplayTitle: boolean | 21 | @Input() onlyDisplayTitle: boolean |
22 | @Input() filter: VideoFilter | 22 | @Input() filter: VideoFilter |
23 | @Input() maxRows: number | ||
23 | 24 | ||
24 | videos: Video[] | 25 | videos: Video[] |
25 | 26 | ||
@@ -43,6 +44,16 @@ export class VideosListMarkupComponent implements OnInit { | |||
43 | return this.auth.getUser() | 44 | return this.auth.getUser() |
44 | } | 45 | } |
45 | 46 | ||
47 | limitRowsStyle () { | ||
48 | if (this.maxRows <= 0) return {} | ||
49 | |||
50 | return { | ||
51 | 'grid-template-rows': `repeat(${this.maxRows}, 1fr)`, | ||
52 | 'grid-auto-rows': '0', // Set height to 0 for autogenerated grid rows | ||
53 | 'overflow-y': 'hidden' // Hide grid items that overflow | ||
54 | } | ||
55 | } | ||
56 | |||
46 | ngOnInit () { | 57 | ngOnInit () { |
47 | if (this.onlyDisplayTitle) { | 58 | if (this.onlyDisplayTitle) { |
48 | for (const key of Object.keys(this.displayOptions)) { | 59 | for (const key of Object.keys(this.displayOptions)) { |