More product page tweaks (#348)

Author: frankieroberto

app/assets/sass/_overrides.scss

@@ -0,0 +1,6 @@
+
+.app-u-hide-on-mobile {
+  @include nhsuk-media-query($until: tablet) {
+    display: none;
+  }
+}

app/assets/sass/components/_button-group.scss

@@ -1,36 +1,86 @@
-.app-button-group {
-  @include nhsuk-responsive-margin(6, "bottom");
-
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: nhsuk-spacing(3) nhsuk-spacing(4);
-
-  .nhsuk-link {
-    @include nhsuk-font($size: 19, $line-height: 19px);
-    display: inline-block;
-    margin-bottom: nhsuk-spacing(2);
-    margin-top: nhsuk-spacing(2);
-    max-width: 100%;
-    text-align: center;
-  }
+@include nhsuk-exports("nhsuk/core/objects/button-group") {
+  // Button groups can be used to group buttons and links together as a group.
+  //
+  // Within a button group:
+  //
+  // - links are styled to line up visually with the buttons, including being
+  //   centre-aligned on mobile
+  // - spacing between the buttons and links is handled automatically, including
+  //   when they wrap across multiple lines
+  .app-button-group {
+    $horizontal-gap: nhsuk-spacing(4);
+    $vertical-gap: nhsuk-spacing(3);
 
-  .nhsuk-button {
-    margin-bottom: 0;
-    width: 100%;
-  }
+    // These need to be kept in sync with the button component's styles
+    $button-border-radius: $nhsuk-border-width-form-element * 2;
+    $button-shadow-size: $button-border-radius;
+    $button-padding-top-bottom-mobile: 8px;
+    $button-padding-top-bottom-desktop: 12px;
+
+    $link-spacing: nhsuk-spacing(2);
+
+    // Flexbox is used to center-align links on mobile, align everything along
+    // the baseline on tablet and above, and to removes extra whitespace that
+    // we'd get between the buttons and links because they're inline-blocks.
+    //
+    // Ideally we'd use `gap` with flexbox rather than having to do it all with
+    // margins, but unfortunately the support isn't there (yet) and @supports
+    // doesn't play nicely with it
+    // (https://github.com/w3c/csswg-drafts/issues/3559)
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @include nhsuk-responsive-margin(6, "bottom", $adjustment: $vertical-gap * -1);
 
-  @include nhsuk-media-query($from: tablet) {
-    flex-direction: row;
-    flex-wrap: wrap;
+    // Give links within the button group the same font-size and line-height
+    // as buttons.
+    //
+    // Because we want the focus state to be tight around the link text, we use
+    // margins where the buttons would use padding.
+    .nhsuk-link,
+    a:not(.nhsuk-button) {
+      display: inline-block;
+      // Prevent links overflowing their container in IE10/11 because of bug
+      // with align-items: center
+      max-width: 100%;
+      margin-top: $button-padding-top-bottom-desktop + $nhsuk-border-width-form-element;
+      margin-bottom: $button-padding-top-bottom-desktop + $nhsuk-border-width-form-element;
+      text-align: center;
+      @include nhsuk-font($size: 19);
 
+      @include nhsuk-media-query($until: tablet) {
+        margin-top: $link-spacing;
+        margin-bottom: $link-spacing + $vertical-gap;
+      }
+    }
+
+    // Reduce the bottom margin to the size of the vertical gap (accommodating
+    // the button shadow) – the 'lost' margin is moved to the button-group.
     .nhsuk-button {
-      width: auto;
+      margin-bottom: $vertical-gap + $button-shadow-size;
     }
 
-    .nhsuk-link {
-      text-align: left;
+    // On tablet and above, we also introduce a 'column gap' between the
+    // buttons and links in each row and left align links
+    @include nhsuk-media-query($from: tablet) {
+      // Cancel out the column gap for the last item in each row
+      margin-right: ($horizontal-gap * -1);
+
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: flex-start;
+
+      .nhsuk-button,
+      .nhsuk-link,
+      a {
+        margin-right: $horizontal-gap;
+      }
+
+      .nhsuk-link,
+      a:not(.nhsuk-button) {
+        text-align: left;
+      }
     }
   }
 }

app/assets/sass/components/_button.scss

@@ -12,6 +12,16 @@
   min-width: 80px;
 }
 
+// Make buttons full width on mobile
+// This is temporary until https://github.com/nhsuk/nhsuk-frontend/pull/1309 is merged
+.nhsuk-button {
+  width: 100%;
+
+  @include nhsuk-media-query($from: tablet) {
+    width: auto;
+  }
+}
+
 
 .app-button--loading {
   position: relative;

app/assets/sass/main.scss

@@ -1,6 +1,9 @@
 // Import NHS.UK frontend library
 @import 'node_modules/nhsuk-frontend/packages/nhsuk';
 
+// Local override classes
+@import 'overrides';
+
 // Components that are not in the NHS.UK frontend library
 @import 'components/list-border';
 @import 'components/related-nav';

app/views/apply/check.html

@@ -59,7 +59,7 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
           },
           {
             key: {
-              text: "Your name"
+              text: "Name"
             },
             value: {
               html: data.firstName + " " + data.lastName
@@ -76,7 +76,7 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
           },
           {
             key: {
-              text: "Your email"
+              text: "Email"
             },
             value: {
               text: data.email
@@ -90,23 +90,6 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
                 }
               ]
             }
-          },
-          {
-            key: {
-              text: "Registered clinician"
-            },
-            value: {
-              text: ("Yes" if data.clinician == "yes" else "No")
-            },
-            actions: {
-              items: [
-                {
-                  href: "/apply/contact-details",
-                  text: "Change",
-                  visuallyHiddenText: "clinician status"
-                }
-              ]
-            }
           }
         ]
       }) }}

