aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/video-list/video-overview.component.html24
-rw-r--r--client/src/app/videos/video-list/video-overview.component.scss7
2 files changed, 21 insertions, 10 deletions
diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 72e101558..999628de4 100644
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -7,25 +7,29 @@
7 > 7 >
8 <ng-container *ngFor="let overview of overviews"> 8 <ng-container *ngFor="let overview of overviews">
9 9
10 <div class="section" *ngFor="let object of overview.categories"> 10 <div class="section videos" *ngFor="let object of overview.categories">
11 <div class="section-title"> 11 <div class="section-title">
12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a> 12 <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
13 </div> 13 </div>
14 14
15 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 15 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
16 </my-video-miniature> 16 <my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
17 </my-video-miniature>
18 </div>
17 </div> 19 </div>
18 20
19 <div class="section" *ngFor="let object of overview.tags"> 21 <div class="section videos" *ngFor="let object of overview.tags">
20 <div class="section-title"> 22 <div class="section-title">
21 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a> 23 <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
22 </div> 24 </div>
23 25
24 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 26 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
25 </my-video-miniature> 27 <my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
28 </my-video-miniature>
29 </div>
26 </div> 30 </div>
27 31
28 <div class="section channel" *ngFor="let object of overview.channels"> 32 <div class="section channel videos" *ngFor="let object of overview.channels">
29 <div class="section-title"> 33 <div class="section-title">
30 <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]"> 34 <a [routerLink]="[ '/video-channels', buildVideoChannelBy(object) ]">
31 <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" /> 35 <img [src]="buildVideoChannelAvatarUrl(object)" alt="Avatar" />
@@ -34,8 +38,10 @@
34 </a> 38 </a>
35 </div> 39 </div>
36 40
37 <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false"> 41 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
38 </my-video-miniature> 42 <my-video-miniature [video]="video" [fitWidth]="true" [user]="user" [displayVideoActions]="false">
43 </my-video-miniature>
44 </div>
39 </div> 45 </div>
40 46
41 </ng-container> 47 </ng-container>
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss
index ade6f53b7..c1d10188a 100644
--- a/client/src/app/videos/video-list/video-overview.component.scss
+++ b/client/src/app/videos/video-list/video-overview.component.scss
@@ -2,8 +2,13 @@
2@import '_mixins'; 2@import '_mixins';
3@import '_miniature'; 3@import '_miniature';
4 4
5.section-title {
6 // make the element span a full grid row within .videos grid
7 grid-column: 1 / -1;
8}
9
5.margin-content { 10.margin-content {
6 @include adapt-margin-content-width; 11 @include fluid-videos-miniature-layout;
7} 12}
8 13
9.section { 14.section {