Merge pull request #11 from openeuropa/OEL-461

OEL-461: Add offcanvas pattern to search facets block.

oe_whitelabel.info.yml

@@ -22,6 +22,8 @@ regions:
   navbar_left:  Navbar left
   navbar_right: Navbar right
   header: Header
+  sidebar_left:  Sidebar left
+  sidebar_right: Sidebar right
   content: Content
   page_bottom: Page bottom
   footer: Footer

templates/overrides/page/page.html.twig

@@ -0,0 +1,96 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.navbar_branding: Items for the navbar brand region (logo).
+ * - page.navbar_left: Items for the navbar left region (primary menu).
+ * - page.navbar_right: Items for the navbar right region.
+ * - page.header: Items for the header region.
+ * - page.sidebar_left: Items for the sidebar left region.
+ * - page.sidebar_right: Items for the sidebar right region.
+ * - page.content: The main content of the current page.
+ * - page.page_bottom: The content of the current page.
+ * - page.footer: Items for the footer region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="page">
+
+  {{ pattern('navbar', {
+    navbar_branding: page.navbar_branding ? page.navbar_branding : false,
+    navbar_left: page.navbar_left ? page.navbar_left : false,
+    navbar_right: page.navbar_right ? page.navbar_right : false,
+    style: 'light'
+  }) }}
+
+  <main class="pt-5 pb-5">
+    {% if page.header %}
+      <header class="page__header mb-3">
+        <div class="container">
+          {{ page.header }}
+        </div>
+      </header>
+    {% endif %}
+    <div class="container">
+      <div class="row">
+        {% if page.sidebar_left %}
+          <div class="col-md-3">
+            {{ page.sidebar_left }}    
+          </div>
+        {% endif %}
+
+        {% if page.sidebar_right %}
+            <div class="container">
+              {{ page.sidebar_right }}
+            </div>
+        {% endif %}
+
+        {% if page.content %}
+          <div class="page__content col-12 col-lg-9">
+            {{ page.content }}
+          </div>
+        {% endif %}
+     </div>
+    </div>
+  </main>
+
+  {% if page.footer %}
+    <footer class="page__footer">
+      <div class="container">
+        <div class="d-flex justify-content-md-between align-items-md-center">
+          {{ page.footer }}
+        </div>
+      </div>
+    </footer>
+  {% endif %}
+</div>

templates/overrides/search/block--facets-form.html.twig

@@ -0,0 +1,65 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: array of HTML attributes populated by modules, intended to
+ *   be added to the main container tag of this template.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main content
+ *   tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @see template_preprocess_block()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{% if content.actions.reset['#type'] == 'link' %}
+  {% set extra_attributes = create_attribute() %}
+  {% set reset = pattern('button', {
+    'label': content.actions['reset']['#title'],
+    'url': content.actions['reset']['#url'].toString(),
+    'style': 'secondary',
+    'attributes': extra_attributes.addClass('ms-2')
+    })
+  %}
+  {% set actions = content.actions %}
+  {% set actions = actions|merge({('reset'): reset}) %}
+  {% set content = content|merge({('actions'): actions}) %}
+{% endif %}
+{% block content %}
+  {{ pattern('offcanvas', {
+    'title': {
+      'label': label,
+      'heading': 4,
+      'extra_classes': "mb-lg-4",
+     },
+    'attributes': attributes.addClass('bcl-offcanvas'),
+    'offcanvas_id': 'bcl-offcanvas',
+    'body': content,
+    'placement': 'start',
+    'with_body_scroll': false,
+    'with_backdrop': true,
+    'extra_classes_body': 'bcl-offcanvas p-lg-0',
+    'extra_classes_close': "d-lg-none",
+    'extra_classes_header': "p-lg-0",
+    'with_trigger': true,
+    'toggle_button_label': label,
+  }) }}
+{% endblock %}