Issue #3497461 by grimreaper, pdureau: [5.1.x] Use grid row components in page.html.twig

templates/system/html.html.twig

@@ -46,7 +46,7 @@
       Keyboard navigation/accessibility link to main content section in
       page.html.twig.
     #}
-    <a href="#main-content" class="visually-hidden focusable">
+    <a href="#main-content" class="visually-hidden-focusable">
       {{ 'Skip to main content'|t }}
     </a>
     {{ page_top }}

templates/system/page.html.twig

@@ -47,91 +47,117 @@
 #}
 {# Navbar #}
 {% if page.navigation or page.navigation_collapsible %}
-  {% block navbar %}
-    <div class="{{ container }} bg-light">
-      {{ include('ui_suite_bootstrap:navbar', {
-        navigation: page.navigation,
-        navigation_collapsible: page.navigation_collapsible,
-        variant: 'expand_lg',
-        placement: 'default',
-        toggle_action: 'collapse',
-        toggler_position: 'end',
-      }, with_context = false) }}
-    </div>
-  {% endblock %}
+  <div class="{{ container }} bg-light">
+    {{ include('ui_suite_bootstrap:navbar', {
+      navigation: page.navigation,
+      navigation_collapsible: page.navigation_collapsible,
+      variant: 'expand_lg',
+      placement: 'default',
+      toggle_action: 'collapse',
+      toggler_position: 'end',
+    }, with_context = false) }}
+  </div>
 {% endif %}
 
-{# Main #}
-{% block main %}
-  <div role="main" class="{{ container }}">
-    <div class="row">
-
-      {# Header #}
-      {% if page.header %}
-        {% block header %}
-          <div class="col col-12 border-bottom mb-4 pb-1">
-            {{ page.header }}
-          </div>
-        {% endblock %}
-      {% endif %}
-
-      {# Sidebar First #}
-      {% if page.sidebar_first %}
-        {% block sidebar_first %}
-          <aside class="col col-12 col-sm-3 gx-0" role="complementary">
-            {{ page.sidebar_first }}
-          </aside>
-        {% endblock %}
-      {% endif %}
-
-      {# Content #}
-      {%
-        set content_classes = [
-        page.sidebar_first and page.sidebar_second ? 'col col-12 col-sm-6',
-        page.sidebar_first and page.sidebar_second is empty ? 'col col-12 col-sm-9',
-        page.sidebar_second and page.sidebar_first is empty ? 'col col-12 col-sm-9',
-        page.sidebar_first is empty and page.sidebar_second is empty ? 'col col-12'
-      ]
-      %}
-      <section{{ content_attributes.addClass(content_classes) }}>
-
-        {# Highlighted #}
-        {% if page.highlighted %}
-          {% block highlighted %}
-            <div class="highlighted">{{ page.highlighted }}</div>
-          {% endblock %}
-        {% endif %}
-
-        {# Help #}
-        {% if page.help %}
-          {% block help %}
-            {{ page.help }}
-          {% endblock %}
-        {% endif %}
+{% if page.header %}
+  {{ include('ui_suite_bootstrap:grid_row_1', {
+    container: container,
+    col_xs: 12,
+    col_attributes: {
+      class: [
+        'border-bottom',
+        'mb-4',
+        'pb-1',
+      ],
+    },
+    col_1_content: page.header,
+  }, with_context: false) }}
+{% endif %}
 
-        {# Content #}
-        {% block content %}
-          <div id="main-content"></div>
-          {{ page.content }}
-        {% endblock %}
-      </section>
+{% set main_content = [
+  page.highlighted,
+  page.help,
+  {
+    '#type': 'html_tag',
+    '#tag': 'div',
+    '#attributes': {
+      'id': 'main-content',
+    },
+  },
+  page.content,
+] %}
 
-      {# Sidebar Second #}
-      {% if page.sidebar_second %}
-        {% block sidebar_second %}
-          <aside class="col col-12 col-sm-3 gx-0" role="complementary">
-            {{ page.sidebar_second }}
-          </aside>
-        {% endblock %}
-      {% endif %}
-    </div>
-  </div>
-{% endblock %}
+{% if page.sidebar_first and page.sidebar_second %}
+  {{ include('ui_suite_bootstrap:grid_row_3', {
+    container: container,
+    col_xs: [12, 12, 12],
+    col_sm: [3, 6, 3],
+    col_1_content: page.sidebar_first,
+    col_1_attributes: {
+      role: 'complementary',
+      class: [
+        'gx-0',
+      ],
+    },
+    col_2_content: main_content,
+    col_2_attributes: {
+      role: 'main',
+    },
+    col_3_content: page.sidebar_second,
+    col_3_attributes: {
+      role: 'complementary',
+      class: [
+        'gx-0',
+      ],
+    },
+  }, with_context: false) }}
+{% elseif page.sidebar_first and not page.sidebar_second %}
+  {{ include('ui_suite_bootstrap:grid_row_2', {
+    container: container,
+    col_xs: [12, 12],
+    col_sm: [3, 9],
+    col_1_content: page.sidebar_first,
+    col_1_attributes: {
+      role: 'complementary',
+      class: [
+        'gx-0',
+      ],
+    },
+    col_2_content: main_content,
+    col_2_attributes: {
+      role: 'main',
+    },
+  }, with_context: false) }}
+{% elseif not page.sidebar_first and page.sidebar_second %}
+  {{ include('ui_suite_bootstrap:grid_row_2', {
+    container: container,
+    col_xs: [12, 12],
+    col_sm: [9, 3],
+    col_1_content: main_content,
+    col_1_attributes: {
+      role: 'main',
+    },
+    col_2_content: page.sidebar_second,
+    col_2_attributes: {
+      role: 'complementary',
+      class: [
+        'gx-0',
+      ],
+    },
+  }, with_context: false) }}
+{% else %}
+  {{ include('ui_suite_bootstrap:grid_row_1', {
+    container: container,
+    col_xs: 12,
+    col_1_content: main_content,
+    col_attributes: {
+      role: 'main',
+    },
+  }, with_context: false) }}
+{% endif %}
 
 {% if page.footer %}
-  {% block footer %}
-    <footer class="footer border-top mt-3 pt-3 {{ container }}" role="contentinfo">
-      {{ page.footer }}
-    </footer>
-  {% endblock %}
+  <footer class="border-top mt-3 pt-3 {{ container }}" role="contentinfo">
+    {{ page.footer }}
+  </footer>
 {% endif %}