Session and patient session layout tweaks to reduce the amount of scrolling needed

app/assets/stylesheets/components/_card.scss

@@ -180,3 +180,14 @@ $_orange-text-colour: nhsuk-shade(nhsuk-colour("warm-yellow"), 70%);
     }
   }
 }
+
+// Ensure border colour inside warning cards can be seen and matches
+.nhsuk-card--warning {
+  blockquote {
+    border-left-color: nhsuk-colour("black");
+  }
+
+  .nhsuk-summary-list__row {
+    border-color: nhsuk-colour("yellow");
+  }
+}

app/assets/stylesheets/components/_filters.scss

@@ -14,6 +14,8 @@
       padding-left: nhsuk-spacing(3);
       background-color: nhsuk-colour("grey-1");
 
+      @include nhsuk-font-size(22);
+
       // stylelint-disable-next-line max-nesting-depth
       @include nhsuk-media-query($from: tablet) {
         margin-left: #{nhsuk-spacing(-4) - 1px};

app/assets/stylesheets/components/_session-banner.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "../vendor/nhsuk-frontend" as *;
 
 .app-session-banner {
@@ -30,4 +31,57 @@
   .nhsuk-notification-banner__heading {
     color: $nhsuk-reverse-text-colour;
   }
+
+  .app-secondary-navigation {
+    margin: 0;
+    border-bottom: 0 none;
+    background: nhsuk-shade($nhsuk-brand-colour, 20%);
+    box-shadow: 0 -1px 0 0 $nhsuk-secondary-border-colour;
+  }
+
+  .app-secondary-navigation__list {
+    box-shadow: none;
+
+    @include nhsuk-media-query($until: tablet) {
+      margin-left: #{$nhsuk-gutter-half * -1};
+    }
+  }
+
+  &[data-app-sticky-init] {
+    position: sticky;
+    z-index: 999;
+    top: 0;
+    right: 0;
+    left: 0;
+
+    width: 100vw;
+    margin-right: -50vw;
+    margin-left: -50vw;
+  }
+
+  &[data-stuck="true"] {
+    border-bottom-color: nhsuk-colour("grey-3");
+    box-shadow: 0 $nhsuk-border-width 0 color.scale(nhsuk-colour("grey-3"), $alpha: -50%);
+
+    .app-main-wrapper--xs {
+      padding-top: nhsuk-spacing(2);
+      padding-bottom: 0;
+    }
+
+    .nhsuk-breadcrumb {
+      @include nhsuk-visually-hidden;
+    }
+
+    .nhsuk-heading-l {
+      @include nhsuk-font-size(22);
+    }
+
+    .app-secondary-navigation {
+      box-shadow: none;
+    }
+
+    .app-secondary-navigation__list {
+      @include nhsuk-font-size(16);
+    }
+  }
 }

app/assets/stylesheets/components/_sticky-navigation.scss

@@ -34,12 +34,3 @@
     box-shadow: 0 $nhsuk-border-width 0 color.scale(nhsuk-colour("grey-3"), $alpha: -50%);
   }
 }
-
-.app-sticky-navigation--reverse {
-  border-bottom: 0 none;
-  background: nhsuk-shade($nhsuk-brand-colour, 20%);
-
-  .app-secondary-navigation {
-    box-shadow: 0 -1px 0 0 $nhsuk-reverse-border-colour;
-  }
-}

app/assets/stylesheets/components/_summary-list.scss

@@ -1,6 +1,6 @@
 @use "../vendor/nhsuk-frontend" as *;
 
