WIP: Side by side compare

app/assets/sass/components/_dark-mode.scss

@@ -263,6 +263,38 @@ $app-tag--blue-dark-text: nhsuk-tint(nhsuk-colour("blue"), 80%);
     color: $app-tag--blue-dark-text;
   }
 
+  .app-reading-compare-card.nhsuk-card--feature {
+    &.app-reading-compare-card--normal {
+      outline-color: $app-tag--green-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--green-dark-background;
+        color: $app-tag--green-dark-text;
+        outline-color: $app-tag--green-dark-border;
+      }
+    }
+
+    &.app-reading-compare-card--technical-recall {
+      outline-color: $app-tag--orange-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--orange-dark-background;
+        color: $app-tag--orange-dark-text;
+        outline-color: $app-tag--orange-dark-border;
+      }
+    }
+
+    &.app-reading-compare-card--recall-for-assessment {
+      outline-color: $app-tag--red-dark-border;
+
+      .nhsuk-card__heading {
+        background-color: $app-tag--red-dark-background;
+        color: $app-tag--red-dark-text;
+        outline-color: $app-tag--red-dark-border;
+      }
+    }
+  }
+
   .nhsuk-error-summary__title {
     color: $app-dark-mode-text-colour;
   }

app/assets/sass/components/_reading.scss

@@ -348,3 +348,94 @@
   font-weight: 400;
   opacity: 0.8;
 }
+
+// Compare opinions: card colours by read opinion
+.app-reading-compare-card.nhsuk-card--feature {
+  outline: 2px solid nhsuk-colour("grey-3");
+  outline-offset: -2px;
+
+  .nhsuk-card__heading {
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+  }
+
+  &.app-reading-compare-card--normal {
+    outline-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("green"), 80%);
+      color: nhsuk-shade(nhsuk-colour("green"), 40%);
+      outline-color: nhsuk-shade(nhsuk-colour("green"), 40%);
+    }
+  }
+
+  &.app-reading-compare-card--technical-recall {
+    outline-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("warm-yellow"), 50%);
+      color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+      outline-color: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
+    }
+  }
+
+  &.app-reading-compare-card--recall-for-assessment {
+    outline-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+
+    .nhsuk-card__heading {
+      background-color: nhsuk-tint(nhsuk-colour("red"), 80%);
+      color: nhsuk-shade(nhsuk-colour("red"), 50%);
+      outline-color: nhsuk-shade(nhsuk-colour("red"), 50%);
+    }
+  }
+}
+
+.app-reading-compare-card__action {
+  .nhsuk-button {
+    width: 100%;
+  }
+}
+
+.app-reading-compare-card__action--top {
+  margin-bottom: nhsuk-spacing(4);
+}
+
+.app-reading-compare-card__action--bottom {
+  margin-top: nhsuk-spacing(4);
+}
+
+.app-reading-compare-grid--bottom-actions {
+  // Use direct-child selectors in this block.
+  // Nested summary rows also use .nhsuk-grid-column-one-half and must keep
+  // the default float-based grid layout so left/right breast details stay side by side.
+  display: flex;
+  flex-wrap: wrap;
+
+  > .nhsuk-grid-column-one-half {
+    float: none;
+    display: flex;
+    flex-direction: column;
+  }
+
+  > .nhsuk-grid-column-one-half > .app-reading-compare-card.nhsuk-card--feature {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+
+    .nhsuk-card__heading {
+      align-self: flex-start;
+    }
+
+    .nhsuk-card__content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  .app-reading-compare-card__action--bottom {
+    margin-top: auto;
+    padding-top: nhsuk-spacing(4);
+  }
+}

app/assets/sass/main.scss

@@ -1,7 +1,7 @@
-$nhsuk-page-width: 1260px;
-
 // Import NHS.UK frontend library
-@forward "nhsuk-frontend/dist/nhsuk/nhsuk";
+@forward "nhsuk-frontend/dist/nhsuk/nhsuk" with (
+  $nhsuk-page-width: 960px
+);
 
 // Components that are not in the NHS.UK frontend library
 
@@ -35,8 +35,6 @@ $nhsuk-page-width: 1260px;
 @forward "typography";
 @forward "utils";
 
-$nhsuk-page-width: 1260px;
-
 ///////////////////////////////////////////
 // Add your custom CSS/Sass styles below...
 ///////////////////////////////////////////

app/views/_includes/summary-lists/read-summary.njk

@@ -13,6 +13,7 @@
 {% set read = read if read is defined else data.imageReadingTemp %}
 {% set allowEdits = allowEdits if allowEdits is defined else false %}
 {% set hideEmptyRows = hideEmptyRows if hideEmptyRows is defined else false %}
+{% set hideOpinionRow = hideOpinionRow if hideOpinionRow is defined else false %}
 {# Support legacy opinionOnly parameter #}
 {% if opinionOnly is defined and opinionOnly %}
   {% set hideEmptyRows = true %}
@@ -77,24 +78,26 @@
 {# Build rows based on result type #}
 {% set rows = [] %}
 
-{# Opinion row - always shown #}
-{% set rows = rows | push({
-  key: {
-    text: "Opinion"
-  },
-  value: {
-    html: read.opinion | toTag
-  },
-  actions: {
-    items: [
-      {
-        href: changeOpinionUrl,
-        text: "Change",
-        visuallyHiddenText: "opinion"
-      }
-    ]
-  } if allowEdits and changeOpinionUrl
-}) %}
+{# Opinion row #}
+{% if not hideOpinionRow %}
+  {% set rows = rows | push({
+    key: {
+      text: "Opinion"
+    },
+    value: {
+      html: read.opinion | toTag
+    },
+    actions: {
+      items: [
+        {
+          href: changeOpinionUrl,
+          text: "Change",
+          visuallyHiddenText: "opinion"
+        }
+      ]
+    } if allowEdits and changeOpinionUrl
+  }) %}
+{% endif %}
 
 {# Determine if detail rows have data #}
 {% set hasNormalDetails = read.opinion == 'normal' and read.normalDetails %}