Merge pull request #355 from nationalarchives/feature/221-priority-of…

…-download-as-xml-button

Redesign download links to give XML less prominence

ds_judgements_public_ui/sass/includes/_judgment_text_download_options.scss

@@ -0,0 +1,38 @@
+.judgment-download-options {
+    max-width: 90%;
+    margin: 0 auto calc($spacer__unit*3) auto;
+
+    @media (min-width: $grid__breakpoint-medium) {
+        max-width: 46rem;
+    }
+
+    &__header {
+        border-bottom: 4px solid $color__yellow;
+        padding-bottom: calc($spacer__unit * 0.5);
+        margin-bottom: calc($spacer__unit * 2);
+        display: inline-block;
+    }
+
+    &__options-list {
+        display: flex;
+        flex-direction: column;
+        gap: $spacer__unit;
+
+        @media (min-width: $grid__breakpoint-medium) {
+            flex-direction: row;
+        }
+    }
+
+    &__download-option {
+        border: 1px solid $color__yellow;
+        padding: $spacer__unit;
+    }
+
+    h3 {
+        margin-top: 0;
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+}

ds_judgements_public_ui/sass/includes/_judgment_text_toolbar.scss

@@ -12,11 +12,7 @@
     display: inline-block;
     text-decoration: none;
     outline-offset: 3px;
-    margin: 0 $spacer__unit $spacer__unit 0;
-
-    @media (min-width: $grid__breakpoint-small) {
-      margin-bottom: 0;
-    }
+    margin: 0;
   }
 
   &__return-link {
@@ -33,6 +29,7 @@
 
   &__download {
     display: inline-block;
+
   }
 
   &__container {
@@ -41,12 +38,13 @@
     > div {
       @media (max-width: $grid__breakpoint-small) {
         text-align: center;
+        display: block;
         padding: 0.25rem $spacer__unit;
       }
     }
 
     @media (min-width: $grid__breakpoint-small) {
-      text-align: center;
+      text-align: right;
     }
 
     @media (min-width: $grid__breakpoint-medium) {
@@ -58,3 +56,33 @@
     }
   }
 }
+
+.judgment-download {
+
+  &__option--pdf {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+    margin: 0 !important;
+    width: 100%;
+    text-align: center;
+  }
+
+  &__download-options {
+    color: $color__dark-grey;
+    font-size: 0.7rem;
+    font-style: italic;
+    margin: calc($spacer__unit * 0.5) 0 0 0;
+
+    a {
+      background-color: transparent;
+      color: $color__aqua-blue;
+      padding: 0;
+      display: inline;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}

ds_judgements_public_ui/sass/main.scss

@@ -20,6 +20,7 @@
 @import "includes/judgment_text_toolbar";
 @import "includes/judgment_text_source";
 @import "includes/judgment_text_service_introduction";
+@import "includes/judgment_text_download_options";
 @import "includes/standard_text_template";
 @import "includes/how_can_this_service_be_improved";
 @import "includes/back_to_top_link";

ds_judgements_public_ui/templates/includes/judgment_text_download_options.html

@@ -0,0 +1,26 @@
+{% load i18n %}
+<div id="download-options" class="judgment-download-options">
+    <h2 class="judgment-download-options__header">{% translate "judgment.downloadoptions.title" %}</h2>
+    <div class="judgment-download-options__options-list">
+        <div class="judgment-download-options__download-option">
+            <h3>
+                <a href="{% url 'detail_pdf' context.judgment_uri %}">
+                    {% translate "judgment.downloadoptions.pdf.cta" %}{{context.pdf_size}}
+                </a>
+            </h3>
+            <p>
+                {% translate "judgment.downloadoptions.pdf.description" %}
+            </p>
+        </div>
+        <div class="judgment-download-options__download-option">
+            <h3>
+                <a href="{% url 'detail_xml' context.judgment_uri %}">
+                    {% translate "judgment.downloadoptions.xml.cta" %}
+                </a>
+            </h3>
+            <p>
+                {% translate "judgment.downloadoptions.xml.description" %}
+            </p>
+        </div>
+    </div>
+</div>

ds_judgements_public_ui/templates/includes/judgment_text_toolbar.html

@@ -1,14 +1,16 @@
 {% load i18n %}
 <div class="judgment-toolbar">
     <div class="judgment-toolbar__container">
-        <div class="judgment-toolbar__return-link">
-            {% if request.args.origin == 'results' %}
+
+        {% if request.args.origin == 'results' %}
+            <div class="judgment-toolbar__return-link"></div>
                 <a href="{{ request.args.return_link }}">{% translate "judgment.back" %}</a>
-            {% endif %}
-        </div>
+            </div>
+        {% endif %}
+
         <div class="judgment-toolbar__download">
-            <a class="judgment-download__option--xml" role="button" draggable="false" href="{% url 'detail_xml' context.judgment_uri %}">{% translate "judgment.downloadasxml" %}</a>
             <a class="judgment-download__option--pdf" role="button" draggable="false" href="{% url 'detail_pdf' context.judgment_uri %}">{% translate "judgment.downloadaspdf" %}{{context.pdf_size}}</a>
+            <p class="judgment-download__download-options" role="note">{% translate "judgment.downloadoptions.shortcutlink" %}</p>
         </div>
     </div>
 </div>

ds_judgements_public_ui/templates/layout_judgment_html.html

@@ -40,6 +40,7 @@
     {% endblock %}
     <a id="js-back-to-top-link" class="back-to-top-link" href="#js-phase-banner">Back to top</a>
 </main>
+{% include 'includes/judgment_text_download_options.html' %}
 {% include 'includes/footer.html' %}
 </body>
 </html>