Merge pull request #804 from City-of-Helsinki/UHF-9568

UHF-9568: Changed search views to use reusable template

Author: annadruid

public/themes/custom/hdbt_subtheme/dist/css/styles.min.css

@@ -1,5 +1,5 @@
-.unit-search--high-school .views--unit-search .views-exposed-form,
-.unit-search--vocational-school .views--unit-search .views-exposed-form {
+.unit-search--high-school .unit-search__content .views-exposed-form,
+.unit-search--vocational-school .unit-search__content .views-exposed-form {
   @include breakpoint($breakpoint-m) {
     align-items: flex-end;
     column-gap: $spacing-and-half;
@@ -35,7 +35,7 @@
   }
 }
 
-.unit-search--high-school .views--unit-search .views-exposed-form {
+.unit-search--high-school .unit-search__content .views-exposed-form {
   @include breakpoint($breakpoint-m) {
     grid-template-areas:
     'filter filter'
@@ -45,7 +45,7 @@
   }
 }
 
-.unit-search--vocational-school .views--unit-search .views-exposed-form {
+.unit-search--vocational-school .unit-search__content .views-exposed-form {
   @include breakpoint($breakpoint-m) {
     grid-template-areas:
     'filter .'
@@ -147,7 +147,7 @@
 
 // If there is sidebar on the basic page and the high school search is on the
 // upper content of the site the filters can't fit so they need to be adjusted.
-.has-sidebar .components--upper .unit-search--high-school .views--unit-search .views-exposed-form {
+.has-sidebar .components--upper .unit-search--high-school .unit-search__content .views-exposed-form {
   @include breakpoint($breakpoint-l) {
     margin-left: 0;
   }

public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_unit-search-variants.scss

@@ -2,82 +2,19 @@
 /**
  * @file
  * Theme override for main view template.
- *
- * Available variables:
- * - attributes: Remaining HTML attributes for the element.
- * - css_name: A css-safe version of the view name.
- * - css_class: The user-specified classes names, if any.
- * - header: The optional header.
- * - footer: The optional footer.
- * - rows: The results of the view query, if any.
- * - empty: The content to display if there are no rows.
- * - pager: The optional pager next/prev links to display.
- * - exposed: Exposed widget form/info to display.
- * - feed_icons: Optional feed icons to display.
- * - more: An optional link to the next page of results.
- * - title: Title of the view, only used when displaying in the admin preview.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the view title.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the view title.
- * - attachment_before: An optional attachment view to be displayed before the
- *   view content.
- * - attachment_after: An optional attachment view to be displayed after the
- *   view content.
- * - dom_id: Unique id for every view being printed to give unique class for
- *   Javascript.
- *
- * @see template_preprocess_views_view()
  */
 #}
-{%
-  set classes = [
-  'views',
-  'views--unit-search',
-  'views--unit-search--large-volume',
-  'views--unit-search--after-school-activity-search',
-  dom_id ? 'js-view-dom-id-' ~ dom_id,
-  'unit-search__content'
-]
-%}
-<div{{attributes.addClass(classes)}}>
-  {{ title_prefix }}
-  {{ title }}
-  {{ title_suffix }}
 
-  {{ exposed }}
-  {{ attachment_before }}
-
-  <div class="unit-search__results">
-    <h3 class="unit-search__count-container">
-      {%- if total_rows -%}
-        {{ total_rows }} {% trans with {'context': 'After-school activity search count'}%}activity location{% plural total_rows %}activity locations{% endtrans %}
-      {%- else -%}
-        {{ 'No results'|t({}, {'context' : 'Unit search no results title'}) }}
-      {%- endif -%}
-    </h3>
-
-    {% if header %}
-      {{ header }}
-    {% endif %}
-
-    {{ rows }}
-
-    {%- if empty -%}
-      <p>{{ 'No results were found for the criteria you entered. Try changing your search criteria.'|t({}, {'context' : 'Unit search no results text'}) }}</p>
+{% embed '@hdbt/component/unit-search.twig' with { 
+  modifier_class: [
+    'views--unit-search--large-volume',
+  ]
+}%}
+  {% block count_container%}
+    {%- if total_rows -%}
+      {{ total_rows }} {% trans with {'context': 'After-school activity search count'}%}activity location{% plural total_rows %}activity locations{% endtrans %}
+    {%- else -%}
+      {{ 'No results'|t({}, {'context' : 'Unit search no results title'}) }}
     {%- endif -%}
-
-    {{ pager }}
-  </div>
-
-  {{ attachment_after }}
-  {{ more }}
-
-  {% if footer %}
-    <footer>
-      {{ footer }}
-    </footer>
-  {% endif %}
-
-  {{ feed_icons }}
-</div>
+  {% endblock count_container %}
+{% endembed %}