aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-01 11:10:27 +0200
committerChocobozzz <me@florianbigard.com>2021-04-01 16:54:49 +0200
commit0f7407d926cf7774f8f730dba08327569c11680c (patch)
tree6b44be72187390514d9068b78851b48b1a9b7244
parent33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 (diff)
downloadPeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.gz
PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.tar.zst
PeerTube-0f7407d926cf7774f8f730dba08327569c11680c.zip
Refactor video miniature
Less dirty code, better responsive Prepare for some regressions Increase default miniature size
Diffstat
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html1
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss6
-rw-r--r--client/src/app/+accounts/accounts.component.scss4
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.html4
-rw-r--r--client/src/app/+my-library/my-history/my-history.component.scss45
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html2
-rw-r--r--client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss86
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html6
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss38
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html14
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss69
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.scss68
-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
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html4
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss33
-rw-r--r--client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts2
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.html1
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss51
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.ts5
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.html6
-rw-r--r--client/src/app/+videos/video-list/overview/video-overview.component.scss79
-rw-r--r--client/src/app/core/wrappers/screen.service.ts9
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss308
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts11
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.scss42
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html2
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss119
-rw-r--r--client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts1
-rw-r--r--client/src/sass/application.scss15
-rw-r--r--client/src/sass/include/_miniature.scss171
-rw-r--r--client/src/sass/include/_mixins.scss44
-rw-r--r--client/src/sass/include/_variables.scss12
38 files changed, 688 insertions, 626 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 19a4b3c9c..96780e938 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -39,6 +39,7 @@
39 <my-video-miniature 39 <my-video-miniature
40 *ngFor="let video of getVideosOf(videoChannel)" 40 *ngFor="let video of getVideosOf(videoChannel)"
41 [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions" 41 [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
42 thumbnailSize="medium"
42 ></my-video-miniature> 43 ></my-video-miniature>
43 44
44 <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel"> 45 <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
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 8f1e9deb5..7e88802f3 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 fluid-videos-miniature-margins; 6 @include grid-videos-miniature-margins;
7} 7}
8 8
9.channel { 9.channel {
@@ -93,6 +93,8 @@ my-subscribe-button {
93 93
94 my-video-miniature { 94 my-video-miniature {
95 margin-right: 15px; 95 margin-right: 15px;
96 min-width: $video-thumbnail-medium-width;
97 max-width: $video-thumbnail-medium-width;
96 } 98 }
97 99
98 .no-results { 100 .no-results {
@@ -105,7 +107,7 @@ my-subscribe-button {
105 position: absolute; 107 position: absolute;
106 right: 0; 108 right: 0;
107 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); 109 background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
108 padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px; 110 padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
109 z-index: z(miniature) + 1; 111 z-index: z(miniature) + 1;
110 112
111 a { 113 a {
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index d7213df1d..a836e84ce 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -15,7 +15,7 @@
15} 15}
16 16
17.links { 17.links {
18 @include fluid-videos-miniature-margins; 18 @include grid-videos-miniature-margins;
19 19
20 display: flex; 20 display: flex;
21 justify-content: space-between; 21 justify-content: space-between;
@@ -44,7 +44,7 @@ my-user-moderation-dropdown,
44} 44}
45 45
46.account-info { 46.account-info {
47 @include fluid-videos-miniature-margins(false, 15px); 47 @include grid-videos-miniature-margins(false, 15px);
48 48
49 display: grid; 49 display: grid;
50 grid-template-columns: 1fr min-content; 50 grid-template-columns: 1fr min-content;
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index c180161e7..9dec64645 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -4,7 +4,7 @@
4</h1> 4</h1>
5 5
6<div class="top-buttons"> 6<div class="top-buttons">
7 <div> 7 <div class="search-wrapper">
8 <div class="input-group has-feedback has-clear"> 8 <div class="input-group has-feedback has-clear">
9 <input 9 <input
10 type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history" 10 type="text" name="history-search" id="history-search" i18n-placeholder placeholder="Search your history"
@@ -15,7 +15,7 @@
15 </div> 15 </div>
16 </div> 16 </div>
17 17
18 <div class="history-switch ml-auto mr-3"> 18 <div class="history-switch">
19 <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch> 19 <my-input-switch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></my-input-switch>
20 <label i18n>Track watch history</label> 20 <label i18n>Track watch history</label>
21 </div> 21 </div>
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss
index 928a8a3da..af4a34b4b 100644
--- a/client/src/app/+my-library/my-history/my-history.component.scss
+++ b/client/src/app/+my-library/my-history/my-history.component.scss
@@ -11,16 +11,24 @@
11 11
12.top-buttons { 12.top-buttons {
13 margin-bottom: 30px; 13 margin-bottom: 30px;
14 display: flex; 14 display: grid;
15 grid-template-columns: 250px 1fr auto auto;
15 align-items: center; 16 align-items: center;
16 flex-wrap: wrap;
17 17
18 #history-search { 18 .search-wrapper {
19 @include peertube-input-text(250px); 19 grid-column: 1;
20
21 input {
22 @include peertube-input-text(250px);
23 }
20 } 24 }
21 25
22 .history-switch { 26 .history-switch {
27 grid-column: 3;
28
23 display: flex; 29 display: flex;
30 margin-left: auto;
31 margin-right: 15px;
24 32
25 label { 33 label {
26 margin: 0 0 0 5px; 34 margin: 0 0 0 5px;
@@ -31,6 +39,8 @@
31 } 39 }
32 40
33 .delete-history { 41 .delete-history {
42 grid-column: 4;
43
34 @include peertube-button; 44 @include peertube-button;
35 @include grey-button; 45 @include grey-button;
36 @include button-with-icon; 46 @include button-with-icon;
@@ -40,26 +50,27 @@
40} 50}
41 51
42.video { 52.video {
43 @include row-blocks; 53 @include row-blocks($column-responsive: false);
44
45 .my-video-miniature {
46 flex-grow: 1;
47 }
48} 54}
49 55
50@media screen and (max-width: $mobile-view) { 56@media screen and (max-width: $small-view) {
51 .top-buttons { 57 .top-buttons {
52 .history-switch label, .delete-history { 58 grid-template-columns: auto 1fr auto;
53 @include ellipsis; 59 row-gap: 20px;
54 }
55 60
56 .history-switch label { 61 .history-switch {
57 width: 60%; 62 grid-row: 1;
63 grid-column: 1;
64 margin: 0;
58 } 65 }
59 66
60 .delete-history { 67 .delete-history {
61 margin-left: auto; 68 grid-row: 1;
62 max-width: 32%; 69 grid-column: 3;
70 }
71
72 .search-wrapper {
73 grid-column: 1 / 4;
63 } 74 }
64 } 75 }
65} 76}
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index 510b400c0..ff448ad87 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -6,7 +6,7 @@
6 </span> 6 </span>
7</h1> 7</h1>
8 8
9<div class="video-subscriptions-header d-flex justify-content-between"> 9<div class="video-subscriptions-header">
10 <div class="has-feedback has-clear"> 10 <div class="has-feedback has-clear">
11 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch" 11 <input type="text" placeholder="Search your subscriptions" i18n-placeholder [(ngModel)]="subscriptionsSearch"
12 (ngModelChange)="onSubscriptionsSearchChanged()" /> 12 (ngModelChange)="onSubscriptionsSearchChanged()" />
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 9fc8be86c..3c1a4d2ad 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -13,36 +13,36 @@ input[type=text] {
13 13
14 margin-right: 10px; 14 margin-right: 10px;
15 } 15 }
16}
16 17
17 .video-channel-info { 18.video-channel-info {
18 flex-grow: 1; 19 flex-grow: 1;
19 20
20 a.video-channel-names { 21 a.video-channel-names {
21 @include disable-default-a-behaviour; 22 @include disable-default-a-behaviour;
22 23
23 width: fit-content; 24 width: fit-content;
24 display: flex; 25 display: flex;
25 align-items: baseline; 26 align-items: baseline;
26 color: pvar(--mainForegroundColor); 27 color: pvar(--mainForegroundColor);
27 28
28 .video-channel-display-name { 29 .video-channel-display-name {
29 font-weight: $font-semibold; 30 font-weight: $font-semibold;
30 font-size: 18px; 31 font-size: 18px;
31 } 32 }
32 33
33 .video-channel-name { 34 .video-channel-name {
34 font-size: 14px; 35 font-size: 14px;
35 color: $grey-actor-name; 36 color: $grey-actor-name;
36 margin-left: 5px; 37 margin-left: 5px;
37 }
38 } 38 }
39 } 39 }
40}
40 41
41 .actor-owner { 42.actor-owner {
42 @include actor-owner; 43 @include actor-owner;
43 44
44 margin-top: 0; 45 margin-top: 0;
45 }
46} 46}
47 47
48.video-subscriptions-header { 48.video-subscriptions-header {
@@ -50,32 +50,22 @@ input[type=text] {
50} 50}
51 51
52@media screen and (max-width: $small-view) { 52@media screen and (max-width: $small-view) {
53 .video-channel { 53 .video-subscriptions-header input[type=text] {
54 .video-channel-info { 54 width: 100% !important;
55 padding-bottom: 10px;
56 text-align: center;
57
58 .video-channel-names {
59 flex-direction: column;
60 align-items: center !important;
61 margin: auto;
62 }
63 }
64
65 img {
66 margin-right: 0;
67 }
68 } 55 }
69}
70 56
71@media screen and (max-width: $mobile-view) { 57 .video-channel-info {
72 .video-subscriptions-header { 58 padding-bottom: 10px;
73 flex-direction: column; 59 text-align: center;
74 60
75 input[type=text] { 61 .video-channel-names {
76 width: 100% !important; 62 flex-direction: column;
63 align-items: center !important;
64 margin: auto;
77 } 65 }
78 } 66 }
79}
80
81 67
68 img {
69 margin-right: 0;
70 }
71}
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
index a97b2b4fb..e7e3c17b3 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html
@@ -1,6 +1,6 @@
1<div class="row"> 1<div class="root">
2 2
3 <div class="playlist-info col-xs-12 col-md-5 col-xl-3"> 3 <div class="playlist-info">
4 <my-video-playlist-miniature 4 <my-video-playlist-miniature
5 *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true" 5 *ngIf="playlist" [playlist]="playlist" [toManage]="false" [displayChannel]="true"
6 [displayDescription]="true" [displayPrivacy]="true" 6 [displayDescription]="true" [displayPrivacy]="true"
@@ -20,7 +20,7 @@
20 20
21 </div> 21 </div>
22 22
23 <div class="playlist-elements col-xs-12 col-md-7 col-xl-9"> 23 <div class="playlist-elements">
24 <div class="no-results" *ngIf="pagination.totalItems === 0"> 24 <div class="no-results" *ngIf="pagination.totalItems === 0">
25 <div i18n>No videos in this playlist.</div> 25 <div i18n>No videos in this playlist.</div>
26 26
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
index 87a836a46..0c68dedf6 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss
@@ -2,17 +2,21 @@
2@import '_mixins'; 2@import '_mixins';
3@import '_miniature'; 3@import '_miniature';
4 4
5.root {
6 display: grid;
7 grid-template-columns: auto 1fr;
8}
9
5.playlist-info { 10.playlist-info {
11 grid-column: 1;
6 background-color: pvar(--submenuBackgroundColor); 12 background-color: pvar(--submenuBackgroundColor);
7 margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); 13 margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
8 margin-top: -$sub-menu-margin-bottom; 14 margin-top: -$sub-menu-margin-bottom;
9 15
10 padding: 10px; 16 padding: 15px;
11 17
12 display: flex; 18 display: flex;
13 flex-direction: column; 19 flex-direction: column;
14 justify-content: flex-start;
15 align-items: center;
16 20
17 /* fix ellipsis dots background color */ 21 /* fix ellipsis dots background color */
18 ::ng-deep .miniature-name::after { 22 ::ng-deep .miniature-name::after {
@@ -59,15 +63,35 @@
59 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); 63 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
60} 64}
61 65
62@media screen and (max-width: $small-view) { 66.playlist-elements {
67 grid-column: 2;
68}
69
70my-video-playlist-miniature {
71 width: $video-thumbnail-width;
72}
73
74@include on-small-main-col {
75 my-video-playlist-miniature {
76 width: $video-thumbnail-medium-width;
77 }
78}
79
80@include on-mobile-main-col {
81 .root {
82 display: block;
83 }
84
63 .playlist-info { 85 .playlist-info {
64 width: 100vw; 86 width: calc(100% + (2 * var(--horizontalMarginContent)));
65 padding-top: 20px; 87 padding-top: 20px;
66 margin-bottom: 10px; 88 margin-bottom: 10px;
67 } 89 }
68 90
69 .playlist-elements { 91 my-video-playlist-miniature,
70 padding: 0 !important; 92 .playlist-buttons {
93 margin-left: auto;
94 margin-right: auto;
71 } 95 }
72 96
73 ::ng-deep my-video-playlist-element-miniature { 97 ::ng-deep my-video-playlist-element-miniature {
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index afcf6a084..b88ea3db7 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,8 +1,6 @@
1<h1> 1<h1>
2 <span> 2 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
3 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon> 3 <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
4 <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
5 </span>
6</h1> 4</h1>
7 5
8<div class="video-playlists-header d-flex justify-content-between"> 6<div class="video-playlists-header d-flex justify-content-between">
@@ -21,10 +19,10 @@
21 19
22<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()"> 20<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
23 <div *ngFor="let playlist of videoPlaylists" class="video-playlist"> 21 <div *ngFor="let playlist of videoPlaylists" class="video-playlist">
24 <div class="miniature-wrapper"> 22 <my-video-playlist-miniature
25 <my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true" 23 [playlist]="playlist" [toManage]="true" [displayChannel]="true"
26 ></my-video-playlist-miniature> 24 [displayDescription]="true" [displayPrivacy]="true" [displayAsRow]="true"
27 </div> 25 ></my-video-playlist-miniature>
28 26
29 <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons"> 27 <div *ngIf="isRegularPlaylist(playlist)" class="video-playlist-buttons">
30 <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button> 28 <my-delete-button label (click)="deleteVideoPlaylist(playlist)"></my-delete-button>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
index 2b7c88246..94187efd4 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss
@@ -1,6 +1,10 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4h1 {
5 display: flex;
6}
7
4.create-button { 8.create-button {
5 @include create-button; 9 @include create-button;
6} 10}
@@ -9,64 +13,45 @@ input[type=text] {
9 @include peertube-input-text(300px); 13 @include peertube-input-text(300px);
10} 14}
11 15
12::ng-deep .action-button {
13 &.action-button-delete {
14 margin-right: 10px;
15 }
16}
17
18.video-playlist { 16.video-playlist {
19 @include row-blocks; 17 @include row-blocks($column-responsive: false);
20 18}
21 .miniature-wrapper {
22 flex-grow: 1;
23
24 ::ng-deep .miniature {
25 display: flex;
26
27 .miniature-info {
28 margin-left: 10px;
29 width: auto;
30 }
31 }
32 }
33 19
34 .video-playlist-buttons { 20.video-playlist-buttons {
35 min-width: 190px; 21 display: flex;
36 height: max-content; 22 margin-left: 10px;
37 } 23 align-self: flex-end;
38} 24}
39 25
40.video-playlists-header { 26.video-playlists-header {
41 margin-bottom: 30px; 27 margin-bottom: 30px;
42} 28}
43 29
44@media screen and (max-width: $small-view) { 30my-video-playlist-miniature {
31 display: block;
32 flex-grow: 1;
33}
34
35my-delete-button {
36 margin-right: 10px;
37}
38
39@include on-small-main-col {
45 .video-playlists-header { 40 .video-playlists-header {
46 text-align: center; 41 text-align: center;
47 } 42 }
48 43
49 .video-playlist { 44 .video-playlist {
50 45 flex-wrap: wrap;
51 .video-playlist-buttons {
52 margin-top: 10px;
53 }
54 } 46 }
55 47
56 my-video-playlist-miniature ::ng-deep .miniature { 48 .video-playlist-buttons {
57 flex-direction: column; 49 margin-top: 10px;
58 50 margin-left: auto;
59 .miniature-info {
60 margin-left: 0 !important;
61 }
62
63 .miniature-name {
64 max-width: $video-thumbnail-width;
65 }
66 } 51 }
67} 52}
68 53
69@media screen and (max-width: $mobile-view) { 54@include on-mobile-main-col {
70 .video-playlists-header { 55 .video-playlists-header {
71 flex-direction: column; 56 flex-direction: column;
72 57
@@ -75,4 +60,8 @@ input[type=text] {
75 margin-bottom: 12px; 60 margin-bottom: 12px;
76 } 61 }
77 } 62 }
63
64 .action-button {
65 margin-left: 0;
66 }
78} 67}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss
index 57473896b..a03baa056 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.scss
+++ b/client/src/app/+my-library/my-videos/my-videos.component.scss
@@ -32,36 +32,9 @@ h1 {
32 } 32 }
33} 33}
34 34
35::ng-deep {
36 .video {
37 flex-wrap: wrap;
38 }
39
40 .action-button span {
41 white-space: nowrap;
42 }
43
44 .video-miniature {
45 &.display-as-row {
46 // width: min-content !important;
47 width: 100% !important;
48
49 .video-bottom .video-miniature-information {
50 width: max-content !important;
51 min-width: unset !important;
52 }
53 }
54
55 .video-bottom {
56 max-width: 350px;
57 }
58 }
59}
60
61.action-button { 35.action-button {
62 display: flex; 36 display: flex;
63 margin-left: 55px; 37 margin-left: 10px;
64 margin-top: 10px;
65 align-self: flex-end; 38 align-self: flex-end;
66} 39}
67 40
@@ -69,7 +42,7 @@ my-edit-button {
69 margin-right: 10px; 42 margin-right: 10px;
70} 43}
71 44
72@media screen and (max-width: $small-view) { 45@include on-small-main-col {
73 h1 { 46 h1 {
74 flex-direction: column; 47 flex-direction: column;
75 48
@@ -80,39 +53,12 @@ my-edit-button {
80 } 53 }
81 54
82 .action-button { 55 .action-button {
83 flex-direction: column; 56 margin-top: 10px;
84 align-self: center; 57 margin-left: auto;
85 align-items: center;
86 margin-left: 0px;
87 }
88
89 my-edit-button {
90 margin: 15px 0 5px 0;
91 width: 100%;
92 text-align: center;
93
94 ::ng-deep {
95 .action-button {
96 /* same width than a.video-thumbnail */
97 width: $video-thumbnail-width;
98 }
99 }
100 }
101
102 ::ng-deep {
103 .video-miniature {
104 align-items: center;
105
106 .video-bottom,
107 .video-bottom .video-miniature-information {
108 /* same width than a.video-thumbnail */
109 max-width: $video-thumbnail-width !important;
110 }
111 }
112 } 58 }
113} 59}
114 60
115@media screen and (max-width: $mobile-view) { 61@include on-mobile-main-col {
116 .videos-header { 62 .videos-header {
117 flex-direction: column; 63 flex-direction: column;
118 64
@@ -120,4 +66,8 @@ my-edit-button {
120 width: 100% !important; 66 width: 100% !important;
121 } 67 }
122 } 68 }
69
70 .action-button {
71 margin-left: 0;
72 }
123} 73}
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;
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
index 3c7c679b8..e0e9f92e7 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html
@@ -1,4 +1,4 @@
1<div class="other-videos"> 1<div class="other-videos" [ngClass]="{ 'display-as-row': displayAsRow }">
2 <ng-container *ngIf="hasVideos$ | async"> 2 <ng-container *ngIf="hasVideos$ | async">
3 <div class="title-page-container"> 3 <div class="title-page-container">
4 <h2 i18n class="title-page title-page-single"> 4 <h2 i18n class="title-page title-page-single">
@@ -14,7 +14,7 @@
14 14
15 <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count"> 15 <ng-container *ngFor="let video of (videos$ | async); let i = index; let length = count">
16 <my-video-miniature 16 <my-video-miniature
17 [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" 17 [displayOptions]="displayOptions" [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow"
18 (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()"> 18 (videoBlocked)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()" (videoAccountMuted)="onVideoRemoved()">
19 </my-video-miniature> 19 </my-video-miniature>
20 20
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
index b278c9654..c9fae6f27 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss
@@ -1,3 +1,6 @@
1@import '_variables';
2@import '_mixins';
3
1.title-page-container { 4.title-page-container {
2 display: flex; 5 display: flex;
3 justify-content: space-between; 6 justify-content: space-between;
@@ -11,6 +14,10 @@
11 } 14 }
12} 15}
13 16
17.title-page {
18 margin-top: 0;
19}
20
14.title-page-autoplay { 21.title-page-autoplay {
15 display: flex; 22 display: flex;
16 width: max-content; 23 width: max-content;
@@ -29,3 +36,29 @@
29hr { 36hr {
30 margin-top: 0; 37 margin-top: 0;
31} 38}
39
40my-video-miniature {
41 display: block;
42}
43
44.other-videos:not(.display-as-row) my-video-miniature {
45 min-width: $video-thumbnail-medium-width;
46 max-width: $video-thumbnail-medium-width;
47}
48
49.display-as-row {
50 my-video-miniature {
51 margin-bottom: 20px;
52 }
53
54 hr {
55 display: none;
56 }
57
58 @media screen and (max-width: $mobile-view) {
59 my-video-miniature {
60 margin-bottom: 10px;
61 }
62 }
63}
64
diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
index a1c8e0661..89b9c01b6 100644
--- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
+++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts
@@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store'
16export class RecommendedVideosComponent implements OnInit, OnChanges { 16export class RecommendedVideosComponent implements OnInit, OnChanges {
17 @Input() inputRecommendation: RecommendationInfo 17 @Input() inputRecommendation: RecommendationInfo
18 @Input() playlist: VideoPlaylist 18 @Input() playlist: VideoPlaylist
19 @Input() displayAsRow: boolean
20
19 @Output() gotRecommendations = new EventEmitter<Video[]>() 21 @Output() gotRecommendations = new EventEmitter<Video[]>()
20 22
21 autoPlayNextVideo: boolean 23 autoPlayNextVideo: boolean
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 07f7ab7e3..5d417609a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -289,6 +289,7 @@
289 </div> 289 </div>
290 290
291 <my-recommended-videos 291 <my-recommended-videos
292 [displayAsRow]="displayOtherVideosAsRow()"
292 [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }" 293 [inputRecommendation]="{ uuid: video.uuid, tags: video.tags }"
293 [playlist]="playlist" 294 [playlist]="playlist"
294 (gotRecommendations)="onRecommendations($event)" 295 (gotRecommendations)="onRecommendations($event)"
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index a67605217..f22ffc0ea 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -407,37 +407,12 @@ $video-info-margin-left: 44px;
407 } 407 }
408 } 408 }
409 } 409 }
410}
410 411
411 ::ng-deep .other-videos { 412my-recommended-videos {
412 padding-left: 15px; 413 display: block;
413 min-width: $video-miniature-width; 414 padding-left: 15px;
414 415 min-width: 250px;
415 @media screen and (min-width: 1800px - (3* $video-miniature-width)) {
416 width: min-content;
417 }
418
419 .title-page {
420 margin: 0 !important;
421 }
422
423 .video-miniature {
424 display: flex;
425 width: max-content;
426 height: 100%;
427 padding-bottom: 20px;
428 flex-wrap: wrap;
429 }
430
431 .video-bottom {
432 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
433 margin-left: 1rem;
434 }
435 @media screen and (max-width: 500px) {
436 margin-left: 0;
437 margin-top: .5rem;
438 }
439 }
440 }
441} 416}
442 417
443my-video-comments { 418my-video-comments {
@@ -531,6 +506,7 @@ my-video-comments {
531 } 506 }
532} 507}
533 508
509// Use the same breakpoint than in the typescript component to display the other video miniatures as row
534@media screen and (max-width: 1100px) { 510@media screen and (max-width: 1100px) {
535 #video-wrapper { 511 #video-wrapper {
536 flex-direction: column; 512 flex-direction: column;
@@ -543,15 +519,10 @@ my-video-comments {
543 519
544 .video-bottom { 520 .video-bottom {
545 flex-direction: column; 521 flex-direction: column;
522 }
546 523
547 ::ng-deep .other-videos { 524 my-recommended-videos {
548 padding-left: 0 !important; 525 padding-left: 0;
549
550 ::ng-deep .video-miniature {
551 flex-direction: row;
552 width: auto;
553 }
554 }
555 } 526 }
556} 527}
557 528
@@ -573,10 +544,6 @@ my-video-comments {
573 } 544 }
574 } 545 }
575 546
576 ::ng-deep .other-videos .video-miniature {
577 flex-direction: column;
578 }
579
580 .privacy-concerns { 547 .privacy-concerns {
581 width: 100%; 548 width: 100%;
582 } 549 }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 075f70f56..9656f08e9 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -398,6 +398,11 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
398 this.loadVideo(videoId) 398 this.loadVideo(videoId)
399 } 399 }
400 400
401 displayOtherVideosAsRow () {
402 // Use the same value as in the SASS file
403 return this.screenService.getWindowInnerWidth() <= 1100
404 }
405
401 private loadVideo (videoId: string) { 406 private loadVideo (videoId: string) {
402 // Video did not change 407 // Video did not change
403 if (this.video && this.video.uuid === videoId) return 408 if (this.video && this.video.uuid === videoId) return
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index ca986c634..639a96c43 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -14,7 +14,7 @@
14 </h1> 14 </h1>
15 15
16 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> 16 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
17 <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> 17 <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
18 </my-video-miniature> 18 </my-video-miniature>
19 </div> 19 </div>
20 </div> 20 </div>
@@ -25,7 +25,7 @@
25 </h2> 25 </h2>
26 26
27 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> 27 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
28 <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> 28 <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
29 </my-video-miniature> 29 </my-video-miniature>
30 </div> 30 </div>
31 </div> 31 </div>
@@ -40,7 +40,7 @@
40 </div> 40 </div>
41 41
42 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)"> 42 <div class="video-wrapper" *ngFor="let video of buildVideos(object.videos)">
43 <my-video-miniature [video]="video" [fitWidth]="true" [user]="userMiniature" [displayVideoActions]="true"> 43 <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true">
44 </my-video-miniature> 44 </my-video-miniature>
45 </div> 45 </div>
46 </div> 46 </div>
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss
index c1d10188a..ec73c628c 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.scss
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss
@@ -8,9 +8,84 @@
8} 8}
9 9
10.margin-content { 10.margin-content {
11 @include fluid-videos-miniature-layout; 11 @include grid-videos-miniature-layout;
12} 12}
13 13
14.section { 14.section {
15 @include miniature-rows; 15 &:first-child {
16 padding-top: 30px;
17
18 .section-title {
19 border-top: none !important;
20 }
21 }
22
23 .section-title {
24 font-size: 24px;
25 font-weight: $font-semibold;
26 padding-top: 15px;
27 margin-bottom: 15px;
28 display: flex;
29 justify-content: space-between;
30
31 &:not(h2) {
32 border-top: 1px solid $separator-border-color;
33 }
34
35 a {
36 &:hover, &:focus:not(.focus-visible), &:active {
37 text-decoration: none;
38 outline: none;
39 }
40
41 color: pvar(--mainForegroundColor);
42 }
43 }
44
45 &.channel {
46 .section-title {
47 a {
48 display: flex;
49 width: fit-content;
50 align-items: center;
51
52 img {
53 @include channel-avatar(28px);
54
55 margin-right: 8px;
56 }
57 }
58
59 .followers {
60 color: pvar(--greyForegroundColor);
61 font-weight: normal;
62 font-size: 14px;
63 margin-left: 10px;
64 position: relative;
65 top: 2px;
66 }
67 }
68 }
69
70 .show-more {
71 position: relative;
72 top: -5px;
73 display: inline-block;
74 font-size: 16px;
75 text-transform: uppercase;
76 color: pvar(--greyForegroundColor);
77 margin-bottom: 10px;
78 font-weight: $font-semibold;
79 text-decoration: none;
80 }
81
82 @media screen and (max-width: $mobile-view) {
83 max-height: initial;
84 overflow: initial;
85
86 .section-title {
87 font-size: 17px;
88 margin-left: 10px;
89 }
90 }
16} 91}
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index a085e5bdc..c133b5fe9 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -38,11 +38,10 @@ export class ScreenService {
38 38
39 let numberOfVideos = 1 39 let numberOfVideos = 1
40 40
41 if (screenWidth > 1850) numberOfVideos = 7 41 if (screenWidth > 1850) numberOfVideos = 5
42 else if (screenWidth > 1600) numberOfVideos = 6 42 else if (screenWidth > 1600) numberOfVideos = 4
43 else if (screenWidth > 1370) numberOfVideos = 5 43 else if (screenWidth > 1370) numberOfVideos = 3
44 else if (screenWidth > 1100) numberOfVideos = 4 44 else if (screenWidth > 1100) numberOfVideos = 2
45 else if (screenWidth > 850) numberOfVideos = 3
46 45
47 return numberOfVideos 46 return numberOfVideos
48 } 47 }
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 41d5906cf..81c773b5a 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -52,7 +52,7 @@
52 52
53 <div class="video-wrapper"> 53 <div class="video-wrapper">
54 <my-video-miniature 54 <my-video-miniature
55 [fitWidth]="true" [video]="video" [user]="userMiniature" 55 [video]="video" [user]="userMiniature"
56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
58 > 58 >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 0a8aa8fa4..26c412402 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -69,7 +69,7 @@ $iconSize: 16px;
69} 69}
70 70
71.margin-content { 71.margin-content {
72 @include fluid-videos-miniature-layout; 72 @include grid-videos-miniature-layout;
73} 73}
74 74
75@media screen and (max-width: $mobile-view) { 75@media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index a07930321..efa443b45 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()"> 1<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
2 <my-video-thumbnail 2 <my-video-thumbnail
3 [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget" 3 [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" 4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a9628c696..39d6e97c9 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -3,204 +3,206 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5$more-button-width: 40px; 5$more-button-width: 40px;
6$more-margin-right: 15px;
7 6
8.video-miniature { 7.video-miniature-name {
9 display: inline-flex; 8 @include miniature-name;
10 flex-direction: column; 9}
11 padding-bottom: $video-miniature-margin-bottom;
12 vertical-align: top;
13 10
14 .video-bottom { 11.video-miniature-information {
15 display: flex; 12 width: calc(100% - #{$more-button-width});
13}
16 14
17 .video-miniature-information { 15.avatar {
18 width: $video-miniature-width - $more-button-width - $more-margin-right; 16 margin: 10px 10px 0 0;
19 line-height: normal;
20 17
21 .avatar { 18 img:not(.channel) {
22 margin: 10px 10px 0 0; 19 @include avatar(40px);
20 }
23 21
24 img:not(.channel) { 22 img.channel {
25 @include avatar(40px); 23 @include channel-avatar(40px);
26 } 24 }
25}
27 26
28 img.channel { 27.video-miniature-created-at-views {
29 @include channel-avatar(40px); 28 font-size: 13px;
30 } 29}
31 }
32 30
33 .video-miniature-name { 31.video-miniature-account,
34 @include miniature-name; 32.video-miniature-channel {
33 @include disable-default-a-behaviour;
34 @include ellipsis;
35 35
36 word-wrap: break-word; 36 display: block;
37 width: calc(100% - #{$more-button-width}); 37 font-size: 13px;
38 } 38 color: pvar(--greyForegroundColor);
39 39
40 .video-miniature-meta { 40 &:hover {
41 width: calc(100% + #{$more-button-width}); 41 color: $grey-foreground-hover-color;
42 overflow: hidden; 42 }
43 } 43}
44 44
45 .video-miniature-created-at-views { 45.video-info-privacy,
46 display: block; 46.video-info-blocked .blocked-label,
47 font-size: 13px; 47.video-info-nsfw {
48 } 48 font-weight: $font-semibold;
49}
49 50
50 .video-miniature-account, 51.video-info-blocked {
51 .video-miniature-channel { 52 color: red;
52 @include disable-default-a-behaviour;
53 @include ellipsis;
54 53
55 display: block; 54 .blocked-reason::before {
56 font-size: 13px; 55 content: ' - ';
57 color: pvar(--greyForegroundColor); 56 }
57}
58 58
59 &:hover { 59.video-info-nsfw {
60 color: $grey-foreground-hover-color; 60 color: red;
61 } 61}
62 }
63 62
64 .video-info-privacy, 63.video-actions {
65 .video-info-blocked .blocked-label, 64 width: $more-button-width;
66 .video-info-nsfw { 65 height: 30px;
67 font-weight: $font-semibold;
68 }
69 66
70 .video-info-blocked { 67 ::ng-deep .dropdown-root:not(.show) {
71 color: red; 68 opacity: 0;
69 }
72 70
73 .blocked-reason::before { 71 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
74 content: ' - '; 72 opacity: 1;
75 } 73 }
76 }
77 74
78 .video-info-nsfw { 75 ::ng-deep .more-icon {
79 color: red; 76 opacity: .6;
80 }
81 }
82 77
83 .video-actions { 78 &:hover {
84 margin-top: 3px; 79 opacity: 1;
85 width: $more-button-width; 80 }
86 height: 30px; 81 }
82}
87 83
88 ::ng-deep .dropdown-root:not(.show) { 84.video-miniature {
89 opacity: 0; 85 &:hover ::ng-deep .video-thumbnail-actions-overlay,
90 } 86 &:hover .video-actions ::ng-deep .dropdown-root {
87 opacity: 1 !important;
88 }
89}
91 90
92 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { 91// Grid mode
93 opacity: 1; 92// Takes all the width on mobile
94 } 93.video-miniature:not(.display-as-row) {
94 display: flex;
95 flex-direction: column;
96 padding-bottom: $video-miniature-margin-bottom;
97 width: 100%;
95 98
96 ::ng-deep .more-icon { 99 my-video-thumbnail {
97 opacity: .6; 100 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
101 }
98 102
99 &:hover { 103 .video-bottom {
100 opacity: 1; 104 display: flex;
101 } 105 width: 100%;
102 } 106 }
103 }
104 107
105 @media screen and (max-width: $small-view) {
106 .video-miniature-information {
107 margin: 0 10px;
108 }
109 108
110 .video-actions { 109 .video-miniature-name {
111 margin: 0; 110 margin-top: 10px;
112 top: -3px; 111 margin-bottom: 5px;
112 }
113 113
114 ::ng-deep .dropdown-root { 114 .video-miniature-created-at-views {
115 opacity: 1 !important; 115 display: block;
116 }
117 }
118 }
119 } 116 }
120 117
121 &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, 118 .video-actions {
122 &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { 119 margin-top: 3px;
123 opacity: 1;
124 } 120 }
125 121
126 &.fit-width { 122 @media screen and (max-width: $small-view) {
127 width: 100%; 123 width: 100%;
124 margin-bottom: 25px;
125
126 .video-miniature-information {
127 margin: 0 10px;
128
129 width: 100%;
130 text-align: left;
131 }
128 132
129 .video-bottom { 133 .video-actions {
130 width: 100% !important; 134 margin: 0;
135 top: -3px;
131 136
132 .video-miniature-information { 137 ::ng-deep .dropdown-root {
133 width: calc(100% - #{$more-button-width}) !important; 138 opacity: 1 !important;
134 } 139 }
135 } 140 }
136 141
137 my-video-thumbnail { 142 ::ng-deep .video-thumbnail {
138 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); 143 border-radius: 0;
139 } 144 }
140 } 145 }
146}
147
148.video-miniature.display-as-row {
149 --rowThumbnailWidth: #{$video-thumbnail-width};
150 --rowThumbnailHeight: #{$video-thumbnail-height};
151
152 display: flex;
153 flex-direction: row;
141 154
142 &.display-as-row { 155 .video-bottom {
143 flex-direction: row;
144 padding-bottom: 0;
145 height: auto;
146 display: flex; 156 display: flex;
147 flex-grow: 1; 157 }
148 158
149 my-video-thumbnail { 159 // We don't display avatar in row mode
150 margin-right: 10px; 160 .avatar {
151 } 161 display: none;
162 }
152 163
153 .video-bottom { 164 my-video-thumbnail {
154 .video-miniature-information { 165 min-width: var(--rowThumbnailWidth);
155 @media screen and (min-width: $small-view) { 166 max-width: var(--rowThumbnailWidth);
156 width: auto; 167 height: var(--rowThumbnailHeight);
157 min-width: 500px; 168 margin-right: 10px;
158 } 169 }
159
160 .video-miniature-name {
161 @include ellipsis-multiline(1.3em, 2);
162
163 margin-top: 2px;
164 margin-bottom: 5px;
165 }
166
167 .video-miniature-created-at-views,
168 .video-miniature-account,
169 .video-miniature-channel {
170 font-size: 95%;
171 width: fit-content;
172 }
173
174 .video-miniature-created-at-views + .video-miniature-channel {
175 margin-top: 5px;
176 }
177
178 .video-info-privacy {
179 margin-top: 5px;
180 }
181
182 .video-info-blocked {
183 margin-top: 3px;
184 }
185 }
186 170
187 .video-actions { 171 .video-miniature-name {
188 margin: 0; 172 @include ellipsis-multiline(1.3em, 2);
189 top: -3px; 173 }
190 } 174
191 } 175 .video-miniature-created-at-views,
176 .video-miniature-account,
177 .video-miniature-channel {
178 font-size: 14px;
179 }
192 180
193 @media screen and (max-width: $small-view) { 181 .video-actions {
194 flex-direction: column; 182 margin-top: -3px;
195 height: auto; 183 }
184}
196 185
197 my-video-thumbnail { 186@include on-small-main-col {
198 margin-right: 0; 187 .video-miniature.display-as-row {
199 } 188 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
189 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
190 }
191}
200 192
201 .video-miniature-information { 193@include on-mobile-main-col {
202 min-width: initial; 194 .video-miniature.display-as-row {
203 } 195 --rowThumbnailWidth: #{$video-thumbnail-small-width};
196 --rowThumbnailHeight: #{$video-thumbnail-small-height};
197
198 .video-miniature-name {
199 font-size: 14px;
200 }
201
202 .video-miniature-created-at-views,
203 .video-miniature-account,
204 .video-miniature-channel {
205 font-size: 12px;
204 } 206 }
205 } 207 }
206} 208}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 987a65e40..48da92d6b 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,6 @@ import { Video } from '../shared-main'
16import { VideoPlaylistService } from '../shared-video-playlist' 16import { VideoPlaylistService } from '../shared-video-playlist'
17import { VideoActionsDisplayType } from './video-actions-dropdown.component' 17import { VideoActionsDisplayType } from './video-actions-dropdown.component'
18 18
19export type OwnerDisplayType = 'account' | 'videoChannel'
20export type MiniatureDisplayOptions = { 19export type MiniatureDisplayOptions = {
21 date?: boolean 20 date?: boolean
22 views?: boolean 21 views?: boolean
@@ -50,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
50 state: false, 49 state: false,
51 blacklistInfo: false 50 blacklistInfo: false
52 } 51 }
53 @Input() displayAsRow = false
54 @Input() displayVideoActions = true 52 @Input() displayVideoActions = true
55 @Input() fitWidth = false 53
54 @Input() displayAsRow = false
56 55
57 @Input() videoLinkType: VideoLinkType = 'internal' 56 @Input() videoLinkType: VideoLinkType = 'internal'
58 57
@@ -243,6 +242,12 @@ export class VideoMiniatureComponent implements OnInit {
243 return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined 242 return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
244 } 243 }
245 244
245 getClasses () {
246 return {
247 'display-as-row': this.displayAsRow
248 }
249 }
250
246 private setUpBy () { 251 private setUpBy () {
247 const accountName = this.video.account.name 252 const accountName = this.video.account.name
248 253
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
5 display: flex; 5 display: flex;
6 justify-content: flex-end; 6 justify-content: flex-end;
7 flex-grow: 1; 7 flex-grow: 1;
8}
8 9
9 .action-selection-mode-child { 10.action-selection-mode-child {
10 position: fixed; 11 position: fixed;
11
12 .action-button {
13 display: block;
14 margin-left: 55px;
15 }
16 12
17 .action-button-cancel-selection { 13 .action-button {
18 @include peertube-button; 14 display: block;
19 @include grey-button; 15 margin-left: 55px;
20 }
21 } 16 }
22} 17}
23 18
19.action-button-cancel-selection {
20 @include peertube-button;
21 @include grey-button;
22}
23
24.video { 24.video {
25 @include row-blocks; 25 @include row-blocks($column-responsive: false);
26 26
27 &:first-child { 27 &:first-child {
28 margin-top: 47px; 28 margin-top: 47px;
@@ -40,18 +40,16 @@
40 } 40 }
41} 41}
42 42
43@media screen and (max-width: $small-view) {
44 .video {
45 flex-direction: column;
46 height: auto;
47 43
48 .checkbox-container { 44@include on-small-main-col {
49 display: none; 45 .video {
50 } 46 flex-wrap: wrap;
47 }
48}
51 49
52 my-button { 50@include on-mobile-main-col {
53 margin-top: 10px; 51 .checkbox-container {
54 } 52 display: none;
55 } 53 }
56 54
57 .action-selection-mode { 55 .action-selection-mode {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
index 86f6664cb..f50f95003 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage }"> 1<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
2 <a 2 <a
3 [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description" 3 [routerLink]="getPlaylistUrl()" [attr.title]="playlist.description"
4 class="miniature-thumbnail" 4 class="miniature-thumbnail"
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
index 1b16dbb01..c5be5f292 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss
@@ -4,6 +4,7 @@
4 4
5.miniature { 5.miniature {
6 display: inline-block; 6 display: inline-block;
7 width: 100%;
7 8
8 &.no-videos:not(.to-manage){ 9 &.no-videos:not(.to-manage){
9 a { 10 a {
@@ -17,62 +18,92 @@
17 display: none; 18 display: none;
18 } 19 }
19 } 20 }
21}
20 22
21 .miniature-thumbnail { 23.miniature-thumbnail {
22 @include miniature-thumbnail; 24 @include miniature-thumbnail;
23 25
24 .miniature-playlist-info-overlay { 26 .miniature-playlist-info-overlay {
25 @include static-thumbnail-overlay; 27 @include static-thumbnail-overlay;
26 28
27 position: absolute; 29 position: absolute;
28 right: 0; 30 right: 0;
29 bottom: 0; 31 bottom: 0;
30 height: $video-thumbnail-height; 32 height: 100%;
31 padding: 0 10px; 33 padding: 0 10px;
32 display: flex; 34 display: flex;
33 align-items: center; 35 align-items: center;
34 font-size: 14px; 36 font-size: 14px;
35 font-weight: $font-semibold; 37 font-weight: $font-semibold;
36 }
37 } 38 }
39}
38 40
39 .miniature-info { 41.miniature-info {
40 width: 200px;
41 margin-top: 2px;
42 line-height: normal;
43
44 .miniature-name {
45 @include miniature-name;
46 42
47 @include ellipsis-multiline(1.3em, 2); 43 .miniature-name {
44 @include miniature-name;
45 @include ellipsis-multiline(1.3em, 2);
48 46
49 margin: 0; 47 margin: 0;
50 } 48 }
51 49
52 .by { 50 .by {
53 @include disable-default-a-behaviour; 51 @include disable-default-a-behaviour;
54 52
55 display: block; 53 display: block;
56 color: pvar(--greyForegroundColor); 54 color: pvar(--greyForegroundColor);
57 } 55 }
58 56
59 .privacy-date { 57 .privacy-date {
60 margin-top: 5px; 58 margin-top: 5px;
61 59
62 .video-info-privacy { 60 .video-info-privacy {
63 font-size: 14px; 61 font-size: 14px;
64 font-weight: $font-semibold; 62 font-weight: $font-semibold;
65 63
66 &::after { 64 &::after {
67 content: '-'; 65 content: '-';
68 margin: 0 3px; 66 margin: 0 3px;
69 }
70 } 67 }
71 } 68 }
69 }
72 70
73 .video-info-description { 71 .video-info-description {
74 margin-top: 10px; 72 margin-top: 10px;
75 color: pvar(--greyForegroundColor); 73 color: pvar(--greyForegroundColor);
76 } 74 }
75}
76
77.miniature:not(.display-as-row) {
78 .miniature-thumbnail {
79 margin-top: 10px;
80 margin-bottom: 5px;
81 }
82}
83
84.miniature.display-as-row {
85 --rowThumbnailWidth: #{$video-thumbnail-width};
86 --rowThumbnailHeight: #{$video-thumbnail-height};
87
88 display: flex;
89
90 .miniature-thumbnail {
91 width: var(--rowThumbnailWidth);
92 height: var(--rowThumbnailHeight);
93 margin-right: 10px;
94 }
95}
96
97@include on-small-main-col {
98 .miniature.display-as-row {
99 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
100 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
101 }
102}
103
104@include on-mobile-main-col {
105 .miniature.display-as-row {
106 --rowThumbnailWidth: #{$video-thumbnail-small-width};
107 --rowThumbnailHeight: #{$video-thumbnail-small-height};
77 } 108 }
78} 109}
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
index 251aa868a..6b0b1056f 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts
@@ -12,6 +12,7 @@ export class VideoPlaylistMiniatureComponent {
12 @Input() displayChannel = false 12 @Input() displayChannel = false
13 @Input() displayDescription = false 13 @Input() displayDescription = false
14 @Input() displayPrivacy = false 14 @Input() displayPrivacy = false
15 @Input() displayAsRow = false
15 16
16 getPlaylistUrl () { 17 getPlaylistUrl () {
17 if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ] 18 if (this.toManage) return [ '/my-library/video-playlists', this.playlist.uuid ]
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c35574568..4964ec85e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -58,6 +58,7 @@ body {
58 --activatedActionButtonColor: #{$activated-action-button-color}; 58 --activatedActionButtonColor: #{$activated-action-button-color};
59 59
60 --horizontalMarginContent: #{$not-expanded-horizontal-margins}; 60 --horizontalMarginContent: #{$not-expanded-horizontal-margins};
61 --videosHorizontalMarginContent: 6vw;
61 --mainColWidth: calc(100vw - #{$menu-width}); 62 --mainColWidth: calc(100vw - #{$menu-width});
62 63
63 font-family: $main-fonts; 64 font-family: $main-fonts;
@@ -332,8 +333,16 @@ ngx-loading-bar {
332} 333}
333 334
334@media screen and (max-width: #{breakpoint(xxl)}) { 335@media screen and (max-width: #{breakpoint(xxl)}) {
335 .main-col.expanded { 336 .main-col {
336 --horizontalMarginContent: #{$expanded-horizontal-margins/2}; 337 & {
338 --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
339 }
340
341 &.expanded {
342 --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
343 }
344
345 --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
337 } 346 }
338} 347}
339 348
@@ -341,7 +350,7 @@ ngx-loading-bar {
341 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ 350 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
342 .main-col, 351 .main-col,
343 .main-col.expanded { 352 .main-col.expanded {
344 --horizontalMarginContent: #{$expanded-horizontal-margins/3}; 353 --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
345 354
346 .sub-menu { 355 .sub-menu {
347 padding-left: 50px; 356 padding-left: 50px;
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 7643a6816..9e1fc63e3 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -5,11 +5,10 @@
5 @include ellipsis-multiline(1.1em, 2); 5 @include ellipsis-multiline(1.1em, 2);
6 6
7 word-break: break-all; 7 word-break: break-all;
8 word-wrap: break-word;
8 transition: color 0.2s; 9 transition: color 0.2s;
9 font-weight: $font-semibold; 10 font-weight: $font-semibold;
10 color: pvar(--mainForegroundColor); 11 color: pvar(--mainForegroundColor);
11 margin-top: 10px;
12 margin-bottom: 5px;
13 12
14 &:hover { 13 &:hover {
15 text-decoration: none; 14 text-decoration: none;
@@ -21,20 +20,20 @@
21 } 20 }
22} 21}
23 22
24$play-overlay-transition: 0.2s ease;
25$play-overlay-height: 26px;
26$play-overlay-width: 18px;
27
28@mixin miniature-thumbnail { 23@mixin miniature-thumbnail {
29 @include disable-outline; 24 @include disable-outline;
30 25
26 $play-overlay-transition: 0.2s ease;
27 $play-overlay-height: 26px;
28 $play-overlay-width: 18px;
29
31 display: flex; 30 display: flex;
32 flex-direction: column; 31 flex-direction: column;
33 position: relative; 32 position: relative;
34 border-radius: 3px; 33 border-radius: 3px;
34 width: 100%;
35 height: 100%;
35 overflow: hidden; 36 overflow: hidden;
36 width: $video-thumbnail-width;
37 height: $video-thumbnail-height;
38 background-color: #ececec; 37 background-color: #ececec;
39 transition: filter $play-overlay-transition; 38 transition: filter $play-overlay-transition;
40 39
@@ -98,140 +97,36 @@ $play-overlay-width: 18px;
98 color: #fff; 97 color: #fff;
99} 98}
100 99
101@mixin miniature-rows {
102 &:first-child {
103 padding-top: 30px;
104
105 .section-title {
106 border-top: none !important;
107 }
108 }
109
110 .section-title {
111 font-size: 24px;
112 font-weight: $font-semibold;
113 padding-top: 15px;
114 margin-bottom: 15px;
115 display: flex;
116 justify-content: space-between;
117
118 &:not(h2) {
119 border-top: 1px solid $separator-border-color;
120 }
121
122 a {
123 &:hover, &:focus:not(.focus-visible), &:active {
124 text-decoration: none;
125 outline: none;
126 }
127
128 color: pvar(--mainForegroundColor);
129 }
130 }
131
132 &.channel {
133 .section-title {
134 a {
135 display: flex;
136 width: fit-content;
137 align-items: center;
138
139 img {
140 @include channel-avatar(28px);
141
142 margin-right: 8px;
143 }
144 }
145
146 .followers {
147 color: pvar(--greyForegroundColor);
148 font-weight: normal;
149 font-size: 14px;
150 margin-left: 10px;
151 position: relative;
152 top: 2px;
153 }
154 }
155 }
156
157 .show-more {
158 position: relative;
159 top: -5px;
160 display: inline-block;
161 font-size: 16px;
162 text-transform: uppercase;
163 color: pvar(--greyForegroundColor);
164 margin-bottom: 10px;
165 font-weight: $font-semibold;
166 text-decoration: none;
167 }
168
169 @media screen and (max-width: $mobile-view) {
170 max-height: initial;
171 overflow: initial;
172
173 .section-title {
174 font-size: 17px;
175 margin-left: 10px;
176 }
177 }
178}
179
180// Use margin by default, or padding if $margin is false 100// Use margin by default, or padding if $margin is false
181@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { 101@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
182 --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)}; 102 --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
183 103
184 @if $margin { 104 @if $margin {
185 margin-left: var(--fluidVideosMiniatureMargins) !important; 105 margin-left: var(--gridVideosMiniatureMargins) !important;
186 margin-right: var(--fluidVideosMiniatureMargins) !important; 106 margin-right: var(--gridVideosMiniatureMargins) !important;
187 } @else { 107 } @else {
188 padding-left: var(--fluidVideosMiniatureMargins) !important; 108 padding-left: var(--gridVideosMiniatureMargins) !important;
189 padding-right: var(--fluidVideosMiniatureMargins) !important; 109 padding-right: var(--gridVideosMiniatureMargins) !important;
190 } 110 }
191 111
192 @media screen and (max-width: $mobile-view) { 112 @media screen and (max-width: $mobile-view) {
193 --fluidVideosMiniatureMargins: $min-margin; 113 --gridVideosMiniatureMargins: #{$min-margin};
194 114
195 width: auto; 115 width: auto;
196 } 116 }
197} 117}
198 118
199@mixin fluid-videos-miniature-layout { 119@mixin grid-videos-miniature-layout {
200 @include fluid-videos-miniature-margins; 120 @include grid-videos-miniature-margins;
201
202 @media screen and (max-width: $mobile-view) {
203 .videos {
204 text-align: center;
205
206 ::ng-deep .video-miniature {
207 padding-right: 0;
208 height: auto;
209 width: 100%;
210 margin-bottom: 25px;
211
212 .video-miniature-information {
213 width: 100% !important;
214 text-align: left;
215
216 span {
217 width: 100%;
218 }
219 }
220
221 .video-thumbnail {
222 border-radius: 0;
223 }
224 }
225 }
226 }
227 121
228 @media screen and (min-width: $mobile-view) { 122 @media screen and (min-width: $mobile-view) {
229 .videos { 123 .videos,
230 --miniatureMinWidth: #{$video-thumbnail-width - 15px}; 124 .playlists {
125 --miniatureMinWidth: #{$video-thumbnail-width - 25px};
231 --miniatureMaxWidth: #{$video-thumbnail-width}; 126 --miniatureMaxWidth: #{$video-thumbnail-width};
232 127
233 display: grid; 128 display: grid;
234 column-gap: 5px; 129 column-gap: 30px;
235 grid-template-columns: repeat( 130 grid-template-columns: repeat(
236 auto-fill, 131 auto-fill,
237 minmax( 132 minmax(
@@ -240,21 +135,33 @@ $play-overlay-width: 18px;
240 ) 135 )
241 ); 136 );
242 137
243 @media screen and (min-width: #{breakpoint(fhd)}) { 138 .video-wrapper,
244 column-gap: 1%; 139 .playlist-wrapper {
245 --miniatureMinWidth: #{$video-thumbnail-width};
246 }
247
248 .video-wrapper {
249 margin: 0 auto; 140 margin: 0 auto;
250 width: 100%; 141 width: 100%;
251 142
252 my-video-miniature { 143 my-video-miniature,
144 my-video-playlist-miniature {
253 display: block; 145 display: block;
254 min-width: var(--miniatureMinWidth); 146 min-width: var(--miniatureMinWidth);
255 max-width: var(--miniatureMaxWidth); 147 max-width: var(--miniatureMaxWidth);
256 } 148 }
257 } 149 }
150
151 @media screen and (min-width: #{breakpoint(xm)}) {
152 column-gap: 15px;
153 }
154
155 @media screen and (min-width: #{breakpoint(fhd)}) {
156 column-gap: 2%;
157 }
158 }
159 }
160
161 @media screen and (max-width: $mobile-view) {
162 .videos,
163 .playlists {
164 text-align: center;
258 } 165 }
259 } 166 }
260} 167}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index eac2f1a7f..e37b89c62 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -620,17 +620,23 @@
620 @include button-with-icon(20px, 5px, -1px); 620 @include button-with-icon(20px, 5px, -1px);
621} 621}
622 622
623@mixin row-blocks { 623@mixin row-blocks ($column-responsive: true) {
624 display: flex; 624 display: flex;
625 min-height: 130px; 625 min-height: 130px;
626 padding-bottom: 20px; 626 padding-bottom: 20px;
627 margin-bottom: 20px; 627 margin-bottom: 20px;
628 border-bottom: 1px solid #C6C6C6; 628 border-bottom: 1px solid #C6C6C6;
629 629
630 @media screen and (max-width: 800px) { 630 @media screen and (max-width: $small-view) {
631 flex-direction: column; 631 @if $column-responsive {
632 height: auto; 632 flex-direction: column;
633 align-items: center; 633 height: auto;
634 align-items: center;
635 } @else {
636 min-height: initial;
637 padding-bottom: 10px;
638 margin-bottom: 10px;
639 }
634 } 640 }
635} 641}
636 642
@@ -932,3 +938,31 @@
932 938
933 border-left: $width solid rgba(255, 255, 255, 0.95); 939 border-left: $width solid rgba(255, 255, 255, 0.95);
934} 940}
941
942@mixin on-small-main-col () {
943 :host-context(.main-col:not(.expanded)) {
944 @media screen and (max-width: $small-view + $menu-width) {
945 @content;
946 }
947 }
948
949 :host-context(.main-col.expanded) {
950 @media screen and (max-width: $small-view) {
951 @content;
952 }
953 }
954}
955
956@mixin on-mobile-main-col () {
957 :host-context(.main-col:not(.expanded)) {
958 @media screen and (max-width: $mobile-view + $menu-width) {
959 @content;
960 }
961 }
962
963 :host-context(.main-col.expanded) {
964 @media screen and (max-width: $mobile-view) {
965 @content;
966 }
967 }
968}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 8c5e75864..4c9a79621 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -34,7 +34,7 @@ $green: #39CC0B;
34$grey-actor-name: #777272; 34$grey-actor-name: #777272;
35 35
36$expanded-horizontal-margins: 150px; 36$expanded-horizontal-margins: 150px;
37$not-expanded-horizontal-margins: 60px; 37$not-expanded-horizontal-margins: 30px;
38 38
39$button-height: 30px; 39$button-height: 30px;
40 40
@@ -59,10 +59,13 @@ $footer-margin: 30px;
59 59
60$separator-border-color: rgba(0, 0, 0, 0.10); 60$separator-border-color: rgba(0, 0, 0, 0.10);
61 61
62$video-miniature-width: 238px;
63$video-miniature-margin-bottom: 15px; 62$video-miniature-margin-bottom: 15px;
64$video-thumbnail-height: 122px; 63$video-thumbnail-height: 153px;
65$video-thumbnail-width: 223px; 64$video-thumbnail-width: 280px;
65$video-thumbnail-medium-height: 114px;
66$video-thumbnail-medium-width: 201px;
67$video-thumbnail-small-height: 71px;
68$video-thumbnail-small-width: 125px;
66 69
67$theater-bottom-space: 115px; 70$theater-bottom-space: 115px;
68 71
@@ -125,6 +128,7 @@ $variables: (
125 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor), 128 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
126 129
127 --horizontalMarginContent: var(--horizontalMarginContent), 130 --horizontalMarginContent: var(--horizontalMarginContent),
131 --videosHorizontalMarginContent: var(--videosHorizontalMarginContent),
128 --mainColWidth: var(--mainColWidth) 132 --mainColWidth: var(--mainColWidth)
129); 133);
130 134
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-30 04:24:59 +0000