app/views/apply/contact-details.html

@@ -19,7 +19,7 @@
 
       <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
 
-      <p>Use your personal nhs.net email or an <a href="https://digital.nhs.uk/services/care-identity-service/applications-and-services/apply-for-care-id/care-identity-email-domain-allow-list" target="_blank">NHS-approved email (opens in new tab)</a>.</p>
+      <p>Use your personal nhs.net email, not a pharmacy email.</p>
 
       <form action="/apply/check" method="post" novalidate="true">
 
@@ -54,7 +54,7 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
             "text": "Email address"
           },
           hint: {
-            text:"For example, [email protected] or [email protected]"
+            text:"For example, [email protected]"
           },
           "id": "email",
           "name": "email",
@@ -65,30 +65,6 @@ <h1 class="nhsuk-heading-l">{{ pageName }}</h1>
           } if emailError
         }) }}
 
-        {{ radios({
-          name: "clinician",
-          fieldset: {
-            legend: {
-              text: "Are you a registered clinician?"
-            }
-          },
-          hint: {
-            text: "We ask this so we can set you up with the right permissions."
-          },
-          value: data.clinician,
-          items: [
-            {
-              value: "yes",
-              text: "Yes"
-            },
-            {
-              value: "no",
-              text: "No"
-            }
-          ]
-        }) }}
-
-
         {{ button({
           "text": "Continue"
         }) }}

app/views/product-page.html

@@ -12,24 +12,24 @@
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet">
         <div class="nhsuk-hero__wrapper">
-          <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record NHS vaccinations</h1>
-
-          <!-- <p class="nhsuk-body">Some words here</p> -->
+          <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record vaccinations</h1>
 
           <p>Record COVID-19, flu, RSV and pertussis vaccinations.</p>
 
           <p class="nhsuk-body">Used by community pharmacies, NHS trusts and GPs.</p>
 
