@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),