release(2.2.8): review offcanvas in search results page ouitoulia/dia…

…graphe#22
ouitoulia · May 2, 2024 · 26162bf · 26162bf
1 parent b8967e1
commit 26162bf
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 16 deletions.
diff --git a/components/offcanvas/offcanvas-sidebar-mobile.html.twig b/components/offcanvas/offcanvas-sidebar-mobile.html.twig
@@ -0,0 +1,49 @@
+{#
+/**
+ * @file
+ * Template for offcanvas sidebar-mobile component.
+ * Docs: https://italia.github.io/design-scuole-pagine-statiche/scuole-archivio.html
+ * Latest revision: 2.4.1
+ *
+ * Parameters:
+ * - offcanvas_title (string) (default: 'Filtri')
+ * - offcanvas_id (string) (default: 'sidebar-mobile-'~random())
+ * - offcanvas_icon (string) (default: 'icon-filters')
+ *
+ * Examples:
+   {% embed '@skenografia_components/offcanvas/offcanvas-sidebar-mobile.html.twig' with {
+     offcanvas_title: 'Title',
+   } %}
+    {% block mobileSidebarContent %}
+      {{ my_content }}
+    {% endblock %}
+   {% endembed %}
+ *
+ */
+#}
+{% apply spaceless %}
+  {# Set defaults #}
+  {% set _offcanvas_title = offcanvas_title|default('Filtri') %}
+  {% set _offcanvas_id = offcanvas_id|default('sidebar-mobile-'~random()) %}
+  {% set _offcanvas_icon = offcanvas_icon|default('icon-filters') %}
+
+  <div class="offcanvas offcanvas-end d-md-block" tabindex="-1" id="{{ _offcanvas_id }}" aria-labelledby="{{ _offcanvas_id }}-label">
+    <div class="offcanvas-header">
+      <h2 class="offcanvas-title" id="{{ _offcanvas_id }}-label">{{ _offcanvas_title }}</h2>
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+    <div class="offcanvas-body">
+      {% block mobileSidebarContent %}
+        {{ content }}
+      {% endblock %}
+    </div>
+  </div>
+  <section class="section bg-white border-top border-bottom d-block d-lg-none">
+    <div class="container d-flex justify-content-between align-items-center py-3">
+      <h2 class="h6 text-uppercase mb-0"><strong>{{ _offcanvas_title }}</strong></h2>
+      <button class="btn btn-link d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#{{ _offcanvas_id }}" aria-expanded="false" aria-controls="{{ _offcanvas_id }}">
+        {% include '@bi-bcl/icon/icon.html.twig' with {name: 'icon-filters'} %}
+      </button>
+    </div>
+  </section>
+{% endapply %}
diff --git a/templates/views/search/page--risultati-ricerca.html.twig b/templates/views/search/page--risultati-ricerca.html.twig
@@ -51,23 +51,11 @@
     {% include '@bootstrap_italia/layout/content/_partial.before-content.html.twig' %}
     {% embed '@bootstrap_italia/layout/content/_partial.content.html.twig' %}
       {% block contentMain %}
-        <div class="offcanvas offcanvas-end d-md-block" tabindex="-1" id="sidebar" aria-labelledby="sidebarLabel">
-          <div class="offcanvas-header">
-            <h2 class="offcanvas-title" id="sidebarLabel">Filtri</h2>
-            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-          </div>
-          <div class="offcanvas-body">
+        {% embed '@skenografia_components/offcanvas/offcanvas-sidebar-mobile.html.twig' %}
+          {% block mobileSidebarContent %}
             {{ page.sidebar_first }}
-          </div>
-        </div>
-        <section class="section bg-white border-top border-bottom d-block d-lg-none mt-3">
-          <div class="container d-flex justify-content-between align-items-center py-3">
-            <h2 class="h6 text-uppercase mb-0"><strong>Filtri</strong></h2>
-            <button class="btn btn-link d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-expanded="false" aria-controls="sidebar">
-              {% include '@bi-bcl/icon/icon.html.twig' with {name: 'icon-filters'} %}
-            </button>
-          </div>
-        </section>
+          {% endblock %}
+        {% endembed %}
         <section class="bg-gray-light mt-lg-5">
           <div class="container">
             <div class="row variable-gutters">