-          {{ button({
-            text: "Sign up for free",
-            href: "/apply/start",
-            classes: "nhsuk-button--reverse nhsuk-u-margin-bottom-3"
-          }) }}
+          <div class="app-button-group nhsuk-u-margin-bottom-0">
+            {{ button({
+              text: "Sign up for free",
+              href: "/apply/start",
+              classes: "nhsuk-button--reverse"
+            }) }}
 
-          <p class="nhsuk-u-margin-bottom-0">Or <a href="/okta-sign-in" class="nhsuk-link nhsuk-link--reverse">log in</a> if you've used it before</p>
+            <p class="nhsuk-body nhsuk-u-margin-bottom-0">or <a href="/okta-sign-in" class="nhsuk-link nhsuk-link--reverse nhsuk-u-font-weight-bold">log in</a></p>
+          </div>
         </div>
       </div>
-      <div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet nhsuk-u-padding-top-6">
+      <div class="nhsuk-grid-column-one-half nhsuk-u-one-half-tablet nhsuk-u-padding-top-6 app-u-hide-on-mobile">
         <img class="app-homepage-illustration" src="/images/homepage-illustration.png" alt="" role="presentation" style="width: 100%;">
       </div>
     </div>
@@ -41,7 +41,7 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record N
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-one-third">
           <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-2">Free to use</h2>
-          <p class="">Created and owned by the NHS.</p>
+          <p class="nhsuk-body">Created and owned by the NHS.</p>
         </div>
 
         <div class="nhsuk-grid-column-one-third">
@@ -157,21 +157,22 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
       <div class="nhsuk-grid-column-one-third">
         <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
           More than<br>
-          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">1.5 million</span><br> vaccinations recorded
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">1.4 million</span><br> vaccinations recorded
         </div>
       </div>
 
       <div class="nhsuk-grid-column-one-third">
         <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
           Over<br>
-          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">13,000  users</span><br>
-
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">13,000</span><br>
+          users
         </div>
       </div>
       <div class="nhsuk-grid-column-one-third">
         <div class="nhsuk-u-font-size-19 nhsuk-u-margin-top-2">
           Used by<br>
-          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">215 NHS trusts</span><br>
+          <span class="nhsuk-u-font-size-36 nhsuk-u-font-weight-bold">300+</span><br>
+          pharmacies and NHS trusts
 
         </div>
       </div>
@@ -185,10 +186,10 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
   <div class="nhsuk-main-wrapper nhsuk-u-padding-top-4 nhsuk-u-padding-bottom-4">
 
     <div class="nhsuk-grid-row">
-      <div class="nhsuk-grid-column-two-thirds">
+      <div class="nhsuk-grid-column-full-width">
 <div style="width: 100px; height: 100px; background-image: url('/images/pharmacist.jpg'); background-size: cover; border-radius: 50px; float: left;"></div>
-      <div style="margin-left: 150px; max-width: 400px;" class="nhsuk-body nhsuk-u-font-size-26 nhsuk-u-margin-top-2">
-        <blockquote class="nhsuk-u-padding-0 nhsuk-u-margin-0 nhsuk-u-margin-bottom-1">
+      <div style="margin-left: 150px; max-width: 700px;" class="nhsuk-body nhsuk-u-font-size-26 nhsuk-u-margin-top-2">
+        <blockquote class="nhsuk-u-padding-0 nhsuk-u-margin-0 nhsuk-u-margin-bottom-1 nhsuk-u-padding-top-3">
           “It's easy and quick to use. Our staff love it.”
         </blockquote>
 
@@ -211,10 +212,10 @@ <h3 class="nhsuk-heading-m app-numbered-heading">
 
           <h2 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">Switching from another pharmacy system?</h2>
 
-          <p>You can switch systems at any time, and use different systems for different pharmacies.</p> 
-            
+          <p>You can switch point of care systems at any time, and use different systems for different pharmacies.</p>
+
           <p>You will still have access to your previous system for at least 6 months so you can download reports.</p>
-          
+
           <p>Other questions? <a href="#">Get in touch</a>.</p>
 
         </div>