Move continue button to below the pricing summary

https://eaflood.atlassian.net/browse/IWTF-4379 https://eaflood.atlassian.net/browse/IWTF-4380 Pricing summary appears beneath green button. This means that if a user doesn't scroll down, they will miss them and may not know the licence price to make an informed decisions until further into the journey. This may result in a user clicking back and forth through the journey rather than proceeding smoothly through.
DEFRA · Dec 23, 2024 · 089dc5e · 089dc5e
1 parent 06d1e00
commit 089dc5e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 30 deletions.
diff --git a/packages/gafl-webapp-service/assets/sass/rod-licensing/_general.scss b/packages/gafl-webapp-service/assets/sass/rod-licensing/_general.scss
@@ -113,3 +113,36 @@ div.initially-hidden {
 .phone-number {
   white-space: nowrap;
 }
+
+.page-layout {
+  display: flex;
+}
+
+.page-layout__main {
+  order: 1;
+}
+
+.page-layout__summary {
+  order: 2;
+}
+
+@media (max-width: 640px) {
+  .page-layout {
+    flex-direction: column;
+  }
+
+  .govuk-grid-column-two-thirds,
+  .govuk-grid-column-one-third {
+    float: none !important;
+    width: auto !important;
+  }
+
+  .page-layout__summary {
+    order: 1;
+    margin-bottom: 2em;
+  }
+
+  .page-layout__main {
+    order: 2;
+  }
+}
diff --git a/packages/gafl-webapp-service/src/pages/macros/standard-form.njk b/packages/gafl-webapp-service/src/pages/macros/standard-form.njk
@@ -8,36 +8,41 @@
 {% block pageTitle %}{{ pageTitle(title, error, mssgs) }}{% endblock %}
 
 {% block content %}
-<div class="govuk-grid-row">
-    <div class="govuk-grid-column-two-thirds">
-        {{ errorSummary(error, errorMap, mssgs.there_is_a_problem) }}
-        <form method="post" novalidate>
-
-          {% block notificationContent %}{% endblock %}
-
-            {% call govukFieldset({
-              describedBy: describedByTag,
-              legend: {
-                text: title,
-                classes: "govuk-fieldset__legend--l govuk-!-margin-bottom-3",
-                isPageHeading: true
-              }
-            }) %}
-
-                {% block pageContent %}{% endblock %}
-
-            {% endcall %}
-
-            {{ govukButton({
-                attributes: { id: 'continue' },
-                preventDoubleClick: true,
-                name: "continue",
-                text: mssgs.continue,
-                classes: "govuk-!-margin-top-5"
-            }) }}
-            {{ csrf() }}
-        </form>
-    </div>
+<div class="govuk-grid-row page-layout">
+
+  <!-- Main content -->
+  <div class="govuk-grid-column-two-thirds page-layout__main">
+    {{ errorSummary(error, errorMap, mssgs.there_is_a_problem) }}
+
+    <form method="post" novalidate>
+      {% block notificationContent %}{% endblock %}
+
+      {% call govukFieldset({
+        describedBy: describedByTag,
+        legend: {
+          text: title,
+          classes: "govuk-fieldset__legend--l govuk-!-margin-bottom-3",
+          isPageHeading: true
+        }
+      }) %}
+        {% block pageContent %}{% endblock %}
+      {% endcall %}
+
+      {{ govukButton({
+        attributes: { id: 'continue' },
+        preventDoubleClick: true,
+        name: "continue",
+        text: mssgs.continue,
+        classes: "govuk-!-margin-top-5"
+      }) }}
+      {{ csrf() }}
+    </form>
+  </div>
+
+  <!-- Pricing summary (sidebar) -->
+  <div class="govuk-grid-column-one-third page-layout__summary">
     {% block pricingSummary %}{% endblock %}
+  </div>
+
 </div>
 {% endblock %}