Merge pull request #1636 from nationalarchives/FCL-448/atom-feed-link…

…-refinements Fcl 448/atom feed link refinements
nationalarchives · Nov 27, 2024 · 26f3525 · 26f3525
2 parents 65231cf + 695ccc9
commit 26f3525
Show file tree

Hide file tree

Showing 14 changed files with 296 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -284,7 +284,7 @@ docker/*
 
 /ds_judgements_public_ui/static/css/**/*.css
 /ds_judgements_public_ui/static/css/**/*.css.map
-/ds_judgements_public_ui/static/js/**/*.js
+/ds_judgements_public_ui/static/js/dist/**/*.js
 
 !/ds_judgements_public_ui/static/css/includes/govuk-country-and-territory-autocomplete/location-autocomplete.min.css
 

diff --git a/ds_judgements_public_ui/sass/includes/_atom_feed.scss b/ds_judgements_public_ui/sass/includes/_atom_feed.scss
@@ -0,0 +1,11 @@
+.atom-feed {
+  &__list {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      margin-bottom: $space-4;
+    }
+  }
+}
diff --git a/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss b/ds_judgements_public_ui/sass/includes/_copy_to_clipboard_link.scss
@@ -0,0 +1,53 @@
+.copy-to-clipboard-link {
+  position: relative;
+
+  &:hover {
+    .copy-to-clipboard-link__tooltip {
+      opacity: 1;
+    }
+  }
+
+  &__tooltip {
+    position: absolute;
+    top: 40px;
+    left: -30px;
+
+    width: 165px;
+    padding: $space-1 $space-2;
+
+    font-size: $typography-sm-text-size;
+    text-align: center;
+    text-decoration: underline;
+
+    opacity: 0;
+    background: $color-white;
+    border: 1px solid $color-grey;
+    border-radius: 5px;
+
+    transition: opacity 0.3s ease;
+
+    &::after {
+      content: "";
+
+      position: absolute;
+      top: -5px;
+      right: 50%;
+      transform: rotate(-45deg);
+
+      width: 8px;
+      height: 8px;
+      margin-right: -5px;
+
+      background: $color-white;
+      border-top: 1px solid $color-grey;
+      border-right: 1px solid $color-grey;
+    }
+
+    &--copied {
+      left: 27px;
+      width: auto;
+      color: $color-dark-grey;
+      text-decoration: none;
+    }
+  }
+}
diff --git a/ds_judgements_public_ui/sass/includes/_result_controls.scss b/ds_judgements_public_ui/sass/includes/_result_controls.scss
@@ -1,16 +1,20 @@
 .result-controls {
   display: inline-block;
-  margin: $space-4 0 0;
   text-align: left;
 
   form {
     display: flex;
     flex-direction: column;
+    gap: $space-4;
 
     > div {
       display: flex;
       flex-direction: column;
-      align-items: stretch;
+      gap: $space-3;
+    }
+
+    @media (min-width: $grid-breakpoint-extra-large) {
+      gap: 0;
     }
 
     @media (min-width: $grid-breakpoint-extra-large) {
@@ -21,7 +25,6 @@
 
   &__label {
     display: block;
-    margin-bottom: $space-2;
     font-family: $font-roboto;
     font-size: $typography-md-text-size;
   }
@@ -30,14 +33,17 @@
     @include select;
 
     display: inline-block;
+
     width: auto;
     min-width: auto;
+    margin: 0;
     padding-right: $space-6;
   }
 
   &__button {
     @include call-to-action-button;
 
+    max-height: 34px;
     margin: 0;
     padding: $space-2 $space-3;
 
@@ -48,7 +54,7 @@
     outline-color: $color-dark-blue;
 
     @media (min-width: $grid-breakpoint-extra-large) {
-      margin: $space-9 0 $space-4 0;
+      margin-top: auto;
     }
   }
 

diff --git a/ds_judgements_public_ui/sass/includes/_results.scss b/ds_judgements_public_ui/sass/includes/_results.scss
@@ -12,17 +12,30 @@
   &__result-header {
     @media (min-width: $grid-breakpoint-large) {
       flex: 1;
-      margin-bottom: $space-4;
     }
   }
 
   &__result-atom-feed-button {
     display: flex;
-    gap: $space-3;
-    align-items: center;
+    flex-direction: column;
+    padding-right: $space-6;
+
+    label {
+      font-family: $font-roboto;
+      font-size: $typography-md-text-size;
+    }
+
+    a {
+      display: flex;
+      gap: $space-1;
+      align-items: center;
+
+      height: 33px;
+      margin-right: auto;
+    }
 
     @media (min-width: $grid-breakpoint-large) {
-      margin-bottom: $space-6;
+      gap: $space-3;
     }
   }
 
@@ -38,6 +51,9 @@
     display: flex;
     flex-direction: column;
     gap: $space-4;
+
+    padding-bottom: $space-4;
+
     border-bottom: 1px solid $color-yellow;
 
     @media (min-width: $grid-breakpoint-extra-large) {

diff --git a/ds_judgements_public_ui/sass/includes/_variables.scss b/ds_judgements_public_ui/sass/includes/_variables.scss
@@ -16,6 +16,8 @@ $color-select-hover-border: #888;
 // Blues
 $color-emphasis-background: lighten($color-highlight-blue, 40);
 $color-banner-link: #037091;
+$color-information-text-background: #dfeef8;
+$color-information-text-border: #498abf;
 
 // Purples
 $color-banner-link-visited: #4c2c92;

diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_details.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_details.scss
@@ -1,4 +1,5 @@
-.govuk-details {
+.govuk-details,
+.govuk-details--compact {
   margin-top: $space-8;
   margin-bottom: $space-8;
   padding: $space-2;
@@ -7,6 +8,11 @@
   border: 3px solid $color-aqua-blue;
 }
 
+.govuk-details--compact {
+  margin: $space-2 0;
+  border: 0;
+}
+
 .govuk-details:not([open]) > div {
   display: none;
 }

diff --git a/ds_judgements_public_ui/sass/includes/govuk_overrides/_warning_text.scss b/ds_judgements_public_ui/sass/includes/govuk_overrides/_warning_text.scss
@@ -38,6 +38,11 @@
   border-left: 0.5rem $color-yellow solid;
 }
 
+.govuk-warning-text.govuk-warning-text--information {
+  background-color: $color-information-text-background;
+  border-left: 0.5rem $color-information-text-border solid;
+}
+
 .govuk-warning-text__confirmation {
   background-color: $color-warning-text-confirmation-background;
   border-left: 0.5rem $color-structured-search-date-error-message-text solid;

diff --git a/ds_judgements_public_ui/sass/main.scss b/ds_judgements_public_ui/sass/main.scss
@@ -46,6 +46,7 @@ $govuk-focus-colour: $color-focus-blue-outline;
 @import "includes/notification_message";
 @import "includes/service_introduction";
 @import "includes/standard_text_template";
+@import "includes/copy_to_clipboard_link";
 
 // Cookies
 @import "includes/cookie_banner_overrides";
@@ -75,6 +76,7 @@ $govuk-focus-colour: $color-focus-blue-outline;
 @import "includes/homepage_browse";
 
 // Pages
+@import "includes/atom_feed";
 @import "includes/court_or_tribunal";
 @import "includes/courts_and_tribunals";
 

diff --git a/ds_judgements_public_ui/static/js/src/app.js b/ds_judgements_public_ui/static/js/src/app.js
@@ -5,4 +5,5 @@ import "./modules/document_navigation_links";
 import "./modules/location_picker";
 import "./modules/transactional_licence_form";
 import "./modules/document_paragraph_tooltip_anchors";
+import "./modules/copy_link_tooltip";
 initAll();
diff --git a/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js b/ds_judgements_public_ui/static/js/src/modules/copy_link_tooltip.js
@@ -0,0 +1,45 @@
+const copyLinkToClipboard = function (event, textToCopy) {
+    event.preventDefault();
+    event.stopPropagation();
+    navigator.clipboard.writeText(textToCopy);
+};
+
+const createTooltipElement = function (text) {
+    const element = document.createElement("span");
+
+    element.classList.add("copy-to-clipboard-link__tooltip");
+    element.innerHTML = text;
+
+    return element;
+};
+
+const addCopyLinkTooltip = function (link) {
+    if (!link || !(link instanceof HTMLElement)) return;
+
+    const tooltipText = link.dataset.copyLinkTooltip;
+
+    const tooltip = createTooltipElement(tooltipText);
+
+    link.append(tooltip);
+
+    link.addEventListener("click", function (event) {
+        copyLinkToClipboard(event, link.href);
+        tooltip.innerHTML = "Copied!";
+        tooltip.classList.add("copy-to-clipboard-link__tooltip--copied");
+
+        setTimeout(() => {
+            tooltip.innerHTML = tooltipText;
+            tooltip.classList.remove("copy-to-clipboard-link__tooltip--copied");
+        }, 3000);
+    });
+};
+
+const setupCopyLinkTooltips = function () {
+    const links = document.querySelectorAll("[data-copy-link-tooltip]");
+
+    links.forEach(function (link) {
+        addCopyLinkTooltip(link);
+    });
+};
+
+document.addEventListener("DOMContentLoaded", setupCopyLinkTooltips);
diff --git a/ds_judgements_public_ui/templates/includes/result_atom_feed_button.html b/ds_judgements_public_ui/templates/includes/result_atom_feed_button.html
@@ -1,5 +1,8 @@
 {% load static %}
 <div class="results__result-atom-feed-button">
-  <img src="{% static "fontawesome-svgs/rss.svg" %}" width="20" height="20" alt=""/>
-  <a href="{% url 'search-feed' %}?{{ query_param_string }}" >Subscribe to these results</a>
+  <label>Subscribe to these results</label>
+  <a href="{% url 'search-feed' %}?{{ query_param_string }}" data-copy-link-tooltip="Copy link and paste into your Atom feed app" class="copy-to-clipboard-link">
+    <img src="{% static "fontawesome-svgs/rss.svg" %}" width="20" height="20" alt=""/>
+    Atom feed
+  </a>
 </div>
diff --git a/ds_judgements_public_ui/templates/pages/atom_feed.html b/ds_judgements_public_ui/templates/pages/atom_feed.html
@@ -0,0 +1,99 @@
+{% extends "layouts/static_content.html" %}
+{% load query_filters court_utils %}
+
+{% block static_content %}
+  <div class="atom-feed">
+    <div class="govuk-grid-row">
+      <div class="govuk-grid-column-one-third">
+        <div class="anchor-links">
+          <details class="govuk-details--compact">
+            <summary class="govuk-details__summary">
+              <span class="govuk-details__summary-text">What is an Atom feed?</span>
+            </summary>
+            <div class="govuk-details__text">
+              <p>An Atom feed is a data format that contains the latest content from a website, blog, or podcast. You can use feeds to <strong>subscribe</strong> to websites and get the <strong>latest content in one place</strong>.</p>
+
+              <p>
+                <strong>Feeds put you in control</strong>
+                <br/>
+
+                Unlike social media apps, there is no algorithm deciding what you see or read. You always get the latest content.
+              </p>
+
+              <p>
+                <strong>Feed are private by design</strong>
+                <br/>
+
+                No one owns web feeds, so no one is harvesting your personal information and profiting by selling it to advertisers.
+              </p>
+
+              <p>
+                <strong>Feeds are spam-proof</strong>
+                <br/>
+
+                Had enough? Easy, just unsubscribe from the feed.
+              </p>
+
+              <p>
+                All you need to do to get started is to add the URL (web address) for this feed to a special app called a newsreader. Visit <a href="">About Feeds</a> to get started with newsreaders and subscribing. It’s free.
+              </p>
+
+              <p>
+                For more information on customising this feed, check our <a href="">API documentation</a>.
+              </p>
+            </div>
+          </details>
+
+        </div>
+
+      </div>
+      <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-warning-text govuk-warning-text--text-only govuk-warning-text--information">
+          <span class="govuk-warning-text__text">
+            <span class="govuk-visually-hidden">Information</span>
+            <strong>Find Case Law Atom feed</strong><br/><br/>
+            This is an Atom feed of documents in the Find Case Law service, sometimes also known as an RSS feed. Subscribe by copying the URL from the address bar into your newsreader app.
+          </span>
+        </div>
+        <h1>Subscribe to your search results</h1>
+        <h2>
+          {% if query %}
+            For "{{ query }}"
+          {% endif %}
+
+          {% for key, value in filters %}
+            {% if key == 'court' or key == 'tribunal' %}
+              {% for item in value %}
+                <br/>
+                From "{{ item|get_court_name }}"
+              {% endfor %}
+            {% elif key != 'query' %}
+              <br/>
+              From "{{ value }}"
+            {% endif %}
+          {% endfor %}
+        </h2>
+
+        <p>Sorted by date the document was first published by the court (newest first)</p>
+
+        <p>This Atom feed will provide the latest updates from the Find Case Law service, operated by The National Archives.</p>
+
+        <h3>Atom feed for your search results</h3>
+
+        <p>This will dynamically update when the link has been added to your Atom feed app.</p>
+
+        <ul class="atom-feed__list">
+          {% for result in search_results %}
+            <li>
+              <a href="{% url 'detail' result.uri %}?{{ query_param_string }}">
+                {{ result.name }}
+              </a>
+              <br/>
+              {{ result.date|date:"d M Y" }}
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  </div>
+{% endblock static_content %}