Reduce the amount of scrolling need within session pages

Author: paulrobertlloyd

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/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/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/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/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 %}

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"),