diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss index 648400d94..76c0346ed 100644 --- a/app/assets/stylesheets/components/_card.scss +++ b/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"); + } +} diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss index ed91ed6ea..48cfbbe81 100644 --- a/app/assets/stylesheets/components/_filters.scss +++ b/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}; diff --git a/app/assets/stylesheets/components/_session-banner.scss b/app/assets/stylesheets/components/_session-banner.scss index 4187fb5c6..d63ccc317 100644 --- a/app/assets/stylesheets/components/_session-banner.scss +++ b/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); + } + } } diff --git a/app/assets/stylesheets/components/_sticky-navigation.scss b/app/assets/stylesheets/components/_sticky-navigation.scss index a301ae660..d4f26f09f 100644 --- a/app/assets/stylesheets/components/_sticky-navigation.scss +++ b/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; - } -} diff --git a/app/assets/stylesheets/components/_summary-list.scss b/app/assets/stylesheets/components/_summary-list.scss index 509d782b8..3af4d4edb 100644 --- a/app/assets/stylesheets/components/_summary-list.scss +++ b/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; + } +} diff --git a/app/assets/stylesheets/core/objects/_grid.scss b/app/assets/stylesheets/core/objects/_grid.scss index 781314ace..b27a58473 100644 --- a/app/assets/stylesheets/core/objects/_grid.scss +++ b/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)}; } } } diff --git a/app/assets/stylesheets/core/objects/_index.scss b/app/assets/stylesheets/core/objects/_index.scss index 013d325a5..e9b628435 100644 --- a/app/assets/stylesheets/core/objects/_index.scss +++ b/app/assets/stylesheets/core/objects/_index.scss @@ -1 +1,2 @@ @forward "grid"; +@forward "main-wrapper"; diff --git a/app/assets/stylesheets/core/objects/_main-wrapper.scss b/app/assets/stylesheets/core/objects/_main-wrapper.scss new file mode 100644 index 000000000..f5bda53e8 --- /dev/null +++ b/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); +} diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss index ba3c60557..65f71c3bb 100644 --- a/app/assets/stylesheets/vendor/nhsuk-frontend/overrides/_summary-list.scss +++ b/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"); diff --git a/app/controllers/reply.js b/app/controllers/reply.js index 094dc2cc7..4721de311 100644 --- a/app/controllers/reply.js +++ b/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`]: { diff --git a/app/locales/en.js b/app/locales/en.js index 547a014b5..2a537e6ac 100644 --- a/app/locales/en.js +++ b/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: { diff --git a/app/models/consent.js b/app/models/consent.js index f439c2110..6529dac4b 100644 --- a/app/models/consent.js +++ b/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 } /** diff --git a/app/models/patient-session.js b/app/models/patient-session.js index cf461998c..f89275bc2 100644 --- a/app/models/patient-session.js +++ b/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 * diff --git a/app/models/session.js b/app/models/session.js index e2c01c260..be8fa323b 100644 --- a/app/models/session.js +++ b/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 * diff --git a/app/utils/reply.js b/app/utils/reply.js index 3f65548f5..dc5460d7b 100644 --- a/app/utils/reply.js +++ b/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 } diff --git a/app/views/_layouts/session.njk b/app/views/_layouts/session.njk index 14fbd02e9..00300215a 100644 --- a/app/views/_layouts/session.njk +++ b/app/views/_layouts/session.njk @@ -1,11 +1,11 @@ {% extends "_layouts/default.njk" %} {% block main %} -
+
{% block beforeContent %}{% endblock %} -
+
{{ notificationBanner(success) if success }} {{ notificationBanner(message) if message }} @@ -18,11 +18,7 @@

{% endif %}
-
-
-
-
{{ appSecondaryNavigation({ classes: "app-secondary-navigation--reverse", items: navigationItems @@ -31,7 +27,7 @@
-
+
{% block content %} {% endblock %} diff --git a/app/views/patient-session/_consent.njk b/app/views/patient-session/_consent.njk index 962cb5cb0..4a08c5501 100644 --- a/app/views/patient-session/_consent.njk +++ b/app/views/patient-session/_consent.njk @@ -101,21 +101,17 @@ }) if parent.email or parent.tel }} {% endfor %} {% endif %} - - {# Health answers #} - {% if patientSession.consentHealthAnswers %} -
- - {{ 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 }} diff --git a/app/views/patient-session/events.njk b/app/views/patient-session/events.njk index e7ae571bd..61a32d425 100644 --- a/app/views/patient-session/events.njk +++ b/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 %} diff --git a/app/views/patient-session/show.njk b/app/views/patient-session/show.njk index 81d86666b..98616af31 100644 --- a/app/views/patient-session/show.njk +++ b/app/views/patient-session/show.njk @@ -1,13 +1,14 @@ {% extends "_layouts/session.njk" %} -{% set title = patient.initials + " – " + session.location.name %} +{% set title = patient.initials + " – " + session.shortName %} {% set heading = patientSession.patient.fullName %} +{% set stickyBanner = true %} {% block beforeContent %} {{ breadcrumb({ classes: "nhsuk-breadcrumb--reverse", items: [{ - text: session.name, + text: session.shortName, href: session.uri }, { text: __("session." + activity + ".label"), @@ -22,16 +23,7 @@
{{ summaryList({ - card: { - heading: patientSession.patient.fullName, - headingClasses: "nhsuk-u-margin-bottom-2", - headingLevel: 3, - headingSize: "s", - href: patient.uri + "?referrer=" + referrer, - secondary: true - }, - classes: "app-summary-list--full-width", - border: false, + classes: "app-summary-list--full-width-at-large-desktop", rows: summaryRows(patient, { nhsn: { changeLabel: "the child’s NHS number", diff --git a/app/views/session/activity.njk b/app/views/session/activity.njk index f63441881..19cb14066 100644 --- a/app/views/session/activity.njk +++ b/app/views/session/activity.njk @@ -2,9 +2,9 @@ {% extends "_layouts/session.njk" %} -{% set title = session.name + " – " + __("session." + view + ".title") %} -{% set heading = session.name %} -{% set caption = session.formatted.yearGroups %} +{% set title = session.shortName + " – " + __("session." + view + ".title") %} +{% set heading = session.shortName %} +{% set caption = session.formatted.date + " – " + session.formatted.yearGroups %} {% block content %} {% if (view == "record") and not session.isActive %} diff --git a/app/views/session/show.njk b/app/views/session/show.njk index e676b44a9..fa1d5c059 100644 --- a/app/views/session/show.njk +++ b/app/views/session/show.njk @@ -1,8 +1,8 @@ {% extends "_layouts/session.njk" %} -{% set title = session.name %} +{% set title = session.shortName %} {% set heading = title %} -{% set caption = session.formatted.yearGroups %} +{% set caption = session.formatted.date + " – " + session.formatted.yearGroups %} {% block content %} {{ warningCallout({