ADJUST1-380 Remand card alignment. (#146)

ministryofjustice · Feb 6, 2024 · 87d6a2a · 87d6a2a
1 parent f17ee28
commit 87d6a2a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/assets/scss/components/_adjustment-card.scss b/assets/scss/components/_adjustment-card.scss
@@ -10,7 +10,11 @@
     margin: 1%;
     border: 1px solid #b1b4b6;
     &.wider {
-      flex-basis: 68%;
+      flex-basis: 68%
+    }
+    &.full {
+      flex-basis: 100%;
+      margin: 0;
     }
 
     &_heading{

diff --git a/server/views/pages/adjustments/remand/partials/remandCard.njk b/server/views/pages/adjustments/remand/partials/remandCard.njk
@@ -4,7 +4,7 @@
 {% from "./remandOffence.njk" import offenceList %}
 
 {% macro remandCard(adjustment, offenderNo) %}
-<div class="adjustment-card wider clear">
+<div class="adjustment-card full clear govuk-!-margin-bottom-4">
     <div class="govuk-summary-card__title-wrapper adjustment-card-heading clear">
         <h2 class="govuk-summary-card__title">{{'From ' + adjustment.fromDate | date("DD MMM YYYY") + ' to ' + adjustment.toDate | date("DD MMM YYYY")}}</h2>
         <ul class="govuk-summary-card__actions">

diff --git a/server/views/pages/adjustments/remand/view.njk b/server/views/pages/adjustments/remand/view.njk
@@ -18,22 +18,26 @@
 {% endblock %}
 
 {% block content %}
-  <h1 class="govuk-heading-xl"><span class="govuk-caption-xl">Adjust release dates</span>
-    Remand details for {{ model.prisonerDetail.firstName | title }} {{ model.prisonerDetail.lastName | title }}
-  </h1>
-
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-three-quarters">
+      <h1 class="govuk-heading-xl"><span class="govuk-caption-xl">Adjust release dates</span>
+        Remand details for {{ model.prisonerDetail.firstName | title }} {{ model.prisonerDetail.lastName | title }}
+      </h1>
+
 
-  {{remandTotals(model.remandTotals())}}
+      {{remandTotals(model.remandTotals())}}
 
-  <div class="adjustment-card-container">
-    {% for adjustment in model.adjustmentsWithOffences() %}
-          {{ remandCard(adjustment, model.prisonerDetail.offenderNo) }}
-    {% endfor %}
+      <div class="adjustment-card-container">
+        {% for adjustment in model.adjustmentsWithOffences() %}
+              {{ remandCard(adjustment, model.prisonerDetail.offenderNo) }}
+        {% endfor %}
+        </div>
+      <div class="govuk-!-margin-top-6">
+        <a href="/{{ model.prisonerDetail.offenderNo }}/remand/add" class="govuk-button" data-module="govuk-button">
+          Add new
+        </a>
+      </div>
     </div>
-  <div class="govuk-!-margin-bottom-6">
-    <a href="/{{ model.prisonerDetail.offenderNo }}/remand/add" class="govuk-button" data-module="govuk-button">
-      Add new
-    </a>
   </div>
 
 {% endblock %}