Update record revealed styles, fix some buttons (#1366)

nationalarchives · Oct 16, 2023 · 1820537 · 1820537
2 parents e7232e2 + 974459b
commit 1820537
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 159 deletions.
diff --git a/sass/etna.scss b/sass/etna.scss
@@ -174,11 +174,37 @@ Modified to match the existing site (for now)
     padding-bottom: 0;
 }
 
+.tna-button-group {
+    &--full {
+        justify-content: stretch;
+
+        @include media.on-mobile {
+            flex-direction: column;
+
+            align-items: stretch;
+        }
+
+        .tna-button {
+            margin: 0;
+
+            flex: 1;
+        }
+    }
+}
+
 .tna-hero {
     margin-top: 1rem;
     margin-bottom: 2rem;
 }
 
+.tna-heading {
+    &--no-link-arrow {
+        &::after {
+            display: none !important;
+        }
+    }
+}
+
 .tna-message {
     margin-top: 2rem;
     margin-bottom: 3rem;
@@ -326,6 +352,10 @@ Modified to match the existing site (for now)
     }
 }
 
+.tna-container--centred {
+    justify-content: center;
+}
+
 .highlight-gallery {
     color: #fff;
     .tna-heading {

diff --git a/sass/includes/_buttons.scss b/sass/includes/_buttons.scss
@@ -1,23 +1,23 @@
 .tna-button {
     text-decoration: none;
-    background-color: $color__navy !important;
-    color: $color__white;
-    border: 0;
-    padding: 1rem 1.3rem;
+    // background-color: $color__navy !important;
+    // color: $color__white;
+    // border: 0;
+    // padding: 1rem 1.3rem;
     font-weight: bold;
     margin: 0.5rem 0;
-    border: none;
+    // border: none;
 
     &__target-blank-label {
         display: block;
         font-size: 0.7rem;
     }
 
     &:hover {
-        background-color: $color__white;
-        color: $color__grey-700;
-        outline: 0.1875rem solid $color__grey-700;
-        outline-offset: 0.125rem;
+        // background-color: $color__white;
+        // color: $color__grey-700;
+        // outline: 0.1875rem solid $color__grey-700;
+        // outline-offset: 0.125rem;
     }
 
     // &:focus {

diff --git a/sass/tna-toolkit/_buttons.scss b/sass/tna-toolkit/_buttons.scss
@@ -1,27 +1,27 @@
 .tna-button {
-    background-color: $color__dark !important;
-    text-decoration: none;
-    color: $color__white !important;
-    border: $default__border;
-    padding: 0.5em 0.9em;
+    // background-color: $color__dark !important;
+    // text-decoration: none;
+    // color: $color__white !important;
+    // border: $default__border;
+    // padding: 0.5em 0.9em;
     display: inline-block;
     min-width: 24px;
     text-align: center;
 
     &:visited,
     &:active {
-        background-color: $color__dark !important;
-        color: $color__white !important;
+        // background-color: $color__dark !important;
+        // color: $color__white !important;
     }
 
     &:hover {
-        background-color: $color__white !important;
-        color: $color__dark !important;
-        text-decoration: none;
+        // background-color: $color__white !important;
+        // color: $color__dark !important;
+        // text-decoration: none;
     }
 
     &:focus {
-        @include focus-default;
+        // @include focus-default;
     }
 
     &--primary {

diff --git a/templates/articles/blocks/promoted_pages.html b/templates/articles/blocks/promoted_pages.html
@@ -1,68 +1,75 @@
 {% load wagtailcore_tags wagtailimages_tags i18n %}
 <section class="promoted-pages body-container body-container--short{% if bg %} promoted-pages--bg{% endif %}">
     <div class="tna-container">
-        <div class="tna-column tna-column--full">
-            <h2 class="tna-heading promoted-pages__heading">{% trans value.heading %}</h2>
-        </div>
 
 
 
-        <!-- TODO -->
-        <!-- {% for promoted_item in value.promoted_items %}
-        <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
-
-            {% image promoted_item.teaser_image fill-800x450 as card_image %}
+        <!-- TODO: Can't concatinate author and date with description in Django templating -->
+        <!--
+        <div class="tna-column tna-column--full">
+            <h2 class="tna-heading tna-heading--l">{% trans value.heading %}</h2>
+        </div>
+        {% for promoted_item in value.promoted_items %}
+            {% with description=promoted_item.description %}
 
-            {% include "../../components/card.html" with title=promoted_item.title href=promoted_item.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=promoted_item.description headingSize="m" headingLevel=3 %}
+            <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
 
-        </div>
-        {% endfor %} -->
+                {% image promoted_item.teaser_image fill-800x450 as card_image %}
 
+                {% include "../../components/card.html" with title=promoted_item.title href=promoted_item.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=promoted_item.description headingSize="m" headingLevel=3 index=forloop.counter0 heading=heading %}
 
+            </div>
+            
+            {% endwith %}
+        {% endfor %}
+        -->
 
 
 
-        <ul class="card-grid card-grid__trio card-grid--list promoted-pages__cards"
-            data-container-name="promoted-pages"
-            id="analytics-promoted-pages">
-            {% for promoted_item in value.promoted_items %}
-                <li class="promoted-pages__card">
-                    <a data-component-name="Featured card: {% trans value.heading %}" data-link-type="Card image" data-card-position="{{ forloop.counter0 }}" data-card-title="{{ promoted_item.title }}" href="{{ promoted_item.url }}"
-                    tabindex="-1">
-                        <picture>
-                            {% image promoted_item.teaser_image fill-350x229-c100 format-webp as mobile_webp_image %}
-                            <source media="(max-width: 390px)"
-                                    srcset="{{ mobile_webp_image.url }}"
-                                    type="image/webp"/>
-                            {% image promoted_item.teaser_image fill-370x229-c100 format-webp as desktop_webp_image %}
-                            <source srcset="{{ desktop_webp_image.url }}" type="image/webp"/>
-                            {% image promoted_item.teaser_image fill-350x229-c100 as mobile_img %}
-                            <source srcset="{{ mobile_img.url }}" media="(max-width: 390px)"/>
-                            {% image promoted_item.teaser_image fill-370x229-c100 as base_img %}
-                            <img src="{{ base_img.url }}"
-                                height="{{ base_img.height }}"
-                                width="{{ base_img.width }}"
-                                class="promoted-pages__image"
-                                alt="{% if promoted_item.teaser_image.alt_text %}{{ promoted_item.teaser_image.alt_text }}{% endif %}"/>
-                        </picture>
-                    </a>
-                    <h3 class="tna-heading promoted-pages__title">
-                        <a data-component-name="Featured card: {% trans value.heading %}" data-link-type="Card text" data-card-position="{{ forloop.counter0 }}" data-card-title="{{ promoted_item.title }}" class="promoted-pages__title-link" href="{{ promoted_item.url }}">
-                            {{ promoted_item.title }}
+        <div class="tna-column tna-column--full">
+            <h2 class="tna-heading tna-heading--l">{% trans value.heading %}</h2>
+            <ul class="card-grid card-grid__trio card-grid--list promoted-pages__cards"
+                data-container-name="promoted-pages"
+                id="analytics-promoted-pages">
+                {% for promoted_item in value.promoted_items %}
+                    <li class="promoted-pages__card">
+                        <a data-component-name="Featured card: {% trans value.heading %}" data-link-type="Card image" data-card-position="{{ forloop.counter0 }}" data-card-title="{{ promoted_item.title }}" href="{{ promoted_item.url }}"
+                        tabindex="-1">
+                            <picture>
+                                {% image promoted_item.teaser_image fill-350x229-c100 format-webp as mobile_webp_image %}
+                                <source media="(max-width: 390px)"
+                                        srcset="{{ mobile_webp_image.url }}"
+                                        type="image/webp"/>
+                                {% image promoted_item.teaser_image fill-370x229-c100 format-webp as desktop_webp_image %}
+                                <source srcset="{{ desktop_webp_image.url }}" type="image/webp"/>
+                                {% image promoted_item.teaser_image fill-350x229-c100 as mobile_img %}
+                                <source srcset="{{ mobile_img.url }}" media="(max-width: 390px)"/>
+                                {% image promoted_item.teaser_image fill-370x229-c100 as base_img %}
+                                <img src="{{ base_img.url }}"
+                                    height="{{ base_img.height }}"
+                                    width="{{ base_img.width }}"
+                                    class="promoted-pages__image"
+                                    alt="{% if promoted_item.teaser_image.alt_text %}{{ promoted_item.teaser_image.alt_text }}{% endif %}"/>
+                            </picture>
                         </a>
-                    </h3>
-                    {% if promoted_item.author %}
-                        <p class="promoted-pages__text promoted-pages__text--gap">
-                            By {{ promoted_item.author }}{% if promoted_item.publication_date %} – {{ promoted_item.publication_date }}{% endif %}
-                        </p>
-                    {% elif promoted_item.publication_date %}
-                        <p class="promoted-pages__text promoted-pages__text--gap">
-                            {{ promoted_item.publication_date }}
-                        </p>
-                    {% endif %}
-                    <p class="promoted-pages__text">{{ promoted_item.description }}</p>
-                </li>
-            {% endfor %}
-        </ul>
+                        <h3 class="tna-heading promoted-pages__title">
+                            <a data-component-name="Featured card: {% trans value.heading %}" data-link-type="Card text" data-card-position="{{ forloop.counter0 }}" data-card-title="{{ promoted_item.title }}" class="promoted-pages__title-link" href="{{ promoted_item.url }}">
+                                {{ promoted_item.title }}
+                            </a>
+                        </h3>
+                        {% if promoted_item.author %}
+                            <p class="promoted-pages__text promoted-pages__text--gap">
+                                By {{ promoted_item.author }}{% if promoted_item.publication_date %} &ndash; {{ promoted_item.publication_date }}{% endif %}
+                            </p>
+                        {% elif promoted_item.publication_date %}
+                            <p class="promoted-pages__text promoted-pages__text--gap">
+                                {{ promoted_item.publication_date }}
+                            </p>
+                        {% endif %}
+                        <p class="promoted-pages__text">{{ promoted_item.description }}</p>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
     </div>
 </section>
diff --git a/templates/collections/explorer_index_page.html b/templates/collections/explorer_index_page.html
@@ -29,7 +29,7 @@ <h2 class="tna-heading">{{ page.articles_title }}</h2>
             <div class="featured-articles__cta">
                 {% comment %} TODO: update BEM button styles for consistency across site {% endcomment %}
                 <a href="/stories"
-                class="tna-button--dark"
+                class="tna-button"
                 data-link-type="Button"
                 data-component-name="Articles section: {{ page.articles_title }}"
                 data-link="Browse all stories">Browse all stories</a>

diff --git a/templates/components/card.html b/templates/components/card.html
@@ -18,7 +18,15 @@
           <p class="tna-hgroup__supertitle">{{ supertitle }}</p>
           <h{{ headingLevel }} class="tna-hgroup__title">
           {% if href %}
-            <a href="{{ href }}" class="tna-card__heading-link">{{ title }}</a>
+            <a
+              href="{{ href }}"
+              class="tna-card__heading-link"
+              data-card-type="card-group-secondary-nav"
+              data-component-name="{{ card_type }} card: {% if heading %}{{ heading }}{% else %}{{ page.title }}{% endif %}"
+              data-link-type="Card text"
+              data-card-title="{{ title }}"
+              data-card-position="{{ index|default:0 }}"
+            >{{ title }}</a>
           {% else %}
             {{ title }}
           {% endif %}
@@ -29,7 +37,15 @@
           <h{{ headingLevel }} class="tna-hgroup__title">
             <span class="tna-hgroup__supertitle">{{ supertitle }}</span>
           {% if href %}
-            <a href="{{ href }}" class="tna-card__heading-link">{{ title }}</a>
+            <a
+              href="{{ href }}"
+              class="tna-card__heading-link"
+              data-card-type="card-group-secondary-nav"
+              data-component-name="{{ card_type }} card: {% if heading %}{{ heading }}{% else %}{{ page.title }}{% endif %}"
+              data-link-type="Card text"
+              data-card-title="{{ title }}"
+              data-card-position="{{ index|default:0 }}"
+            >{{ title }}</a>
           {% else %}
             {{ title }}
           {% endif %}
@@ -39,7 +55,15 @@
     {% else %}
       <h{{ headingLevel }} class="tna-card__heading tna-heading tna-heading--{{ headingSize|default:'m' }} {% if highlight %}tna-card__heading--has-highlight{% endif %}">
       {% if href %}
-        <a href="{{ href }}" class="tna-card__heading-link">{{ title }}</a>
+        <a
+          href="{{ href }}"
+          class="tna-card__heading-link"
+          data-card-type="card-group-secondary-nav"
+          data-component-name="{{ card_type }} card: {% if heading %}{{ heading }}{% else %}{{ page.title }}{% endif %}"
+          data-link-type="Card text"
+          data-card-title="{{ title }}"
+          data-card-position="{{ index|default:0 }}"
+        >{{ title }}</a>
       {% else %}
         {{ title }}
       {% endif %}
@@ -52,7 +76,17 @@
     {% endif %}
     {% if imageSrc %}
       {% if href %}
-      <a href="{{ href }}" class="tna-card__image-container" tabindex="-1" title="{{ title }}">
+      <a
+        href="{{ href }}"
+        class="tna-card__image-container"
+        tabindex="-1"
+        title="{{ title }}"
+        data-card-type="card-group-secondary-nav"
+        data-component-name="{{ card_type }} card: {% if heading %}{{ heading }}{% else %}{{ page.title }}{% endif %}"
+        data-link-type="Card image"
+        data-card-title="{{ title }}"
+        data-card-position="{{ index|default:0 }}"
+      >
       {% else %}
       <div class="tna-card__image-container">
       {% endif %}

diff --git a/templates/includes/article-spotlight.html b/templates/includes/article-spotlight.html
@@ -9,7 +9,7 @@ <h2 class="tna-heading extra-padding">{% translate title %}</h2>
     <!-- TODO -->
     <!-- {% image page.teaser_image fill-1200x675 as card_image %}
 
-    {% include "../components/card.html" with supertitle=page.type_label title=page.title href=page.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=page.teaser_text headingSize="l" headingLevel=2 horizontal=True style="accent" actions='[{"text": "test"}]' %} -->
+    {% include "../components/card.html" with supertitle=page.type_label title=page.title href=page.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=page.teaser_text headingSize="l" headingLevel=2 horizontal=True style="accent" actions='[{"text": "test"}]' index=forloop.counter0 heading=heading %} -->
 
 
 
@@ -48,6 +48,6 @@ <h2 class="tna-heading featured-article__heading">
             <p id="article-desc{{ page.id }}" class="aria-desc">Read about {{ page.title }}</p>
 
             <p>{{ page.teaser_text }}</p>
-            <a class="tna-button--dark" href="{% pageurl page %}" data-component-name="Featured Article: {{ page.title }}" data-link-type="Button" data-link="Read" {% if page.is_newly_published %}data-label="New"{% endif %}>Read about {{ page.title }}</a>
+            <a class="tna-button tna-button--solid-hover" href="{% pageurl page %}" data-component-name="Featured Article: {{ page.title }}" data-link-type="Button" data-link="Read" {% if page.is_newly_published %}data-label="New"{% endif %}>Read about {{ page.title }}</a>
         </div>
     </div>
diff --git a/templates/includes/breadcrumb.html b/templates/includes/breadcrumb.html
@@ -9,7 +9,7 @@
                     </a>
                 </li>
                 {% for p in self.get_ancestors %}
-                    {% if  p.depth > 2 %}
+                    {% if p.depth > 2 %}
                         <li class="tna-breadcrumbs__item">
                             <a href="{{ p.url }}" class="tna-breadcrumbs__link" data-component-name="Breadcrumb" data-link-type="Breadcrumb link" data-link="{{ p.title }}">
                                 {{ p.title }}

diff --git a/templates/includes/card-group-secondary-nav.html b/templates/includes/card-group-secondary-nav.html
@@ -4,6 +4,6 @@
 
 <li class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
 
-    {% include "../components/card.html" with horizontal=true supertitle=link_page.type_label title=link_page.title href=link_page.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=link_page.teaser_text headingSize="m" headingLevel=3 label=link_page.is_newly_published|yesno:"New," %}
+    {% include "../components/card.html" with horizontal=true supertitle=link_page.type_label title=link_page.title href=link_page.url imageSrc=card_image.url imageWidth=800 imageHeight=450 text=link_page.teaser_text headingSize="m" headingLevel=3 label=link_page.is_newly_published|yesno:"New," index=forloop.counter0 heading=heading %}
 
 </li>
diff --git a/templates/includes/highlight_gallery_teaser.html b/templates/includes/highlight_gallery_teaser.html
@@ -1,7 +1,7 @@
 {% load wagtailimages_tags wagtailcore_tags i18n %}
 <section class="highlight-gallery-teaser">
     <div class="container">
-        <h2 class="tna-heading highlight-gallery-teaser__title">
+        <h2 class="tna-heading tna-heading--no-link-arrow highlight-gallery-teaser__title">
             {% trans "Explore records about" %} <a class="highlight-gallery-teaser__title-link"
         href="{% pageurl page %}" 
         data-component-name="Featured card: {% trans "Explore records about" %} {% trans title %}"