Merge pull request #542 from City-of-Helsinki/UHF-7298_remove_infinit…

…e_scroll UHF-7298 Remove infinite scroll
City-of-Helsinki · Feb 9, 2023 · 564a5a9 · 564a5a9
2 parents 926a5c0 + 1d0bb26
commit 564a5a9
Show file tree

Hide file tree

Showing 15 changed files with 105 additions and 274 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/hdbt.theme b/hdbt.theme
@@ -1309,23 +1309,6 @@ function hdbt_theme_suggestions_views_view_unformatted_alter(array &$suggestions
   }
 }
 
-/**
- * Implements hook_theme_suggestions_HOOK_alter().
- */
-function hdbt_theme_suggestions_views_infinite_scroll_pager_alter(array &$suggestions, array $variables) {
-  if (isset($variables['view'])) {
-    $view = $variables['view'];
-
-    if (!empty($view->id())) {
-      $suggestions[] = 'views_infinite_scroll_pager__' . $view->id();
-
-      if (!empty($view->getDisplay()->display['id'])) {
-        $suggestions[] = 'views_infinite_scroll_pager__' . $view->id() . '__' . $view->getDisplay()->display['id'];
-      }
-    }
-  }
-}
-
 /**
  * Implements hook_preprocess_HOOK().
  */

diff --git a/modules/hdbt_content/hdbt_content.module b/modules/hdbt_content/hdbt_content.module
@@ -281,38 +281,6 @@ function hdbt_content_form_views_exposed_form_alter(&$form, $form_state) {
   }
 }
 
-/**
- * Implements hook_preprocess_HOOK().
- */
-function hdbt_content_preprocess_views_infinite_scroll_pager__unit_search(&$variables) {
-  $view = $variables['view'];
-
-  [, $paragraph_id] = $view->args + [NULL, NULL];
-
-  if (!$paragraph = Paragraph::load($paragraph_id)) {
-    return;
-  }
-  $variables['options']['button_text'] = $paragraph
-    ->get('field_unit_search_meta_load_more')
-    ?->value;
-}
-
-/**
- * Implements hook_preprocess_HOOK().
- */
-function hdbt_content_preprocess_views_infinite_scroll_pager__service_list(&$variables) {
-  $view = $variables['view'];
-
-  [, $paragraph_id] = $view->args + [NULL, NULL];
-
-  if (!$paragraph = Paragraph::load($paragraph_id)) {
-    return;
-  }
-  $variables['options']['button_text'] = $paragraph
-    ->get('field_service_list_meta_load_mor')
-    ?->value;
-}
-
 /**
  * Implements hook_form_FORM_ID_alter().
  */

diff --git a/src/scss/06_components/navigation/__index.scss b/src/scss/06_components/navigation/__index.scss
@@ -7,7 +7,6 @@
 @import 'helfi-search-form';
 @import 'language-switcher';
 @import 'local-tasks';
-@import 'infinite-scroll-pager';
 @import 'sidebar-menu';
 @import 'skip-to-main';
 @import 'table-of-contents';

diff --git a/src/scss/06_components/navigation/_infinite-scroll-pager.scss b/src/scss/06_components/navigation/_infinite-scroll-pager.scss
diff --git a/src/scss/06_components/pages/_service.scss b/src/scss/06_components/pages/_service.scss
@@ -1,10 +1,6 @@
 $teaser-icon-size-mobile: 32px;
 $teaser-icon-size-desktop: 48px;
 
