aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-31 11:21:10 +0200
committerChocobozzz <me@florianbigard.com>2021-03-31 11:21:10 +0200
commitd794137057fc5fcea10ddd29f82e79ee2412fea4 (patch)
treeda37f7efd604687c243cb2cd2cad6af932dcab8a /client
parent218f730c7bceda5511d46f26191e7b1726c9ffd3 (diff)
downloadPeerTube-d794137057fc5fcea10ddd29f82e79ee2412fea4.tar.gz
PeerTube-d794137057fc5fcea10ddd29f82e79ee2412fea4.tar.zst
PeerTube-d794137057fc5fcea10ddd29f82e79ee2412fea4.zip
Refactor horizontal margins
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss4
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.scss15
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss2
-rw-r--r--client/src/sass/application.scss161
-rw-r--r--client/src/sass/include/_miniature.scss28
-rw-r--r--client/src/sass/include/_mixins.scss4
-rw-r--r--client/src/sass/include/_variables.scss14
-rw-r--r--client/src/sass/player/context-menu.scss2
-rw-r--r--client/src/sass/primeng-custom.scss43
9 files changed, 97 insertions, 176 deletions
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 90434fcf1..87a836a46 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
@@ -4,7 +4,7 @@
4 4
5.playlist-info { 5.playlist-info {
6 background-color: pvar(--submenuBackgroundColor); 6 background-color: pvar(--submenuBackgroundColor);
7 margin-left: -$not-expanded-horizontal-margins; 7 margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
8 margin-top: -$sub-menu-margin-bottom; 8 margin-top: -$sub-menu-margin-bottom;
9 9
10 padding: 10px; 10 padding: 10px;
@@ -63,7 +63,7 @@
63 .playlist-info { 63 .playlist-info {
64 width: 100vw; 64 width: 100vw;
65 padding-top: 20px; 65 padding-top: 20px;
66 margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1); 66 margin-bottom: 10px;
67 } 67 }
68 68
69 .playlist-elements { 69 .playlist-elements {
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 59fc5fe80..57473896b 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
@@ -112,21 +112,6 @@ my-edit-button {
112 } 112 }
113} 113}
114 114
115// Adapt my-video-miniature on small screens with menu
116@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) {
117 :host-context(.main-col:not(.expanded)) {
118 ::ng-deep {
119 .video-miniature {
120 flex-direction: column;
121
122 .video-miniature-name {
123 max-width: $video-thumbnail-width;
124 }
125 }
126 }
127 }
128}
129
130@media screen and (max-width: $mobile-view) { 115@media screen and (max-width: $mobile-view) {
131 .videos-header { 116 .videos-header {
132 flex-direction: column; 117 flex-direction: column;
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index fcddfea03..8203c7d1c 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -131,7 +131,7 @@ $input-border-radius: 3px;
131 border-right: none; 131 border-right: none;
132 132
133 :last-child { 133 :last-child {
134 margin-right: $not-expanded-horizontal-margins; 134 margin-right: pvar(--horizontalMarginContent);
135 } 135 }
136 } 136 }
137 137
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 0cc394c8e..c35574568 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -57,7 +57,8 @@ body {
57 57
58 --activatedActionButtonColor: #{$activated-action-button-color}; 58 --activatedActionButtonColor: #{$activated-action-button-color};
59 59
60 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins}; 60 --horizontalMarginContent: #{$not-expanded-horizontal-margins};
61 --mainColWidth: calc(100vw - #{$menu-width});
61 62
62 font-family: $main-fonts; 63 font-family: $main-fonts;
63 font-weight: $font-regular; 64 font-weight: $font-regular;
@@ -150,8 +151,8 @@ my-input-toggle-hidden ::ng-deep input {
150 outline: none; 151 outline: none;
151 152
152 .margin-content { 153 .margin-content {
153 margin-left: $not-expanded-horizontal-margins; 154 margin-left: pvar(--horizontalMarginContent);
154 margin-right: $not-expanded-horizontal-margins; 155 margin-right: pvar(--horizontalMarginContent);
155 flex-grow: 1; 156 flex-grow: 1;
156 } 157 }
157 158
@@ -160,14 +161,16 @@ my-input-toggle-hidden ::ng-deep input {
160 width: 100%; 161 width: 100%;
161 display: flex; 162 display: flex;
162 align-items: center; 163 align-items: center;
163 padding-left: $not-expanded-horizontal-margins; 164 padding-left: pvar(--horizontalMarginContent);
164 padding-right: $not-expanded-horizontal-margins; 165 padding-right: pvar(--horizontalMarginContent);
165 height: $sub-menu-height; 166 height: $sub-menu-height;
166 margin-bottom: $sub-menu-margin-bottom; 167 margin-bottom: $sub-menu-margin-bottom;
168 overflow-x: auto;
167 169
168 &.sub-menu-fixed { 170 &.sub-menu-fixed {
169 position: fixed; 171 position: fixed;
170 z-index: #{z('sub-menu') - 1}; 172 z-index: #{z('sub-menu') - 1};
173 max-width: pvar(--mainColWidth);
171 } 174 }
172 } 175 }
173 176
@@ -178,18 +181,11 @@ my-input-toggle-hidden ::ng-deep input {
178 181
179 // Override some properties if the main content is expanded (no menu on the left) 182 // Override some properties if the main content is expanded (no menu on the left)
180 &.expanded { 183 &.expanded {
184 --horizontalMarginContent: #{$expanded-horizontal-margins};
185 --mainColWidth: 100vw;
186
181 margin-left: 0; 187 margin-left: 0;
182 width: 100%; 188 width: 100%;
183
184 .margin-content {
185 margin-left: var(--expanded-horizontal-margin-content);
186 margin-right: var(--expanded-horizontal-margin-content);
187 }
188
189 .sub-menu {
190 padding-left: var(--expanded-horizontal-margin-content);
191 padding-right: var(--expanded-horizontal-margin-content);
192 }
193 } 189 }
194 190
195 &.lock-scroll .main-row > router-outlet + * { 191 &.lock-scroll .main-row > router-outlet + * {
@@ -336,30 +332,23 @@ ngx-loading-bar {
336} 332}
337 333
338@media screen and (max-width: #{breakpoint(xxl)}) { 334@media screen and (max-width: #{breakpoint(xxl)}) {
339 .main-col { 335 .main-col.expanded {
340 &.expanded { 336 --horizontalMarginContent: #{$expanded-horizontal-margins/2};
341 .margin-content {
342 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
343 }
344 }
345 } 337 }
346} 338}
347 339
348@media screen and (max-width: #{breakpoint(lg)}) { 340@media screen and (max-width: #{breakpoint(lg)}) {
349 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ 341 /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
350 .main-col { 342 .main-col,
351 &, &.expanded { 343 .main-col.expanded {
352 .margin-content { 344 --horizontalMarginContent: #{$expanded-horizontal-margins/3};
353 --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3};
354 }
355 345
356 .sub-menu { 346 .sub-menu {
357 padding-left: 50px; 347 padding-left: 50px;
358 padding-right: 50px; 348 padding-right: 50px;
359 349
360 .title-page { 350 .title-page {
361 font-size: 17px; 351 font-size: 17px;
362 }
363 } 352 }
364 } 353 }
365 } 354 }
@@ -372,98 +361,46 @@ ngx-loading-bar {
372} 361}
373 362
374@media screen and (max-width: $small-view) { 363@media screen and (max-width: $small-view) {
375 .main-col { 364 .main-col,
376 margin-left: 0; 365 .main-col.expanded {
377 366 --horizontalMarginContent: 15px;
378 &, &.expanded {
379 .margin-content {
380 --expanded-horizontal-margin-content: 15px;
381 }
382
383 .sub-menu {
384 width: 100vw;
385 padding-left: 15px;
386 padding-right: 15px;
387 margin-bottom: $sub-menu-margin-bottom-small-view;
388 overflow-x: auto;
389 }
390
391 // Use an appropriate offset top when sub-menu fixed
392 .margin-content.offset-content {
393 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
394 }
395
396 .admin-sub-header {
397 @include admin-sub-header-responsive(15px*2);
398 }
399
400 my-markdown-textarea {
401 .root {
402 max-width: 100% !important;
403 }
404 }
405 367
406 input[type=text], 368 margin-left: 0;
407 input[type=password],
408 input[type=email],
409 textarea,
410 .peertube-select-container {
411 flex-grow: 1;
412 }
413
414 .caption input[type=text] {
415 width: unset !important;
416 flex-grow: 1;
417 }
418 }
419 }
420}
421 369
422// overflow-databale responsive rules 370 .sub-menu {
423@media screen and (min-width: #{breakpoint(lg)}) { 371 width: 100vw;
424 .main-col { 372 padding-left: 15px;
425 &.expanded { 373 padding-right: 15px;
426 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false); 374 margin-bottom: $sub-menu-margin-bottom-small-view;
375 overflow-x: auto;
427 } 376 }
428 377
429 &:not(.expanded) { 378 // Use an appropriate offset top when sub-menu fixed
430 @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false); 379 .margin-content.offset-content {
380 padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
431 } 381 }
432 }
433}
434 382
435@media screen and (max-width: #{breakpoint(lg)}) { 383 .admin-sub-header {
436 .main-col { 384 @include admin-sub-header-responsive;
437 &.expanded {
438 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
439 } 385 }
440 386
441 &:not(.expanded) { 387 my-markdown-textarea {
442 @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2); 388 .root {
389 max-width: 100% !important;
390 }
443 } 391 }
444 }
445}
446 392
447@media screen and (max-width: $small-view) { 393 input[type=text],
448 .main-col { 394 input[type=password],
449 &:not(.expanded), 395 input[type=email],
450 &.expanded { 396 textarea,
451 @include overflow-datatable(breakpoint(lg), 15px); 397 .peertube-select-container {
398 flex-grow: 1;
452 } 399 }
453 }
454}
455
456@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
457 .main-col {
458 &:not(.expanded) {
459 .admin-sub-header {
460 @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
461 }
462 400
463 .sub-menu { 401 .caption input[type=text] {
464 overflow-x: auto; 402 width: unset !important;
465 width: calc(100vw - #{$menu-width}); 403 flex-grow: 1;
466 }
467 } 404 }
468 } 405 }
469} 406}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 457a7151c..426263444 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -178,32 +178,20 @@ $play-overlay-width: 18px;
178 178
179// Use margin by default, or padding if $margin is false 179// Use margin by default, or padding if $margin is false
180@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { 180@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
181 --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)};
182
181 @if $margin { 183 @if $margin {
182 margin-left: $not-expanded-horizontal-margins !important; 184 margin-left: var(--fluidVideosMiniatureMargins) !important;
183 margin-right: $not-expanded-horizontal-margins !important; 185 margin-right: var(--fluidVideosMiniatureMargins) !important;
184 } @else { 186 } @else {
185 padding-left: $not-expanded-horizontal-margins !important; 187 padding-left: var(--fluidVideosMiniatureMargins) !important;
186 padding-right: $not-expanded-horizontal-margins !important; 188 padding-right: var(--fluidVideosMiniatureMargins) !important;
187 } 189 }
188 190
189 @media screen and (max-width: $mobile-view) { 191 @media screen and (max-width: $mobile-view) {
190 width: auto; 192 --fluidVideosMiniatureMargins: $min-margin;
191 193
192 @if $margin { 194 width: auto;
193 margin: $min-margin !important;
194 } @else {
195 padding: $min-margin !important;
196 }
197 }
198
199 @media screen and (min-width: #{breakpoint(fhd)}) {
200 @if $margin {
201 margin-left: 6vw !important;
202 margin-right: 6vw !important;
203 } @else {
204 padding-left: 6vw !important;
205 padding-right: 6vw !important;
206 }
207 } 195 }
208} 196}
209 197
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index b3190a4e3..58920ce36 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -856,7 +856,7 @@
856 } 856 }
857} 857}
858 858
859@mixin admin-sub-header-responsive ($horizontal-margins) { 859@mixin admin-sub-header-responsive {
860 flex-direction: column; 860 flex-direction: column;
861 861
862 .form-sub-title { 862 .form-sub-title {
@@ -871,7 +871,7 @@
871 white-space: nowrap; 871 white-space: nowrap;
872 height: 50px; 872 height: 50px;
873 padding: 10px 0; 873 padding: 10px 0;
874 width: calc(100vw - #{$horizontal-margins*2}); 874 width: 100%;
875 875
876 a { 876 a {
877 margin-left: 5px; 877 margin-left: 5px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 532eaf650..8c5e75864 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: 30px; 37$not-expanded-horizontal-margins: 60px;
38 38
39$button-height: 30px; 39$button-height: 30px;
40 40
@@ -122,11 +122,19 @@ $variables: (
122 --supportButtonHeartColor: var(--supportButtonHeartColor), 122 --supportButtonHeartColor: var(--supportButtonHeartColor),
123 123
124 --embedForegroundColor: var(--embedForegroundColor), 124 --embedForegroundColor: var(--embedForegroundColor),
125 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) 125 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
126
127 --horizontalMarginContent: var(--horizontalMarginContent),
128 --mainColWidth: var(--mainColWidth)
126); 129);
127 130
131// SASS type check our CSS variables
128@function pvar($variable) { 132@function pvar($variable) {
129 @return map-get($variables, $variable); 133 @if map-has-key($variables, $variable) {
134 @return map-get($variables, $variable);
135 } @else {
136 @error "ERROR: Variable #{$variable} does not exist";
137 }
130} 138}
131 139
132/*** z-index groups ***/ 140/*** z-index groups ***/
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index f3a28ead0..ad673eea7 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -14,7 +14,7 @@ $context-menu-width: 350px;
14 14
15 .vjs-menu-content { 15 .vjs-menu-content {
16 opacity: $primary-foreground-opacity; 16 opacity: $primary-foreground-opacity;
17 color: pvar(--embedForegroundCsolor); 17 color: pvar(--embedForegroundColor);
18 font-size: $font-size !important; 18 font-size: $font-size !important;
19 font-weight: $font-semibold; 19 font-weight: $font-semibold;
20 } 20 }
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index e71fb99a7..9c9b5d4fc 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -753,29 +753,32 @@ p-table {
753} 753}
754 754
755// overflow data table 755// overflow data table
756@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) { 756p-table {
757 p-table { 757 .p-datatable-wrapper {
758 .p-datatable-wrapper { 758 overflow-x: auto;
759 overflow-x: auto; 759 max-width: 100%;
760 max-width: calc(100vw - #{$horizontal-margins * 2});
761
762 table {
763 min-width: $table-min-width;
764 }
765 }
766 760
767 @if $mobile-paginator { 761 table {
768 p-paginator .p-paginator-bottom { 762 min-width: breakpoint(lg);
769 display: block; 763 }
764 }
770 765
771 .p-paginator-current { 766 @media screen and (max-width: #{breakpoint(lg)}) {
772 position: relative; 767 // Prevent overflow
773 display: block; 768 p-paginator {
774 } 769 .p-paginator-current,
770 .p-dropdown {
771 top: 0;
772 margin-top: 30px;
773 }
774 }
775 }
775 776
776 a, .p-paginator-pages { 777 @media screen and (max-width: $mobile-view) {
777 vertical-align: middle; 778 // Prevent overflow
778 } 779 p-paginator {
780 .p-paginator-pages > .p-paginator-page:not(.p-highlight) {
781 display: none;
779 } 782 }
780 } 783 }
781 } 784 }