aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
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 /client/src/sass
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 (limited to 'client/src/sass')
-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
4 files changed, 98 insertions, 144 deletions
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