-.service__units {
-  @include component-margin-top;
-}
-
 .main-content:last-child .service.service--full {
   .component--service-units:last-child {
     // Make the keywords element go "under" the footer.
@@ -110,8 +106,11 @@ $teaser-icon-size-desktop: 48px;
 
 .component--service-units {
   background-color: $color-black-5;
-  padding-bottom: $spacing-sextuple;
-  padding-top: $spacing-sextuple;
+  padding-block: $spacing-double;
+
+  @include breakpoint($breakpoint-l) {
+    padding-block: $spacing-quadruple;
+  }
 
   .service__units__header {
     display: block;

diff --git a/src/scss/06_components/pages/_unit.scss b/src/scss/06_components/pages/_unit.scss
@@ -108,18 +108,13 @@
     margin-top: $spacing-and-half;
 
     @include breakpoint($breakpoint-l) {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: calc(-#{$spacing-and-half} / 2);
+      margin-right: calc(-#{$spacing-and-half} / 2);
       margin-top: $spacing-triple;
     }
 
-    > * {
-      @include breakpoint($breakpoint-l) {
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: calc(-#{$spacing-and-half} / 2);
-        margin-right: calc(-#{$spacing-and-half} / 2);
-      }
-    }
-
     .service {
       width: 100%;
 

diff --git a/src/scss/06_components/paragraphs/_service-list.scss b/src/scss/06_components/paragraphs/_service-list.scss
@@ -42,37 +42,31 @@
       }
     }
   }
+}
 
-  .service-list__count-container {
-    @include font('lead');
-    display: block;
-    width: 100%;
+.service-list__count-container {
+  @include font('lead');
+  display: block;
+  width: 100%;
 
-    .service-list__count {
-      font-weight: $font-weight-bold;
-    }
+  .service-list__count {
+    font-weight: $font-weight-bold;
   }
+}
 
-  .views-infinite-scroll-content-wrapper {
-    margin-top: $spacing-and-half;
-
-    @include breakpoint($breakpoint-l) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: calc(-#{$spacing-and-half} / 2);
-      margin-right: calc(-#{$spacing-and-half} / 2);
-      margin-top: $spacing-triple;
-    }
+.service-list__results {
+  margin-top: $spacing-and-half;
 
-    .views-row {
-      @include breakpoint($breakpoint-l) {
-        margin-top: $spacing-and-half;
-        width: 25%;
-      }
+  @include breakpoint($breakpoint-l) {
+    display: flex;
+    flex-wrap: wrap;
+    margin-inline: calc(-#{$spacing-and-half} / 2);
+    margin-top: $spacing-triple;
+  }
 
-      &:nth-child(-n+4) {
-        margin-top: 0;
-      }
+  .views-row {
+    @include breakpoint($breakpoint-l) {
+      width: 25%;
     }
   }
 }
diff --git a/src/scss/06_components/paragraphs/_unit-search.scss b/src/scss/06_components/paragraphs/_unit-search.scss
@@ -72,8 +72,7 @@
     }
   }
 
-  .unit-search__results > .views-row:first-of-type,
-  .views-infinite-scroll-content-wrapper {
+  .unit-search__results > .views-row:first-of-type {
     margin-top: $spacing;
 
     @include breakpoint($breakpoint-m) {
@@ -94,7 +93,7 @@
     padding-top: $spacing-quadruple;
   }
 
-  > .views-infinite-scroll-content-wrapper > .views-row + .views-row {
+  > .views-row + .views-row {
     margin-top: $spacing;
   }
 }
@@ -184,8 +183,6 @@
 }
 
 // Unit search with large volume of units listed such as daycare search.
-// TODO: Remove this infinite scroll selector once we remove the infinite scroll pager is switched.
-.views--unit-search--large-volume .unit-search__results > .views-infinite-scroll-content-wrapper > .views-row + .views-row,
 .views--unit-search--large-volume .unit-search__results .views-row + .views-row {
   margin-top: $spacing-half;
 }
diff --git a/templates/module/helfi_tpr/tpr-service-lower-content.html.twig b/templates/module/helfi_tpr/tpr-service-lower-content.html.twig
@@ -10,7 +10,18 @@
 {% set service_units_view = drupal_view_result('service_units', 'service_units')|length %}
 
 {% if service_units_view > 0 %}
-  <div class="service__units">
-    {{ drupal_view('service_units', 'service_units') }}
-  </div>
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+      'component--service-units',
+      'component--hardcoded'
+    ]
+    }
+  %}
+    {% block component_content %}
+      <div class="service__units">
+        {{ drupal_view('service_units', 'service_units') }}
+      </div>
+    {% endblock component_content %}
+  {% endembed %}
 {% endif %}
diff --git a/templates/module/helfi_tpr/tpr-unit-lower-content.html.twig b/templates/module/helfi_tpr/tpr-unit-lower-content.html.twig
@@ -10,9 +10,20 @@
 {% set services_view = drupal_view_result('unit_services', 'unit_services')|length %}
 
 {% if services_view > 0 %}
-  <div class="unit__services">
-    {{ drupal_view('unit_services', 'unit_services') }}
-  </div>
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+      'component--unit-services',
+      'component--hardcoded',
+    ]
+    }
+  %}
+    {% block component_content %}
+      <div class="unit__services">
+        {{ drupal_view('unit_services', 'unit_services') }}
+      </div>
+    {% endblock component_content %}
+  {% endembed %}
 {% endif %}
 
 {% if content.accessibility_sentences|render %}

diff --git a/templates/views/views-infinite-scroll-pager.html.twig b/templates/views/views-infinite-scroll-pager.html.twig
diff --git a/templates/views/views-view--service-list.html.twig b/templates/views/views-view--service-list.html.twig
@@ -41,39 +41,17 @@
 %}
 
 <div{{attributes.addClass(classes)}}>
-  {{ title_prefix }}
-  {{ title }}
-  {{ title_suffix }}
-
-  {% if header %}
-    <header>
-      {{ header }}
-    </header>
-  {% endif %}
-
-  {{ exposed }}
-  {{ attachment_before }}
-
   {%  if total_rows > pager_items_per_page %}
     <span class="service-list__count-container">
       <span class="service-list__count">{{ total_rows }}</span>
       {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %}
     </span>
   {% endif %}
 
-  {{ rows }}
+  <div class="service-list__results">
+    {{ rows }}
+  </div>
 
   {{ empty }}
   {{ pager }}
-
-  {{ attachment_after }}
-  {{ more }}
-
-  {% if footer %}
-    <footer>
-      {{ footer }}
-    </footer>
-  {% endif %}
-
-  {{ feed_icons }}
 </div>