[CIVIC-1502] Updated Group Filters with short-term fix for mobile style.

civictheme · Dec 15, 2023 · 204e304 · 204e304
1 parent e3b7127
commit 204e304
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/...trib/civictheme/civictheme_library/components/02-molecules/group-filter/group-filter.scss b/...trib/civictheme/civictheme_library/components/02-molecules/group-filter/group-filter.scss
@@ -7,18 +7,69 @@
   padding-bottom: ct-spacing(3);
   margin-top: ct-spacing(4);
   margin-bottom: ct-spacing(5);
-  padding-left: ct-spacing(4);
-  padding-right: ct-spacing(4);
+
+  @include ct-breakpoint(m) {
+    padding-left: ct-spacing(4);
+    padding-right: ct-spacing(4);
+  }
 
   #{$root}__title {
-    white-space: nowrap;
     margin-bottom: 0;
+
+    @include ct-breakpoint(m) {
+      white-space: nowrap;
+    }
   }
 
   #{$root}__submit {
     white-space: nowrap;
   }
 
+  #{$root}__filters {
+    display: flex;
+    flex-direction: column;
+    gap: ct-spacing(2);
+
+    @include ct-breakpoint(l) {
+      gap: ct-spacing(4);
+    }
+
+    // No page sidebar.
+    .ct-layout__inner > .ct-layout__main & {
+      @include ct-breakpoint(m) {
+        flex-direction: row;
+      }
+    }
+
+    // With page sidebar.
+    .ct-layout__sidebar + .ct-layout__main & {
+      @include ct-breakpoint(l) {
+        flex-direction: row;
+      }
+    }
+  }
+
+  #{$root}__filter-row {
+    flex-direction: column;
+    gap: ct-spacing(2);
+
+    // No page sidebar.
+    .ct-layout__inner > .ct-layout__main & {
+      @include ct-breakpoint(l) {
+        flex-direction: row;
+        gap: initial;
+      }
+    }
+
+    // With page sidebar.
+    .ct-layout__sidebar + .ct-layout__main & {
+      @include ct-breakpoint(xxl) {
+        flex-direction: row;
+        gap: initial;
+      }
+    }
+  }
+
   @include ct-component-theme($root) using($root, $theme) {
     border-top-color: ct-component-var($root, $theme, border-color);
     border-bottom-color: ct-component-var($root, $theme, border-color);

diff --git a/...trib/civictheme/civictheme_library/components/02-molecules/group-filter/group-filter.twig b/...trib/civictheme/civictheme_library/components/02-molecules/group-filter/group-filter.twig
@@ -63,7 +63,7 @@
               <form {{ form_attributes }}>
             {% endif %}
 
-            <div class="row row--no-wrap">
+            <div class="row row--no-wrap ct-group-filter__filter-row">
               <div class="col col--no-grow">
                 <div class="ct-align-middle">
                   {% if title %}
@@ -80,7 +80,6 @@
                 <div class="ct-align-middle">
                   {% include '@base/item-list/item-list.twig' with {
                     items: filters_items,
-                    size: 'large',
                     modifier_class: 'ct-group-filter__filters',
                     attributes: 'data-ct-group-filter-filters',
                   } only %}