UHF-6666: Event list styles + template changes

City-of-Helsinki · Oct 3, 2022 · 6575b48 · 6575b48
1 parent e3fc1e0
commit 6575b48
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/forms/_react-forms.scss b/src/scss/06_components/forms/_react-forms.scss
@@ -1,6 +1,3 @@
-// Min-width for filter components in desktop. Helps preventing weird behavior with hds-dropdowns.
-$filter-component-min-width-xl: 328px;
-
 // Checkbox styles need specific selectors to override HDS styles
 .hdbt-search__filter.hdbt-search__checkbox {
   --background-unselected: transparent;
@@ -24,10 +21,6 @@ $filter-component-min-width-xl: 328px;
 
 .hdbt-search__filter {
   margin-bottom: $spacing;
-
-  @include breakpoint($breakpoint-xl) {
-    min-width: $filter-component-min-width-xl;
-  }
 }
 
 // Override HDBTs li+li style {

diff --git a/src/scss/06_components/paragraphs/_event-list.scss b/src/scss/06_components/paragraphs/_event-list.scss
@@ -196,6 +196,32 @@ $tag-vertical-padding: 5px;
 .event-form__filter-section-container {
   display: flex;
   flex-direction: column;
+
+  @include breakpoint($breakpoint-l) {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @include flex-gap($spacing-and-half);
+  }
+}
+
+// Override HDS style for multiple checkboxes
+.event-form__filter-section-container .hdbt-search__checkbox:not(:first-of-type) {
+  @include breakpoint($breakpoint-l) {
+    margin-top: 0;
+  }
+}
+
+.event-form__filter--date,
+.event-form__filter--location {
+  @include breakpoint($breakpoint-l) {
+    flex: 1;
+  }
+}
+
+.event-form__checkboxes-label {
+  font-weight: $font-weight-medium;
+  margin-bottom: $spacing;
 }
 
 .event-list__submit-button {

diff --git a/templates/paragraphs/paragraph--event-list.html.twig b/templates/paragraphs/paragraph--event-list.html.twig
@@ -1,4 +1,3 @@
-
 {% block paragraph %}
   {% embed "@hdbt/misc/component.twig" with
     {
@@ -13,7 +12,15 @@
   %}
     {% block component_content %}
       {# Hook React app to this div #}
-      <div id="helfi-events-search" data-events-url="{{ events_url }}"></div>
+      <div
+        id="helfi-events-search"
+        data-events-url="{{ events_url }}"
+        data-show-location-filter="{{ field_event_location }}"
+        data-show-time-filter="{{ field_event_time }}"
+        data-show-free-events-filter="{{ field_free_events }}"
+        data-show-remote-events-filter="{{ field_remote_events }}"
+      >
+      </div>
       {# Indicate JS not enabled #}
       <noscript>
         <div class="event-list__javascript-disabled">