♻️ [#3178] Replace layout wrapper with utrecht-page-content

The NL DS component provides in paddings around the content, so our layout component in the backend is obsolete. There is still a layout component in the SDK for the time being, and the paddings of that one need tweaking so that the A11Y toolbar and the form content properly align again.
open-formulieren · Nov 3, 2023 · 5c271f7 · 5c271f7
1 parent 73f5bab
commit 5c271f7
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 78 deletions.
diff --git a/src/openforms/templates/master.html b/src/openforms/templates/master.html
@@ -45,13 +45,16 @@
         {% endblock %}
 
         <div class="utrecht-page__content utrecht-page-content">
-            <main class="utrecht-page-content__main layout layout--container">
+            <main class="utrecht-page-content__main">
                 <span class="skiplink-target" id="main-content"></span>
                 {% block inner-content %}
                     Override <code>{% verbatim %}{% block inner-content %}{% endverbatim %}</code>
                     to get some actual content.
                 {% endblock %}
             </main>
+            {% block a11y-toolbar %}
+                {% include "includes/a11y_toolbar.html" only %}
+            {% endblock a11y-toolbar %}
         </div>
     {% endblock %}
 

diff --git a/src/openforms/ui/static/ui/scss/components/_index.scss b/src/openforms/ui/static/ui/scss/components/_index.scss
@@ -1,5 +1,6 @@
 // NL DS based
 @import 'page';
+@import 'page-content';
 @import 'page-footer';
 @import 'page-header';
 
@@ -8,7 +9,6 @@
 @import 'anchor';
 @import 'card';
 @import 'fa-icon';
-@import 'layout';
 @import 'list';
 @import 'nav';
 @import 'skiplink';

diff --git a/src/openforms/ui/static/ui/scss/components/_page-content.scss b/src/openforms/ui/static/ui/scss/components/_page-content.scss
@@ -0,0 +1,23 @@
+@import '~microscope-sass/lib/responsive';
+
+// Extensions of the utrecht-page-content component
+.utrecht-page-content {
+  @include mobile-only {
+    padding-block-end: var(
+      --of-utrecht-page-content-mobile-padding-block-end,
+      var(--utrecht-page-content-padding-block-end)
+    );
+    padding-block-start: var(
+      --of-utrecht-page-content-mobile-padding-block-start,
+      var(--utrecht-page-content-padding-block-start)
+    );
+    padding-inline-end: var(
+      --of-utrecht-page-mobile-padding-inline-end,
+      var(--utrecht-page-padding-inline-end)
+    );
+    padding-inline-start: var(
+      --of-utrecht-page-mobile-padding-inline-start,
+      var(--utrecht-page-padding-inline-start)
+    );
+  }
+}
diff --git a/src/openforms/ui/static/ui/scss/components/_page.scss b/src/openforms/ui/static/ui/scss/components/_page.scss
@@ -1,8 +1,8 @@
+@import '~microscope-sass/lib/responsive';
+
 /**
  * Style overrides for the utrecht-page component.
  */
-@import '~microscope-sass/lib/responsive';
-
 .openforms-theme {
   .utrecht-page {
     // backwards compatibility
@@ -20,7 +20,14 @@
 
     margin-block-end: var(--of-utrecht-page-margin-block-end, 0);
     margin-block-start: var(--of-utrecht-page-margin-block-start, 0);
-    background-color: var(--utrecht-page-background-color);
+    // Backwards compatible design token
+    // TODO: remove of-layout support in Open Forms 3.0
+    background-color: var(--of-layout-background-color, var(--utrecht-page-background-color));
+
+    &,
+    & * {
+      box-sizing: border-box;
+    }
 
     // ensure the page content spans the entire height & width of the viewport
     display: flex;

diff --git a/src/openforms/ui/static/ui/scss/components/layout/_index.scss b/src/openforms/ui/static/ui/scss/components/layout/_index.scss
diff --git a/src/openforms/ui/static/ui/scss/components/layout/_layout.scss b/src/openforms/ui/static/ui/scss/components/layout/_layout.scss
diff --git a/src/openforms/ui/templates/ui/views/abstract/detail.html b/src/openforms/ui/templates/ui/views/abstract/detail.html
@@ -1,23 +1,19 @@
 {% extends "master.html" %}
 
 {% block inner-content %}
-    <section class="layout__container">
-        {% block card %}
-            <div class="card">
-                <header class="card__header">
-                    <h1 class="title">{{ object }}</h1>
-                </header>
+    {% block card %}
+        <div class="card">
+            <header class="card__header">
+                <h1 class="title">{{ object }}</h1>
+            </header>
 
-                <div class="card__body">
-                    {% block card_body %}
-                        <p class="body">
-                            {{ object }}
-                        </p>
-                    {% endblock %}
-                </div>
+            <div class="card__body">
+                {% block card_body %}
+                    <p class="body">
+                        {{ object }}
+                    </p>
+                {% endblock %}
             </div>
-        {% endblock %}
-
-        {% include "includes/a11y_toolbar.html" only %}
-    </section>
+        </div>
+    {% endblock %}
 {% endblock %}
diff --git a/src/openforms/ui/templates/ui/views/abstract/list.html b/src/openforms/ui/templates/ui/views/abstract/list.html
@@ -1,30 +1,31 @@
 {% extends "master.html" %}
 
 {% block inner-content %}
-    <section class="layout__container">
-        <div class="openforms-card">
-            {% block card %}
-                <header class="openforms- card__header">
-                    <h1 class="title">{{ title }}</h1>
-                </header>
+    <div class="openforms-layout">
+        <div class="openforms-layout__row">
 
-                <div class="openforms-card__body">
-                    {% block card_body %}
-                        <ul class="list">
-                            {% for object in object_list %}
-                                <li class="list__item">
-                                    <a
-                                        href="{{ object.get_absolute_url }}"
-                                        class="utrecht-link utrecht-link--openforms"
-                                    >{{ object }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    {% endblock %}
-                </div>
-            {% endblock %}
-        </div>
+            <div class="openforms-card">
+                {% block card %}
+                    <header class="openforms- card__header">
+                        <h1 class="title">{{ title }}</h1>
+                    </header>
 
-        {% include "includes/a11y_toolbar.html" only %}
-    </section>
+                    <div class="openforms-card__body">
+                        {% block card_body %}
+                            <ul class="list">
+                                {% for object in object_list %}
+                                    <li class="list__item">
+                                        <a
+                                            href="{{ object.get_absolute_url }}"
+                                            class="utrecht-link utrecht-link--openforms"
+                                        >{{ object }}</a>
+                                    </li>
+                                {% endfor %}
+                            </ul>
+                        {% endblock %}
+                    </div>
+                {% endblock %}
+            </div>
+        </div>
+    </div>
 {% endblock %}