-.app-summary-list--full-width {
+@mixin _app-summary-list-full-width {
   .nhsuk-summary-list__row {
     display: block;
     padding-top: nhsuk-spacing(2);
@@ -28,3 +28,13 @@
     padding-top: nhsuk-spacing(1);
   }
 }
+
+.app-summary-list--full-width {
+  @include _app-summary-list-full-width;
+}
+
+.app-summary-list--full-width-at-large-desktop {
+  @include nhsuk-media-query($from: large-desktop) {
+    @include _app-summary-list-full-width;
+  }
+}

app/assets/stylesheets/core/objects/_grid.scss

@@ -4,7 +4,7 @@
 [class^="app-grid-column"],
 [class^="nhsuk-grid-column"] {
   &[data-app-sticky-init] {
-    @include nhsuk-media-query($from: desktop) {
+    @include nhsuk-media-query($from: large-desktop) {
       position: sticky;
       top: 0;
     }
@@ -19,11 +19,9 @@
 .app-grid-column-patient-record {
   @include nhsuk-grid-column(one-quarter, $float: right, $at: large-desktop);
 
-  padding-top: 12px;
-
   &[data-app-sticky-init] {
-    @include nhsuk-media-query($from: desktop) {
-      top: #{nhsuk-spacing(9) + nhsuk-spacing(3)};
+    @include nhsuk-media-query($from: large-desktop) {
+      top: #{nhsuk-spacing(9) + nhsuk-spacing(5)};
     }
   }
 }

app/assets/stylesheets/core/objects/_index.scss

@@ -1 +1,2 @@
 @forward "grid";
+@forward "main-wrapper";

app/assets/stylesheets/core/objects/_main-wrapper.scss

@@ -0,0 +1,6 @@
+@use "../../vendor/nhsuk-frontend" as *;
+
+.app-main-wrapper--xs {
+  padding-top: nhsuk-spacing(3);
+  padding-bottom: nhsuk-spacing(3);
+}

app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss

@@ -1,13 +1,5 @@
-@use "sass:color";
 @use "../core" as *;
 
-// Ensure border colour inside warning callout can be seen and matches
-.nhsuk-card--warning {
-  .nhsuk-summary-list__row {
-    border-color: color.scale(color.mix($nhsuk-border-colour, nhsuk-colour("yellow"), 50%), $lightness: -10%);
-  }
-}
-
 // Reduce space between summary list and button group
 .nhsuk-summary-list:has(+ .nhsuk-button-group) {
   @include nhsuk-responsive-margin(4, "bottom");

app/controllers/reply.js

@@ -15,7 +15,7 @@ import {
   Vaccination
 } from '../models.js'
 import { today } from '../utils/date.js'
-import { hasAnswersNeedingTriage } from '../utils/reply.js'
+import { countAnswersNeedingTriage } from '../utils/reply.js'
 import { formatParent } from '../utils/string.js'
 import {
   getScreenOutcomesForConsentMethod,
@@ -199,7 +199,7 @@ export const replyController = {
         },
         [`/${reply_uuid}/${type}/notify-parent`]: {},
         [`/${reply_uuid}/${type}/health-answers`]: {
-          [`/${reply_uuid}/${type}/${hasAnswersNeedingTriage(request.session.data.reply?.healthAnswers) ? 'triage' : 'check-answers'}`]: true
+          [`/${reply_uuid}/${type}/${countAnswersNeedingTriage(request.session.data.reply?.healthAnswers) ? 'triage' : 'check-answers'}`]: true
         },
         [`/${reply_uuid}/${type}/refusal-reason`]: {
           [`/${reply_uuid}/${type}/refusal-reason-details`]: {

app/locales/en.js

@@ -881,7 +881,9 @@ export const en = {
     }
   },
   healthAnswers: {
-    label: 'All answers to health questions'
+    label: 'Answers to health questions',
+    count:
+      'Answers to health questions{count, plural, =0 {} one {, including 1 Yes response} other {, including # Yes responses}}'
   },
   healthQuestions,
   home: {

app/models/consent.js

@@ -1,5 +1,5 @@
 import { Reply } from '../models.js'
-import { hasAnswersNeedingTriage } from '../utils/reply.js'
+import { countAnswersNeedingTriage } from '../utils/reply.js'
 import { formatLinkWithSecondaryText } from '../utils/string.js'
 
 /**
@@ -10,10 +10,10 @@ export class Consent extends Reply {
   /**
    * Answers in this consent response need triage
    *
-   * @returns {boolean} Answers need triage
+   * @returns {boolean} Has answers needing triage
    */
   get hasAnswersNeedingTriage() {
-    return hasAnswersNeedingTriage(this.healthAnswers)
+    return countAnswersNeedingTriage(this.healthAnswers) > 0
   }
 
   /**

app/models/patient-session.js

@@ -37,7 +37,8 @@ import {
 import {
   getConsentOutcome,
   getConsentHealthAnswers,
-  getConsentRefusalReasons
+  getConsentRefusalReasons,
+  countAnswersNeedingTriage
 } from '../utils/reply.js'
 import {
   getConsentOutcomeStatus,
@@ -614,6 +615,15 @@ export class PatientSession {
     return getConsentHealthAnswers(this)
   }
 
+  /**
+   * At least one answer in consent health answers needs triage
+   *
+   * @returns {number} Number of answers needing triage
+   */
+  get answersNeedingTriageCount() {
+    return countAnswersNeedingTriage(this.consentHealthAnswers)
+  }
+
   /**
    * Get responses with triage notes for consent health answers
    *

app/models/session.js

@@ -581,6 +581,21 @@ export class Session {
     }
   }
 
+  /**
+   * Get short name (without dates)
+   *
+   * @returns {string|undefined} Short name
+   */
+  get shortName() {
+    if (this.clinic) {
+      return `${this.programmeNames.titleCase} community clinic`
+    }
+
+    if (this.location) {
+      return `${this.programmeNames.titleCase} session at ${this.location.name}`
+    }
+  }
+
   /**
    * Get address
    *

app/utils/reply.js

@@ -280,7 +280,7 @@ export const getHealthAnswers = (vaccine, healthCondition) => {
  * @returns {string} Triage note
  */
 export const getTriageNote = (healthAnswers, healthCondition) => {
-  if (hasAnswersNeedingTriage(healthAnswers)) {
+  if (countAnswersNeedingTriage(healthAnswers)) {
     return healthConditions[healthCondition].triageNote
   }
 }
@@ -338,19 +338,17 @@ export const getRefusalReason = (type, decision) => {
  * Has health answers needing triage
  *
  * @param {object} healthAnswers - Health answers
- * @returns {boolean} Has health answers needing triage
+ * @returns {number} Number of health answers needing triage
  */
-export const hasAnswersNeedingTriage = (healthAnswers) => {
+export const countAnswersNeedingTriage = (healthAnswers) => {
   if (!healthAnswers) {
-    return false
+    return 0
   }
 
-  // Ignore answer to asthma question, as only its sub-questions get triaged
-  const nonConditionalAnswers = Object.fromEntries(
-    Object.entries(healthAnswers).filter(([key]) => key !== 'asthma')
-  )
+  const ignoredKeys = new Set(['asthma'])
 
-  return Object.values(nonConditionalAnswers).find(
-    (answer) => answer.answer === 'Yes'
-  )
+  return Object.entries(healthAnswers)
+    .filter(([key]) => !ignoredKeys.has(key))
+    .flatMap(([, answer]) => (Array.isArray(answer) ? answer : [answer]))
+    .filter((answer) => answer.answer === 'Yes').length
 }

app/views/_layouts/session.njk

@@ -1,11 +1,11 @@
 {% extends "_layouts/default.njk" %}
 
 {% block main %}
-  <div class="app-session-banner">
+  <div class="app-session-banner"{% if stickyBanner %} data-module="app-sticky"{% endif %}>
     <div class="nhsuk-width-container">
       {% block beforeContent %}{% endblock %}
 
-      <div class="nhsuk-main-wrapper nhsuk-main-wrapper--s">
+      <div class="nhsuk-main-wrapper app-main-wrapper--xs">
         {{ notificationBanner(success) if success }}
         {{ notificationBanner(message) if message }}
 
@@ -18,11 +18,7 @@
         </p>
         {% endif %}
       </div>
-    </div>
-  </div>
 
-  <div class="app-sticky-navigation app-sticky-navigation--reverse" data-module="app-sticky">
-    <div class="nhsuk-width-container">
       {{ appSecondaryNavigation({
         classes: "app-secondary-navigation--reverse",
         items: navigationItems
@@ -31,7 +27,7 @@
   </div>
 
   <div class="nhsuk-width-container">
-    <main class="nhsuk-main-wrapper" id="maincontent" role="main">
+    <main class="nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent" role="main">
       <form method="post" novalidate data-validate>
         {% block content %}
         {% endblock %}

app/views/patient-session/_consent.njk

@@ -101,21 +101,17 @@
       }) if parent.email or parent.tel }}
     {% endfor %}
   {% endif %}
-
-  {# Health answers #}
-  {% if patientSession.consentHealthAnswers %}
-    <hr class="nhsuk-section-break nhsuk-section-break--visible nhsuk-section-break--m">
-
-    {{ appHeading({
-      classes: "nhsuk-u-margin-bottom-2",
-      level: 4,
-      size: "s",
-      title: __("healthAnswers.label")
-    }) }}
-
-    {{ summaryList({
-      classes: "app-summary-list--full-width",
-      rows: healthAnswerRows(patientSession.consentHealthAnswers)
-    }) }}
-  {% endif %}
 {% endcall %}
+
+{# Health answers #}
+{{ summaryList({
+  card: {
+    classes: "nhsuk-card--warning" if patientSession.answersNeedingTriageCount,
+    heading: __mf("healthAnswers.count", {
+      count: patientSession.answersNeedingTriageCount
+    }),
+    headingLevel: 3
+  },
+  classes: "app-summary-list--full-width",
+  rows: healthAnswerRows(patientSession.consentHealthAnswers)
+}) if patientSession.consentHealthAnswers }}

app/views/patient-session/events.njk

@@ -1,7 +1,8 @@
 {% extends "_layouts/session.njk" %}
 
-{% set title = patient.fullName + " – " + __("patient.events.title") %}
+{% set title = patient.initials + " – " + session.shortName + " – " + __("patient.events.title") %}
 {% set heading = patientSession.patient.fullName %}
+{% set stickyBanner = true %}
 {% set view = "events" %}
 
 {% block beforeContent %}