🎨 Styling tweaks from design review

nhsuk-archive · Nov 25, 2019 · 8e41bf5 · 8e41bf5
1 parent 915ef44
commit 8e41bf5
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 25 deletions.
diff --git a/app/views/includes/result-item.nunjucks b/app/views/includes/result-item.nunjucks
@@ -8,7 +8,7 @@
   {{ service.name }}
 </h2>
 
-<p>
+<p class="nhsuk-list nhsuk-u-margin-bottom-2">
   {% if service.address %}
     <span class="results__address results__address-lines">
       {{ service.address }}
@@ -23,15 +23,15 @@
 
 {% if service.address %}
   <p class="results__item__link">
-    <a class="maplink" href="{{service.mapUrl}}" class="maps_tracking">See map and directions<span class="nhsuk-u-visually-hidden"> for {{ service.name }} at {{ service.address }}</span></a>
+    <a class="maplink" href="{{service.mapUrl}}" class="maps_tracking">Map and directions<span class="nhsuk-u-visually-hidden"> for {{ service.name }} at {{ service.address }}</span></a>
   </p>
 {% endif %}
 
 {% if service.openingTimes %}
-  <details class="nhsuk-details. results__item__opening-times nhsuk-u-margin-bottom-2">
+  <details class="nhsuk-details results__item__opening-times">
     <summary class="nhsuk-details__summary">
       <span class="nhsuk-details__summary-text">
-        See opening times
+        Opening times
       </span>
     </summary>
     <div class="nhsuk-details__text">
@@ -52,7 +52,7 @@
   <details class="nhsuk-details results__item__service-details">
     <summary class="nhsuk-details__summary">
       <span class="nhsuk-details__summary-text">
-        See service information
+        Service information
       </span>
     </summary>
     <div class="nhsuk-details__text">

diff --git a/app/views/layout.nunjucks b/app/views/layout.nunjucks
@@ -100,7 +100,7 @@
 
     <div class="nhsuk-width-container">
       <main id="main-content" class="nhsuk-main-wrapper">
-      <div class="nhsuk-u-reading-width">
+      <div class="{{ 'nhsuk-u-reading-width' if not correctResultsParams }}">
         {% block content %}{% endblock %}
       </div>
       </main>

diff --git a/app/views/results.nunjucks b/app/views/results.nunjucks
@@ -23,22 +23,24 @@
 
 {% block content %}
 
-<h1 class="local-header--title--question">{{ resultsHeading }}</h1>
-
 <div class="results">
-  {% if resultsExplanation %}
-    <p class='explanation'>{{ resultsExplanation }}</p>
-  {% endif %}
 
-  {% if resultsOnwardsJourneyPartial %}
-    {% include resultsOnwardsJourneyPartial %}
-  {% endif %}
+  <div class="nhsuk-u-reading-width"> 
+    <h1 class="local-header--title--question nhsuk-u-reading-width">{{ resultsHeading }}</h1>
+
+    {% if resultsExplanation %}
+      <p class='explanation'>{{ resultsExplanation }}</p>
+    {% endif %}
+
+    {% if resultsOnwardsJourneyPartial %}
+        {% include resultsOnwardsJourneyPartial %}
+    {% endif %}
+  </div>
 
   <ol class="nhsuk-list results">
     {% for service in services %}
-      <li class="results__item results__item--nearby" data-index="{{loop.index}}">
-        <hr />
-        <div class="results__details results__details--nearby">
+      <li class="results__item results__item--nearby results__item nhsuk-u-padding-bottom-5 nhsuk-u-padding-top-5" data-index="{{loop.index}}">
+        <div class="results__details results__details--nearby nhsuk-u-reading-width">
           {% include "includes/result-item.nunjucks" %}
         </div>
       </li>

diff --git a/scss/app.scss b/scss/app.scss
@@ -12,3 +12,22 @@
 .nhsuk-list .nhsuk-icon {
 	margin-bottom: -10px;
 }
+
+.nhsuk-list.results {
+	padding-top: 24px;
+	border-bottom: 1px solid #d8dde0;
+
+	.results__item {
+		font-size: 16px;
+		border-top: 1px solid #d8dde0;
+		margin-bottom: 0;
+	}
+
+	.nhsuk-details {
+		margin-bottom: 8px;
+
+		&:last-child {
+			margin-bottom: 0;
+		}		
+	}
+}
diff --git a/test/integration/resultsPage.js b/test/integration/resultsPage.js
@@ -81,14 +81,14 @@ describe('Results page results', () => {
         const searchResultsOpeningTimes = $('.nhsuk-details__summary-text');
         const searchResultsService = $('.results__item__service-details');
 
-        expect(searchResultsOpeningTimes.text()).to.contain('See opening times');
-        expect(searchResultsService.text()).to.contain('See service information');
+        expect(searchResultsOpeningTimes.text()).to.contain('Opening times');
+        expect(searchResultsService.text()).to.contain('Service information');
 
         searchResultsMapLink.toArray().forEach((result, index) => {
           const name = getTextOnlyFromElement($('.results__name').eq(index));
           const address = getTextOnlyFromElement($('.results__address.results__address-lines').eq(index));
           const mapLinkText = $(result).text().replace('\n', '');
-          expect(mapLinkText).to.equal(`See map and directions for ${name} at ${address}`);
+          expect(mapLinkText).to.equal(`Map and directions for ${name} at ${address}`);
         });
 
         expect(searchResultsDistance).to.have.lengthOf(30);

diff --git a/test/integration/resultsPageKit16to24.js b/test/integration/resultsPageKit16to24.js
@@ -64,12 +64,12 @@ describe('Results page for kits for 16 to 24 year olds', () => {
       const openingTimes = getTextOnlyFromElement($('.results__item__opening-times span').first());
       const serviceInfo = getTextOnlyFromElement($('.results__item__service-details span').first());
 
-      expect(openingTimes).to.equal('See opening times');
-      expect(serviceInfo).to.equal('See service information');
+      expect(openingTimes).to.equal('Opening times');
+      expect(serviceInfo).to.equal('Service information');
       expect(phone).to.equal('0113 244 4209');
       expect(name).to.equal('MESMAC - Leeds');
       expect(address).to.equal('22/23 Blayds Yard, Leeds, West Yorkshire, LS1 4AD');
-      expect(mapLink).to.equal(`See map and directions for ${name} at ${address}`);
+      expect(mapLink).to.equal(`Map and directions for ${name} at ${address}`);
       expect(distance).to.equal(`${name} is 0.4 miles away`);
     });
   });

diff --git a/test/integration/resultsPageKitOver25.js b/test/integration/resultsPageKitOver25.js
@@ -62,11 +62,11 @@ describe('Results page for kits in over 25 year olds', () => {
       const openingTimes = getTextOnlyFromElement($('.results__item__opening-times span').first());
       const serviceInfo = getTextOnlyFromElement($('.results__item__service-details span').first());
 
-      expect(openingTimes).to.equal('See opening times');
+      expect(openingTimes).to.equal('Opening times');
       expect(serviceInfo).to.equal('');
       expect(name).to.equal('Ma Manning (Pharmacy) Ltd');
       expect(address).to.equal('97 Lidgett Lane, Leeds, Leeds, West Yorkshire, LS8 1QR');
-      expect(mapLink).to.equal(`See map and directions for ${name} at ${address}`);
+      expect(mapLink).to.equal(`Map and directions for ${name} at ${address}`);
       expect(distance).to.equal(`${name} is 3 miles away`);
       expect(telephone).to.equal('0113 266 1786');
     });