From d794137057fc5fcea10ddd29f82e79ee2412fea4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 31 Mar 2021 11:21:10 +0200 Subject: Refactor horizontal margins --- .../my-video-playlist-elements.component.scss | 4 +- .../+my-library/my-videos/my-videos.component.scss | 15 -- .../shared-forms/markdown-textarea.component.scss | 2 +- client/src/sass/application.scss | 161 +++++++-------------- client/src/sass/include/_miniature.scss | 28 +--- client/src/sass/include/_mixins.scss | 4 +- client/src/sass/include/_variables.scss | 14 +- client/src/sass/player/context-menu.scss | 2 +- client/src/sass/primeng-custom.scss | 43 +++--- 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 @@ .playlist-info { background-color: pvar(--submenuBackgroundColor); - margin-left: -$not-expanded-horizontal-margins; + margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); margin-top: -$sub-menu-margin-bottom; padding: 10px; @@ -63,7 +63,7 @@ .playlist-info { width: 100vw; padding-top: 20px; - margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1); + margin-bottom: 10px; } .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 { } } -// Adapt my-video-miniature on small screens with menu -@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { - :host-context(.main-col:not(.expanded)) { - ::ng-deep { - .video-miniature { - flex-direction: column; - - .video-miniature-name { - max-width: $video-thumbnail-width; - } - } - } - } -} - @media screen and (max-width: $mobile-view) { .videos-header { 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; border-right: none; :last-child { - margin-right: $not-expanded-horizontal-margins; + margin-right: pvar(--horizontalMarginContent); } } 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 { --activatedActionButtonColor: #{$activated-action-button-color}; - --expanded-horizontal-margin-content: #{$expanded-horizontal-margins}; + --horizontalMarginContent: #{$not-expanded-horizontal-margins}; + --mainColWidth: calc(100vw - #{$menu-width}); font-family: $main-fonts; font-weight: $font-regular; @@ -150,8 +151,8 @@ my-input-toggle-hidden ::ng-deep input { outline: none; .margin-content { - margin-left: $not-expanded-horizontal-margins; - margin-right: $not-expanded-horizontal-margins; + margin-left: pvar(--horizontalMarginContent); + margin-right: pvar(--horizontalMarginContent); flex-grow: 1; } @@ -160,14 +161,16 @@ my-input-toggle-hidden ::ng-deep input { width: 100%; display: flex; align-items: center; - padding-left: $not-expanded-horizontal-margins; - padding-right: $not-expanded-horizontal-margins; + padding-left: pvar(--horizontalMarginContent); + padding-right: pvar(--horizontalMarginContent); height: $sub-menu-height; margin-bottom: $sub-menu-margin-bottom; + overflow-x: auto; &.sub-menu-fixed { position: fixed; z-index: #{z('sub-menu') - 1}; + max-width: pvar(--mainColWidth); } } @@ -178,18 +181,11 @@ my-input-toggle-hidden ::ng-deep input { // Override some properties if the main content is expanded (no menu on the left) &.expanded { + --horizontalMarginContent: #{$expanded-horizontal-margins}; + --mainColWidth: 100vw; + margin-left: 0; width: 100%; - - .margin-content { - margin-left: var(--expanded-horizontal-margin-content); - margin-right: var(--expanded-horizontal-margin-content); - } - - .sub-menu { - padding-left: var(--expanded-horizontal-margin-content); - padding-right: var(--expanded-horizontal-margin-content); - } } &.lock-scroll .main-row > router-outlet + * { @@ -336,30 +332,23 @@ ngx-loading-bar { } @media screen and (max-width: #{breakpoint(xxl)}) { - .main-col { - &.expanded { - .margin-content { - --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2}; - } - } + .main-col.expanded { + --horizontalMarginContent: #{$expanded-horizontal-margins/2}; } } @media screen and (max-width: #{breakpoint(lg)}) { /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */ - .main-col { - &, &.expanded { - .margin-content { - --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3}; - } + .main-col, + .main-col.expanded { + --horizontalMarginContent: #{$expanded-horizontal-margins/3}; - .sub-menu { - padding-left: 50px; - padding-right: 50px; + .sub-menu { + padding-left: 50px; + padding-right: 50px; - .title-page { - font-size: 17px; - } + .title-page { + font-size: 17px; } } } @@ -372,98 +361,46 @@ ngx-loading-bar { } @media screen and (max-width: $small-view) { - .main-col { - margin-left: 0; - - &, &.expanded { - .margin-content { - --expanded-horizontal-margin-content: 15px; - } - - .sub-menu { - width: 100vw; - padding-left: 15px; - padding-right: 15px; - margin-bottom: $sub-menu-margin-bottom-small-view; - overflow-x: auto; - } - - // Use an appropriate offset top when sub-menu fixed - .margin-content.offset-content { - padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; - } - - .admin-sub-header { - @include admin-sub-header-responsive(15px*2); - } - - my-markdown-textarea { - .root { - max-width: 100% !important; - } - } + .main-col, + .main-col.expanded { + --horizontalMarginContent: 15px; - input[type=text], - input[type=password], - input[type=email], - textarea, - .peertube-select-container { - flex-grow: 1; - } - - .caption input[type=text] { - width: unset !important; - flex-grow: 1; - } - } - } -} + margin-left: 0; -// overflow-databale responsive rules -@media screen and (min-width: #{breakpoint(lg)}) { - .main-col { - &.expanded { - @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false); + .sub-menu { + width: 100vw; + padding-left: 15px; + padding-right: 15px; + margin-bottom: $sub-menu-margin-bottom-small-view; + overflow-x: auto; } - &:not(.expanded) { - @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false); + // Use an appropriate offset top when sub-menu fixed + .margin-content.offset-content { + padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view; } - } -} -@media screen and (max-width: #{breakpoint(lg)}) { - .main-col { - &.expanded { - @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3); + .admin-sub-header { + @include admin-sub-header-responsive; } - &:not(.expanded) { - @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2); + my-markdown-textarea { + .root { + max-width: 100% !important; + } } - } -} -@media screen and (max-width: $small-view) { - .main-col { - &:not(.expanded), - &.expanded { - @include overflow-datatable(breakpoint(lg), 15px); + input[type=text], + input[type=password], + input[type=email], + textarea, + .peertube-select-container { + flex-grow: 1; } - } -} - -@media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) { - .main-col { - &:not(.expanded) { - .admin-sub-header { - @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2); - } - .sub-menu { - overflow-x: auto; - width: calc(100vw - #{$menu-width}); - } + .caption input[type=text] { + width: unset !important; + flex-grow: 1; } } } 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; // Use margin by default, or padding if $margin is false @mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) { + --fluidVideosMiniatureMargins: #{pvar(--horizontalMarginContent)}; + @if $margin { - margin-left: $not-expanded-horizontal-margins !important; - margin-right: $not-expanded-horizontal-margins !important; + margin-left: var(--fluidVideosMiniatureMargins) !important; + margin-right: var(--fluidVideosMiniatureMargins) !important; } @else { - padding-left: $not-expanded-horizontal-margins !important; - padding-right: $not-expanded-horizontal-margins !important; + padding-left: var(--fluidVideosMiniatureMargins) !important; + padding-right: var(--fluidVideosMiniatureMargins) !important; } @media screen and (max-width: $mobile-view) { - width: auto; + --fluidVideosMiniatureMargins: $min-margin; - @if $margin { - margin: $min-margin !important; - } @else { - padding: $min-margin !important; - } - } - - @media screen and (min-width: #{breakpoint(fhd)}) { - @if $margin { - margin-left: 6vw !important; - margin-right: 6vw !important; - } @else { - padding-left: 6vw !important; - padding-right: 6vw !important; - } + width: auto; } } 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 @@ } } -@mixin admin-sub-header-responsive ($horizontal-margins) { +@mixin admin-sub-header-responsive { flex-direction: column; .form-sub-title { @@ -871,7 +871,7 @@ white-space: nowrap; height: 50px; padding: 10px 0; - width: calc(100vw - #{$horizontal-margins*2}); + width: 100%; a { 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; $grey-actor-name: #777272; $expanded-horizontal-margins: 150px; -$not-expanded-horizontal-margins: 30px; +$not-expanded-horizontal-margins: 60px; $button-height: 30px; @@ -122,11 +122,19 @@ $variables: ( --supportButtonHeartColor: var(--supportButtonHeartColor), --embedForegroundColor: var(--embedForegroundColor), - --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) + --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor), + + --horizontalMarginContent: var(--horizontalMarginContent), + --mainColWidth: var(--mainColWidth) ); +// SASS type check our CSS variables @function pvar($variable) { - @return map-get($variables, $variable); + @if map-has-key($variables, $variable) { + @return map-get($variables, $variable); + } @else { + @error "ERROR: Variable #{$variable} does not exist"; + } } /*** 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; .vjs-menu-content { opacity: $primary-foreground-opacity; - color: pvar(--embedForegroundCsolor); + color: pvar(--embedForegroundColor); font-size: $font-size !important; font-weight: $font-semibold; } 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 { } // overflow data table -@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) { - p-table { - .p-datatable-wrapper { - overflow-x: auto; - max-width: calc(100vw - #{$horizontal-margins * 2}); - - table { - min-width: $table-min-width; - } - } +p-table { + .p-datatable-wrapper { + overflow-x: auto; + max-width: 100%; - @if $mobile-paginator { - p-paginator .p-paginator-bottom { - display: block; + table { + min-width: breakpoint(lg); + } + } - .p-paginator-current { - position: relative; - display: block; - } + @media screen and (max-width: #{breakpoint(lg)}) { + // Prevent overflow + p-paginator { + .p-paginator-current, + .p-dropdown { + top: 0; + margin-top: 30px; + } + } + } - a, .p-paginator-pages { - vertical-align: middle; - } + @media screen and (max-width: $mobile-view) { + // Prevent overflow + p-paginator { + .p-paginator-pages > .p-paginator-page:not(.p-highlight) { + display: none; } } } -- cgit v1.2.3