diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html index 423337882..208777ffb 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html @@ -11,7 +11,7 @@
-
+
@if (filters.scope === 'local') { Videos on {{ instanceName }} @@ -20,7 +20,7 @@ }
-
+
@for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) { @if (filter.key !== 'scope') { diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index e10a6bbf8..0331a9c87 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss @@ -51,9 +51,10 @@ $filters-background: pvar(--bg-secondary-400); display: flex; flex-wrap: wrap; background-color: $filters-background; - padding: 1.5rem; border-radius: 14px; + @include rfs(1.5rem, padding); + input[type=radio] + label { font-weight: $font-regular; } @@ -116,8 +117,9 @@ $filters-background: pvar(--bg-secondary-400); } my-select-languages, -my-select-categories { - width: 300px; +my-select-categories, +my-select-options { + max-width: 300px; display: inline-block; } @@ -132,7 +134,19 @@ my-select-categories { } @media screen and (max-width: $small-view) { - .filters-row { + .filters-toggle { + margin-top: 0.5rem; + + @include margin-left(0); + } + + .filters-summary { + display: flex; flex-direction: column; } + + .filters { + border-start-start-radius: 0; + border-start-end-radius: 0; + } } diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 26b174307..e7b427744 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -65,7 +65,7 @@ body { --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart}); --x-margin-content: 2rem; - --x-videos-margin-content: 2rem; + --main-col-width: calc(100vw - #{$menu-width}); --secondary-icon-color: #{pvar(--fg-50)}; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index b41f70d94..8f32566b1 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -111,20 +111,14 @@ color: #E9DFDF; } -// Use margin by default, or padding if $margin is false -@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) { - --gridVideosMiniatureMargins: #{pvar(--x-videos-margin-content)}; +@mixin grid-videos-miniature-margins { + --grid-videos-miniature-margins: #{pvar(--x-margin-content)}; - @if $margin { - @include margin-left(var(--gridVideosMiniatureMargins) !important); - @include margin-right(var(--gridVideosMiniatureMargins) !important); - } @else { - @include padding-left(var(--gridVideosMiniatureMargins) !important); - @include padding-right(var(--gridVideosMiniatureMargins) !important); - } + @include margin-left(var(--grid-videos-miniature-margins) !important); + @include margin-right(var(--grid-videos-miniature-margins) !important); @media screen and (max-width: $mobile-view) { - --gridVideosMiniatureMargins: #{$min-margin}; + --grid-videos-miniature-margins: 0; width: auto; } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index e90f55941..e604620e5 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -84,7 +84,6 @@ $variables: ( --embed-big-play-background-color: var(--embed-big-play-background-color), --x-margin-content: var(--x-margin-content), - --x-videos-margin-content: var(--x-videos-margin-content), --main-col-width: var(--main-col-width), --header-height: var(--header-height),