aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-06-11 14:33:33 +0200
committerChocobozzz <me@florianbigard.com>2020-06-11 16:41:51 +0200
commitcf78883c70dca99fc519374d55620d9403d482be (patch)
treef5a10b078414ba5f0f3562a945b3e6cce9524e3a
parent7e4022a554016ef7b8274f0473210e2232f5f455 (diff)
downloadPeerTube-cf78883c70dca99fc519374d55620d9403d482be.tar.gz
PeerTube-cf78883c70dca99fc519374d55620d9403d482be.tar.zst
PeerTube-cf78883c70dca99fc519374d55620d9403d482be.zip
Limit thumbnail sizes
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss2
-rw-r--r--client/src/app/search/search.component.html2
-rw-r--r--client/src/app/search/search.component.ts13
-rw-r--r--client/src/app/shared/misc/screen.service.ts10
-rw-r--r--client/src/app/shared/video/abstract-video-list.html16
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss23
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts7
-rw-r--r--client/src/app/shared/video/video-miniature.component.html22
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss14
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts8
-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
-rw-r--r--client/src/sass/include/_bootstrap-variables.scss2
-rw-r--r--client/src/sass/include/_miniature.scss123
-rw-r--r--client/src/sass/include/_variables.scss1
15 files changed, 151 insertions, 123 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 042290809..4957e91d7 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -3,7 +3,7 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5.margin-content { 5.margin-content {
6 @include adapt-margin-content-width; 6 @include fluid-videos-miniature-layout;
7} 7}
8 8
9.section { 9.section {
diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index d723606db..6acdedf92 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -54,7 +54,7 @@
54 <div *ngIf="isVideo(result)" class="entry video"> 54 <div *ngIf="isVideo(result)" class="entry video">
55 <my-video-miniature 55 <my-video-miniature
56 [video]="result" [user]="user" [displayAsRow]="true" [displayVideoActions]="!hideActions()" 56 [video]="result" [user]="user" [displayAsRow]="true" [displayVideoActions]="!hideActions()"
57 [useLazyLoadUrl]="advancedSearch.searchTarget === 'search-index'" 57 [displayOptions]="videoDisplayOptions" [useLazyLoadUrl]="advancedSearch.searchTarget === 'search-index'"
58 (videoBlocked)="removeVideoFromArray(result)" (videoRemoved)="removeVideoFromArray(result)" 58 (videoBlocked)="removeVideoFromArray(result)" (videoRemoved)="removeVideoFromArray(result)"
59 ></my-video-miniature> 59 ></my-video-miniature>
60 </div> 60 </div>
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index 7ab0ed9d6..0439fdf51 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -8,11 +8,11 @@ import { SearchService } from '@app/search/search.service'
8import { immutableAssign } from '@app/shared/misc/utils' 8import { immutableAssign } from '@app/shared/misc/utils'
9import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 9import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
10import { VideoChannel } from '@app/shared/video-channel/video-channel.model' 10import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
11import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
11import { Video } from '@app/shared/video/video.model' 12import { Video } from '@app/shared/video/video.model'
12import { MetaService } from '@ngx-meta/core' 13import { MetaService } from '@ngx-meta/core'
13import { I18n } from '@ngx-translate/i18n-polyfill' 14import { I18n } from '@ngx-translate/i18n-polyfill'
14import { ServerConfig } from '@shared/models' 15import { ServerConfig } from '@shared/models'
15import { UserService } from '@app/shared'
16import { SearchTargetType } from '@shared/models/search/search-target-query.model' 16import { SearchTargetType } from '@shared/models/search/search-target-query.model'
17 17
18@Component({ 18@Component({
@@ -32,6 +32,17 @@ export class SearchComponent implements OnInit, OnDestroy {
32 isSearchFilterCollapsed = true 32 isSearchFilterCollapsed = true
33 currentSearch: string 33 currentSearch: string
34 34
35 videoDisplayOptions: MiniatureDisplayOptions = {
36 date: true,
37 views: true,
38 by: true,
39 avatar: false,
40 privacyLabel: false,
41 privacyText: false,
42 state: false,
43 blacklistInfo: false
44 }
45
35 errorMessage: string 46 errorMessage: string
36 serverConfig: ServerConfig 47 serverConfig: ServerConfig
37 48
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index fa9c71e5b..a69fad31d 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -36,11 +36,11 @@ export class ScreenService {
36 36
37 let numberOfVideos = 1 37 let numberOfVideos = 1
38 38
39 if (screenWidth > 1850) numberOfVideos = 6 39 if (screenWidth > 1850) numberOfVideos = 7
40 else if (screenWidth > 1600) numberOfVideos = 5 40 else if (screenWidth > 1600) numberOfVideos = 6
41 else if (screenWidth > 1370) numberOfVideos = 4 41 else if (screenWidth > 1370) numberOfVideos = 5
42 else if (screenWidth > 1100) numberOfVideos = 3 42 else if (screenWidth > 1100) numberOfVideos = 4
43 else if (screenWidth > 850) numberOfVideos = 2 43 else if (screenWidth > 850) numberOfVideos = 3
44 44
45 return numberOfVideos 45 return numberOfVideos
46 } 46 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 8ce3b25b0..9e551c1c8 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -35,13 +35,15 @@
35 {{ getCurrentGroupedDateLabel(video) }} 35 {{ getCurrentGroupedDateLabel(video) }}
36 </div> 36 </div>
37 37
38 <my-video-miniature 38 <div class="video-wrapper">
39 [fitWidth]="true" 39 <my-video-miniature
40 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType" 40 [fitWidth]="true"
41 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 41 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
42 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 42 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
43 > 43 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
44 </my-video-miniature> 44 >
45 </my-video-miniature>
46 </div>
45 </ng-container> 47 </ng-container>
46 </div> 48 </div>
47</div> 49</div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 982204e21..7f23098aa 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -3,24 +3,6 @@
3@import '_mixins'; 3@import '_mixins';
4@import '_miniature'; 4@import '_miniature';
5 5
6.videos {
7 $column-width: #{$video-thumbnail-width - 25px};
8
9 display: grid;
10 column-gap: calc(10px + .2%);
11 grid-template-columns: repeat(
12 auto-fill,
13 minmax(
14 var(--miniature-min-width, #{$column-width}),
15 1fr
16 )
17 );
18
19 @media screen and (min-width: #{breakpoint(fhd)}) {
20 --miniature-min-width: #{$column-width + 100px};
21 }
22}
23
24.videos-header { 6.videos-header {
25 display: flex; 7 display: flex;
26 justify-content: space-between; 8 justify-content: space-between;
@@ -74,8 +56,8 @@
74 } 56 }
75} 57}
76 58
77:host-context(.main-col:not(.expanded)) .margin-content { 59.margin-content {
78 @include adapt-margin-content-width($fluid: true); 60 @include fluid-videos-miniature-layout;
79} 61}
80 62
81@media screen and (max-width: $mobile-view) { 63@media screen and (max-width: $mobile-view) {
@@ -83,6 +65,7 @@
83 flex-direction: column; 65 flex-direction: column;
84 align-items: center; 66 align-items: center;
85 height: auto; 67 height: auto;
68 margin-bottom: 10px;
86 69
87 .title-page { 70 .title-page {
88 margin-bottom: 10px; 71 margin-bottom: 10px;
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 69d5c0010..76aa683fc 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -56,7 +56,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
56 date: true, 56 date: true,
57 views: true, 57 views: true,
58 by: true, 58 by: true,
59 avatar: true, 59 avatar: false,
60 privacyLabel: true, 60 privacyLabel: true,
61 privacyText: false, 61 privacyText: false,
62 state: false, 62 state: false,
@@ -139,6 +139,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
139 if (this.hasDoneFirstQuery) this.reloadVideos() 139 if (this.hasDoneFirstQuery) this.reloadVideos()
140 } 140 }
141 ) 141 )
142
143 // Display avatar in mobile view
144 if (this.screenService.isInMobileView()) {
145 this.displayOptions.avatar = true
146 }
142 } 147 }
143 148
144 ngOnDestroy () { 149 ngOnDestroy () {
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 575505f63..d37ab478d 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,32 +9,34 @@
9 9
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <a
13 tabindex="-1"
14 class="video-miniature-name"
15 [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
16 >{{ video.name }}</a>
17
18 <div class="d-inline-flex"> 12 <div class="d-inline-flex">
19 <avatar-channel *ngIf="displayOptions.avatar" class="mr-1 pt-1" [video]="video" size="sm"></avatar-channel> 13 <div *ngIf="displayOptions.avatar" class="avatar">
14 <img [src]="getAvatarUrl()" alt="Avatar" />
15 </div>
20 16
21 <div class="d-flex flex-column"> 17 <div class="d-flex flex-column">
18 <a
19 tabindex="-1"
20 class="video-miniature-name"
21 [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
22 >{{ video.name }}</a>
23
22 <span class="video-miniature-created-at-views"> 24 <span class="video-miniature-created-at-views">
23 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle> 25 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
24 26
25 <span class="views"> 27 <span class="views">
26 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container> 28 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
27 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container> 29 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
28 </span> 30 </span>
29 </span> 31 </span>
30 32
31 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> 33 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
32 {{ video.byAccount }} 34 {{ video.byAccount }}
33 </a> 35 </a>
34 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> 36 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
35 {{ video.byVideoChannel }} 37 {{ video.byVideoChannel }}
36 </a> 38 </a>
37 39
38 <div class="video-info-privacy"> 40 <div class="video-info-privacy">
39 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container> 41 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
40 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container> 42 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 1e5580b9a..4e7c9fb57 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -19,16 +19,22 @@ $more-margin-right: 15px;
19 .video-miniature-information { 19 .video-miniature-information {
20 width: $video-miniature-width - $more-button-width - $more-margin-right; 20 width: $video-miniature-width - $more-button-width - $more-margin-right;
21 line-height: normal; 21 line-height: normal;
22 font-size: 13px; 22
23 .avatar {
24 margin: 10px 10px 0 0;
25
26 img {
27 @include avatar(40px);
28 }
29 }
23 30
24 .video-miniature-name { 31 .video-miniature-name {
25 @include miniature-name; 32 @include miniature-name;
26 font-size: 110%;
27 } 33 }
28 34
29 .video-miniature-created-at-views { 35 .video-miniature-created-at-views {
30 display: block; 36 display: block;
31 font-size: 95%; 37 font-size: 13px;
32 } 38 }
33 39
34 .video-miniature-account, 40 .video-miniature-account,
@@ -37,7 +43,7 @@ $more-margin-right: 15px;
37 @include ellipsis; 43 @include ellipsis;
38 44
39 display: block; 45 display: block;
40 font-size: 95%; 46 font-size: 13px;
41 color: pvar(--greyForegroundColor); 47 color: pvar(--greyForegroundColor);
42 48
43 &:hover { 49 &:hover {
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index f0b0992e2..ccf90af54 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -178,6 +178,14 @@ export class VideoMiniatureComponent implements OnInit {
178 return '' 178 return ''
179 } 179 }
180 180
181 getAvatarUrl () {
182 if (this.ownerDisplayTypeChosen === 'account') {
183 return this.video.accountAvatarUrl
184 }
185
186 return this.video.videoChannelAvatarUrl
187 }
188
181 loadActions () { 189 loadActions () {
182 if (this.displayVideoActions) this.showActions = true 190 if (this.displayVideoActions) this.showActions = true
183 191
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 {
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 09c58a697..41a1448c4 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -18,7 +18,7 @@ $grid-breakpoints: (
18 xxl: 1600px, 18 xxl: 1600px,
19 19
20 // SCREEN GROUP 20 // SCREEN GROUP
21 fhd: 1920px, 21 fhd: 1800px,
22 qhd: 2560px, 22 qhd: 2560px,
23 uhd: 3840px 23 uhd: 3840px
24); 24);
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d89d6f9ff..d79086723 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -108,38 +108,6 @@ $play-overlay-width: 18px;
108 color: #fff; 108 color: #fff;
109} 109}
110 110
111@mixin video-miniature-small-screen {
112 text-align: center;
113
114 ::ng-deep .video-miniature {
115 padding-right: 0;
116 height: auto;
117 width: 100%;
118 margin-bottom: 20px;
119
120 .video-miniature-information {
121 width: 100% !important;
122 text-align: left;
123
124 span {
125 width: 100%;
126 }
127 }
128
129 .video-thumbnail {
130 margin-bottom: 10px;
131 width: 100%;
132 height: calc(100% / #{$video-thumbnail-ratio});
133 border-radius: 0;
134
135 img {
136 width: 100%;
137 height: 100%;
138 }
139 }
140 }
141}
142
143@mixin miniature-rows { 111@mixin miniature-rows {
144 &:first-child { 112 &:first-child {
145 padding-top: 30px; 113 padding-top: 30px;
@@ -149,10 +117,6 @@ $play-overlay-width: 18px;
149 } 117 }
150 } 118 }
151 119
152 my-video-miniature {
153 text-align: left;
154 }
155
156 .section-title { 120 .section-title {
157 font-size: 24px; 121 font-size: 24px;
158 font-weight: $font-semibold; 122 font-weight: $font-semibold;
@@ -213,44 +177,81 @@ $play-overlay-width: 18px;
213 max-height: initial; 177 max-height: initial;
214 overflow: initial; 178 overflow: initial;
215 179
216 @include video-miniature-small-screen;
217
218 .section-title { 180 .section-title {
219 font-size: 17px; 181 font-size: 17px;
182 margin-left: 10px;
220 } 183 }
221 } 184 }
222} 185}
223 186
224@mixin adapt-margin-content-width($fluid: false) { 187@mixin fluid-videos-miniature-layout {
225 @if $fluid { 188 margin-left: 3vw !important;
226 margin-left: 3vw !important; 189 margin-right: 3vw !important;
227 margin-right: 3vw !important;
228 } @else {
229 width: $video-miniature-width * 6;
230 margin: auto !important;
231 190
232 @media screen and (max-width: 1800px) { 191 @media screen and (max-width: $mobile-view) {
233 width: $video-miniature-width * 5; 192 width: auto;
234 } 193 margin: 0 !important;
235 194
236 @media screen and (max-width: 1800px - $video-miniature-width) { 195 .videos {
237 width: $video-miniature-width * 4; 196 text-align: center;
238 }
239 197
240 @media screen and (max-width: 1800px - (2* $video-miniature-width)) { 198 ::ng-deep .video-miniature {
241 width: $video-miniature-width * 3; 199 padding-right: 0;
242 } 200 height: auto;
201 width: 100%;
202 margin-bottom: 25px;
243 203
244 @media screen and (max-width: 1800px - (3* $video-miniature-width)) { 204 .video-miniature-information {
245 width: $video-miniature-width * 2; 205 width: 100% !important;
206 text-align: left;
207
208 span {
209 width: 100%;
210 }
211 }
212
213 .video-thumbnail {
214 border-radius: 0;
215 }
216 }
246 } 217 }
218 }
219
220 @media screen and (min-width: #{breakpoint(fhd)}) {
221 margin-left: 6vw !important;
222 margin-right: 6vw !important;
223 }
247 224
248 @media screen and (max-width: $mobile-view) { 225 @media screen and (min-width: $mobile-view) {
249 width: auto; 226
250 margin: 0 !important; 227 .videos {
228 --miniature-min-width: #{$video-thumbnail-width - 15px};
229 --miniature-max-width: #{$video-thumbnail-width};
230
231 display: grid;
232 column-gap: 5px;
233 grid-template-columns: repeat(
234 auto-fill,
235 minmax(
236 var(--miniature-min-width),
237 1fr
238 )
239 );
240
241 @media screen and (min-width: #{breakpoint(fhd)}) {
242 column-gap: 1%;
243 --miniature-min-width: #{$video-thumbnail-width};
244 }
245
246 .video-wrapper {
247 margin: 0 auto;
248 width: 100%;
251 249
252 .videos { 250 my-video-miniature {
253 @include video-miniature-small-screen; 251 display: block;
252 min-width: var(--miniature-min-width);
253 max-width: var(--miniature-max-width);
254 }
254 } 255 }
255 } 256 }
256 } 257 }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 14f1ae76c..56b1ff884 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -59,7 +59,6 @@ $video-miniature-width: 238px;
59$video-miniature-margin-bottom: 30px; 59$video-miniature-margin-bottom: 30px;
60$video-thumbnail-height: 122px; 60$video-thumbnail-height: 122px;
61$video-thumbnail-width: 223px; 61$video-thumbnail-width: 223px;
62$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
63 62
64$theater-bottom-space: 115px; 63$theater-bottom-space: 115px;
65 64