EL-1764: Add ability to print FALA results page

fala/assets-src/sass/main.scss

@@ -29,6 +29,12 @@ $laa-dev-colour: govuk-colour("pink");
   }
 }
 
+@media print {
+  a[href]:after {
+    content: none !important;
+  }
+}
+
 .fala-tickbox-columns_new .govuk-checkboxes__item {
   // Ensure items do not break across columns
   break-inside: avoid;
@@ -130,3 +136,37 @@ body.fala-dev {
   font-size: 19px;
   -webkit-font-smoothing: antialiased;
 }
+
+.print-link__background, .print-link__button {
+  background: none;
+  background-size: 16px 16px;
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  text-decoration: none;
+}
+
+.print-link__button:hover {
+  background-color: govuk-colour("light-grey");
+}
+
+.print-link__icon {
+  width: 16px; 
+  height: 18px; 
+  vertical-align: middle; 
+  margin-right: 8px;
+  margin-left: 5px;
+}
+
+.print-link__button {
+  border: 1px solid govuk-colour("dark-grey");
+  color: $govuk-link-colour;
+  cursor: pointer;
+  margin: govuk-spacing(0);
+
+  &:focus {
+    @include govuk-focused-text;
+    background-color: $govuk-focus-colour;
+    border-color: transparent;
+  }
+}

fala/templates/adviser/_footer.html

@@ -1,4 +1,4 @@
-<footer class="govuk-footer" role="contentinfo">
+<footer class="govuk-footer govuk-!-display-none-print" role="contentinfo">
   <div class="govuk-width-container ">
     <div class="govuk-footer__meta">
       <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">

fala/templates/adviser/_research_banner.html

@@ -1,4 +1,4 @@
-<div class="govuk-grid-column-two-thirds">
+<div class="govuk-grid-column-two-thirds govuk-!-display-none-print">
   <div class="govuk-panel research-panel govuk-!-margin-bottom-6 govuk-!-padding-3">
   <span class="govuk-heading-s govuk-!-margin-bottom-2">
     Help improve this legal adviser search

fala/templates/adviser/adviser_base.html

@@ -42,7 +42,7 @@
 {% endblock %}
 
 {% block global_subheader %}
-  <aside class="govuk-phase-banner ">
+  <aside class="govuk-phase-banner govuk-!-display-none-print">
     <p class="govuk-phase-banner__content">
       <strong class="govuk-tag govuk-phase-banner__content__tag">
         {% if ENVIRONMENT == "dev" %}
@@ -97,4 +97,13 @@ <h1 class="govuk-heading-xl govuk-!-margin-top-7">
       );
     });
   </script>
+
+  <script nonce="{{request.csp_nonce}}">
+    const printResultsPage = document.getElementById("printButton");
+    if (printResultsPage) {
+      printResultsPage.addEventListener("click", () => {
+        window.print();
+      })
+    };
+  </script>
 {% endblock %}

fala/templates/adviser/results.html

@@ -6,7 +6,7 @@
 
 {% block content %}
   <div class="govuk-grid-column-full">
-    <div id="google_translate_element" class="govuk-!-margin-bottom-6"></div>
+    <div id="google_translate_element" class="govuk-!-margin-bottom-6 govuk-!-display-none-print"></div>
   </div>
   {% if FEATURE_FLAG_SURVEY_MONKEY %}
     {% include 'adviser/_research_banner.html' %}
@@ -23,7 +23,7 @@ <h1 class="govuk-heading-xl">Search results</h1>
     {% include 'adviser/_scotland_warning.html' %}
   {% endif %}
   <div class="govuk-grid-column-two-thirds">
-    <div class="laa-fala__grey-box govuk-!-margin-bottom-6">
+    <div class="laa-fala__grey-box govuk-!-margin-bottom-6 govuk-!-display-none-print">
       <ul class="govuk-list" role="list">
         {% if form.postcode.value() %}
           <li class="govuk-body" role="listitem">Postcode:<span class="notranslate"> {{ form.postcode.value() }}</span></li>
@@ -54,6 +54,14 @@ <h1 class="govuk-heading-xl">Search results</h1>
         }) }}
       </form>
     </div>
+
+    <div class="print-link__background govuk-!-display-none-print govuk-!-margin-top-3 govuk-!-margin-bottom-5">
+      <button id="printButton" class="govuk-link govuk-body-s print-link__button">
+        <img src="/static/images/icon-print.png" alt="Print Icon" class="print-link__icon">
+        Print this page
+      </button>
+    </div>
+
     <span class="govuk-body results-header">
     {% if data.count > 0 %}
       {% if data.origin %}
@@ -121,13 +129,15 @@ <h3 class="govuk-heading-s govuk-!-margin-top-4 govuk-!-margin-bottom-2">{{ _('C
               </ul>
             </div>
             {% endif %}
-            <a class="govuk-link" class="url" target="_blank" rel="noopener" href="https://www.google.com/maps/search/?{{ item|google_map_params|urlencode }}">
+            <a class="govuk-link govuk-!-display-none-print" class="url" target="_blank" rel="noopener" href="https://www.google.com/maps/search/?{{ item|google_map_params|urlencode }}">
               View on map (opens in new tab)
             </a>
           </li>
         {% endfor %}
       </ul>
-      {{ govukPagination(pagination) }}
+      <nav class="govuk-!-display-none-print"> 
+        {{ govukPagination(pagination) }}
+      </nav>
     {% endif %}
   </div>
 {% endblock %}

gulpfile.js

@@ -16,9 +16,11 @@ const jsPath = [
 // FALA css & GOVUK css - because we import GOVUK scss into same file in order to override/add to GOVUK classes
 const cssPath = 'fala/assets-src/sass/*.scss';
 
-// GOVUK font & images only - because we have no FALA assets any more
+// GOVUK font & images 
 const assetPath = 'node_modules/govuk-frontend/dist/govuk/assets/**';
 
+// Icon for 'print this page' button
+const imagePath =   'fala/assets-src/images/icon-print.png';
 
  function jsTask() {
   return src(jsPath)
@@ -51,9 +53,15 @@ function assetTask() {
   .pipe(dest('fala/assets'));
 }
 
+function imageTask() {
+  return src(imagePath, { encoding: false })
+  .pipe(dest('fala/assets/images'));
+}
+
 exports.jsTask = jsTask;
 exports.cssTask = cssTask;
 exports.assetTask = assetTask;
+exports.imageTask = imageTask;
 
 // build/execute the tasks
-exports.build = parallel(jsTask, cssTask, assetTask);
+exports.build = parallel(jsTask, cssTask, assetTask, imageTask);