Skip to content

Commit 2d7b425

Browse files
shyusu4SharmaineLim
shyusu4
and
SharmaineLim
authored
TWE-44 | Front end fine-tuning (#372)
* Increase dynamic hero autoplay speed and remove touch interaction * Add hide date conditional to date and reading time, hide date for work case studies * Layout tidy up * Add header spacing for icon keypoints block * Add hide tags conditional to blogs, hide tags for blog index and blog listings * Skip the tests checking the tags are in the template for now * Lazy loading for division signpost card images * Add primary nav hover styles, fix secondary navigation submenu arrow transition * Modify footer cta title and featured services description styles * Hide tags section in blog detail template * Add smaller font to compact button link variant, add color theme to text stats, tweak secondary nav styles * Add event listener to close mobile menu on primary mobile menu toggle click * Linting * Fix heading mismatch in footer cta --------- Co-authored-by: Amanda Lim-Cabuloy <[email protected]>
1 parent 5d799ba commit 2d7b425

30 files changed

+131
-65
lines changed

‎tbx/project_styleguide/templates/patterns/atoms/date_and_reading_time/date_and_reading_time.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
{% if date %}
1+
{% if date and not hide_date %}
22
<time datetime="{{ date|date:'Y-m-d' }}">{{ date }}</time>
33
{% endif %}
4-
{% if reading_time and date %}
5-
<span aria-hidden="true" class="my0 mx-[7px] ">/</span>
6-
{% endif %}
4+
75
{% if reading_time %}
6+
{% if date and not hide_date %}
7+
<span aria-hidden="true" class="my0 mx-[7px]">/</span>
8+
{% endif %}
89
{{ reading_time }} min{{ reading_time|pluralize }} read
910
{% endif %}

‎tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<div class="grid__footer-contact-container footer-cta">
22
<div class="grid__footer-contact">
3-
<h2 class="heading heading--two-b heading--semibold footer-cta__title">{{ contact_heading }}</h2>
3+
{% if is_home_page %}
4+
<h2 class="heading heading--two heading--semibold">{{ contact_heading }}</h2>
5+
{% else %}
6+
<h2 class="motif-heading">{{ contact_heading }}</h2>
7+
{% endif %}
48
<p class="footer-cta__subtitle">{{ contact_text }}</p>
59
<div class="footer-cta__container">
610
{% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--cta" %}

‎tbx/project_styleguide/templates/patterns/molecules/listing/listing--avatar.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ <h2 class="listing-avatar__title listing__title">
2323
</div>
2424
</div>
2525

26-
<div class="listing-avatar__tags listing__tags tags">
27-
<span class="sr-only">{{ tags_screenreader_text|default:"See more blog posts in this category" }}</span>
28-
{% for tag in tags %}
29-
{% include "patterns/atoms/tag/tag.html" with tag_name=tag.name tag_slug=tag.slug %}
30-
{% endfor %}
31-
</div>
26+
{% if not hide_tags %}
27+
<div class="listing-avatar__tags listing__tags tags">
28+
<span class="sr-only">{{ tags_screenreader_text|default:"See more blog posts in this category" }}</span>
29+
{% for tag in tags %}
30+
{% include "patterns/atoms/tag/tag.html" with tag_name=tag.name tag_slug=tag.slug %}
31+
{% endfor %}
32+
</div>
33+
{% endif %}
3234
</li>

‎tbx/project_styleguide/templates/patterns/molecules/listing/listing--image.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ <h2 class="listing-image__title listing__title">
3535
<span class="listing__name mr-1.5">{{ name }}</span>
3636
</p>
3737
<p class="listing__meta">
38-
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" %}
38+
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" with hide_date=True %}
3939
</p>
4040
</div>
4141
</div>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/blog_chooser_block.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h2 class="motif-heading motif-heading--half-width">{{ value.featured_blog_headi
2222
{% for blog_page in value.blog_pages %}
2323
{% pageurl blog_page.blog_index as blog_index_url %}
2424
{% pageurl blog_page as blog_post_url %}
25-
{% include "patterns/molecules/listing/listing--avatar.html" with title=blog_page.title name=blog_page.first_author.name job_title=blog_page.first_author.role link=blog_post_url date=blog_page.date reading_time=blog_page.read_time tags=blog_page.tags avatar=blog_page.first_author.image tag_link_base=blog_index_url %}
25+
{% include "patterns/molecules/listing/listing--avatar.html" with title=blog_page.title name=blog_page.first_author.name job_title=blog_page.first_author.role link=blog_post_url date=blog_page.date reading_time=blog_page.read_time tags=blog_page.tags hide_tags=True avatar=blog_page.first_author.image tag_link_base=blog_index_url %}
2626
{% endfor %}
2727
</ul>
2828

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ <h2 class="heading heading--two">{{ value.title }}</h2>
1616
<h2 class="heading heading--two division-signpost__heading">{% firstof card.heading card.page.title %}</h2>
1717
<div class="heading heading--four-b heading--light division-signpost__description">{{ card.description|richtext }}</div>
1818
</div>
19-
{% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" %}
19+
{% srcset_image card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" loading="lazy" %}
2020
{# The title and icon need to be on the same line with no whitespace to prevent the arrow being orphaned on a new line #}
2121
<a href="{% pageurl card.page %}"
2222
class="button-link button-link--{{ card.card_colour }}"
2323
{% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
2424
>
25-
{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}
25+
{{ card.link_text }}<span class="button-link__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide" classname="button-link__arrow" %}</span>
2626
</a>
2727
</li>
2828
{% endfor %}

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/division_signpost_block.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ context:
2121

2222
tags:
2323
srcset_image:
24-
'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
24+
'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" loading="lazy"':
2525
raw: |
26-
<img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
26+
<img alt="" loading="lazy" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_case_study.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h2 class="featured-case-study__title">
5050
{{ link.client }}
5151
</span>
5252
<span class="featured-case-study__meta">
53-
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" with date=link.date reading_time=link.read_time %}
53+
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" with hide_date=True reading_time=link.read_time %}
5454
</span>
5555
</span>
5656
</div>

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{% load wagtailcore_tags wagtailimages_tags %}
22
<div class="grid__featured-services featured-services">
33
<div class="featured-services__header">
4-
<h2 class="motif-heading featured-services__title">{{ value.title }}</h2>
4+
<h2 class="motif-heading motif-heading--half-width">{{ value.title }}</h2>
55
{% if value.intro %}
6-
<div class="featured-services__intro rich-text">{{ value.intro|richtext }}</div>
6+
<div class="rich-text">{{ value.intro|richtext }}</div>
77
{% endif %}
88
</div>
99
<ul class="featured-services__cards">
@@ -22,7 +22,7 @@ <h3 class="featured-services__heading heading heading--two-b">{% firstof card.he
2222
class="button-link button-link--compact"
2323
{% if card.accessible_link_text %}aria-label="{{ card.accessible_link_text }}"{% endif %}
2424
>
25-
{{ card.link_text }}&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}
25+
{{ card.link_text }}<span class="button-link__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow-wide-sm" classname="button-link__arrow" %}</span>
2626
</a>
2727
</li>
2828
{% endfor %}

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/icon_keypoints_block.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{% load wagtailcore_tags wagtailimages_tags %}
22
<div class="grid__keypoints keypoints">
3-
{% if value.title %}
4-
<h2 class="heading heading--two">{{ value.title }}</h2>
5-
{% endif %}
6-
{% if value.intro %}
7-
<div class="text text--five">{{ value.intro|richtext }}</div>
8-
{% endif %}
3+
<div class="keypoints__header">
4+
{% if value.title %}
5+
<h2 class="motif-heading motif-heading--half-width">{{ value.title }}</h2>
6+
{% endif %}
7+
{% if value.intro %}
8+
<div class="rich-text">{{ value.intro|richtext }}</div>
9+
{% endif %}
10+
</div>
911

1012
<ul class="keypoints__list">
1113
{% for key_point in value.key_points %}

‎tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/stats_textual.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ul class="stats stats--textual grid__stats">
33
{% for stat in value %}
44
<li class="stats__stat">
5-
<span class="stats__text">
5+
<span class="stats__text heading heading--three">
66
{{ stat.headline_text }}
77
</span>
88
{% if stat.further_details %}

‎tbx/project_styleguide/templates/patterns/molecules/title-filters/title-filters.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{% load wagtailcore_tags %}
22

3-
<div class="title-filters">
3+
<div class="title-filters {% if hide_tags %}title-filters--no-tags{% endif %}">
44
<div class="title-filters__title">
55
<h1 class="heading heading--mega">{{ item.title }}</h1>
66
</div>
77

8-
{% if tags %}
8+
{% if tags and not hide_tags %}
99
<div class="title-filters__tags">
1010
<div class="tags">
1111
<p class="sr-only">Filter by category</p>

‎tbx/project_styleguide/templates/patterns/organisms/header/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="grid">
77
<div class="grid__header-nav">
88
{# Primary desktop navigation #}
9-
<nav aria-label="Main navigation" class="primary-nav-desktop" data-desktop-menu>
9+
<nav aria-label="Main navigation" class="primary-nav-desktop">
1010
{% wagtailcache 600 "primarynav" current_site.pk is_pattern_library %}
1111
<ul class="primary-nav-desktop__list">
1212
<li class="primary-nav-desktop__item">

‎tbx/project_styleguide/templates/patterns/pages/blog/blog_detail.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ <h1 class="heading heading--one">{{ page.title }}</h1>
3535

3636
{% pageurl page.blog_index as blog_index_url %}
3737

38-
<div class="tags tags--with-title">
38+
{# Temporarily hide tags #}
39+
<!-- <div class="tags tags--with-title">
3940
<span class="sr-only">Related post categories</span>
4041
{% for tag in page.tags %}
4142
{% include "patterns/atoms/tag/tag.html" with tag_slug=tag.slug tag_name=tag.name tag_link_base=blog_index_url %}
4243
{% endfor %}
43-
</div>
44+
</div> -->
4445
</div>
4546

4647
<div class="blog-meta">
@@ -55,7 +56,7 @@ <h2 class="motif-heading section-title--related-posts section-title--large-gap"
5556
<ul class="grid__related-posts streamfield__related-posts">
5657
{% for post in page.related_blog_posts %}
5758
{% pageurl post as post_url %}
58-
{% include "patterns/molecules/listing/listing--avatar.html" with title=post.title name=post.first_author.name job_title=post.first_author.role link=post_url date=post.date reading_time=post.read_time tags=post.tags avatar=post.first_author.image tag_link_base=blog_index_url %}
59+
{% include "patterns/molecules/listing/listing--avatar.html" with title=post.title name=post.first_author.name job_title=post.first_author.role link=post_url date=post.date reading_time=post.read_time tags=post.tags hide_tags=True avatar=post.first_author.image tag_link_base=blog_index_url %}
5960
{% endfor %}
6061

6162
<li class="mx-auto lg:mx-0 mt-spacerSmall">

‎tbx/project_styleguide/templates/patterns/pages/blog/blog_listing.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010

1111
{% block content %}
1212
<div class="grid grid--spacer-large">
13-
{% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags %}
13+
{% include "patterns/molecules/title-filters/title-filters.html" with item=page tags=tags hide_tags=True %}
1414

1515
<ul class="page-listing page-listing--blog">
1616
{% for post in blog_posts %}
1717
{% pageurl post as link %}
18-
{% include "patterns/molecules/listing/listing--avatar.html" with link=link avatar=post.first_author.image title=post.title name=post.first_author.name job_title=post.first_author.role date=post.date reading_time=post.read_time tags=post.tags tag_link_base=blog_index_url base_class="page-listing__item" %}
18+
{% include "patterns/molecules/listing/listing--avatar.html" with link=link avatar=post.first_author.image title=post.title name=post.first_author.name job_title=post.first_author.role date=post.date reading_time=post.read_time tags=post.tags hide_tags=True tag_link_base=blog_index_url base_class="page-listing__item" %}
1919
{% endfor %}
2020
</ul>
2121

‎tbx/project_styleguide/templates/patterns/pages/work/work_page_base.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ <h1 class="heading heading--one mb-spacerMini md:mb-spacerSmall">{{ page.title }
4343
</p>
4444

4545
<p class="work-hero__meta">
46-
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" with date=page.date reading_time=page.read_time %}
46+
{% include "patterns/atoms/date_and_reading_time/date_and_reading_time.html" with hide_date=True reading_time=page.read_time %}
4747
</p>
4848

4949
<div class="tags">

‎tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ tags:
122122
'post.image format-webp fill-{250x250,500x500} sizes="(max-width: 598px) 50vw, (max-width: 1021px) 25vw, (min-width: 1022px) 250px" class="instagram-post__image" loading="lazy"':
123123
raw: '<img alt="advent-9" class="instagram-post__image" height="250" loading="lazy" sizes="(max-width: 598px) 50vw, (max-width: 1021px) 25vw, (min-width: 1022px) 250px" src="https://picsum.photos/250/250.webp" srcset="https://picsum.photos/250/250.webp 250w, https://picsum.photos/500/500.webp 500w" width="250">'
124124
# division signpost block
125-
'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""':
125+
'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt="" loading="lazy"':
126126
raw: |
127-
<img alt="" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
127+
<img alt="" loading="lazy" height="280" sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" src="https://picsum.photos/540/280.webp" srcset="https://picsum.photos/540/280.webp 540w, https://picsum.photos/490/280.webp 490w" width="540">
128128
image:
129129
# featured services block
130130
'card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt=""':

‎tbx/static_src/javascript/components/dynamic-hero.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,9 @@ export default class DynamicHero {
3434
slidesPerView: 1,
3535
speed: 1000,
3636
loop: true,
37+
allowTouchMove: false,
3738
autoplay: {
38-
delay: 5000,
39+
delay: 2000,
3940
enabled: !isReduced,
4041
},
4142
});

‎tbx/static_src/javascript/components/mobile-menu.js

+12
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ class MobileMenu {
77
this.node = node;
88
this.body = document.querySelector('body');
99
this.mobileMenu = document.querySelector('[data-mobile-menu]');
10+
this.primaryMobileToggle = document.querySelector(
11+
'[data-primary-mobile-menu-toggle]',
12+
);
1013
this.lastMenuItem = document.querySelector(
1114
'[data-last-menu-item-mobile]',
1215
);
@@ -33,6 +36,15 @@ class MobileMenu {
3336
}
3437
});
3538

39+
// Close the mobile menu if the primary mobile menu toggle is clicked
40+
if (this.primaryMobileToggle) {
41+
this.primaryMobileToggle.addEventListener('click', () => {
42+
if (this.state.open) {
43+
this.close();
44+
}
45+
});
46+
}
47+
3648
// Close the mobile menu when the focus moves away from the last item in the top level
3749
if (this.lastMenuItem === null) {
3850
return;

‎tbx/static_src/sass/components/_button-link.scss

+7
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
// compact variant of the button with reduced padding
1717
&--compact {
18+
@include font-size('size-five');
1819
padding: 13px $spacer-small;
1920

2021
#{$root}__arrow {
@@ -60,6 +61,12 @@
6061
}
6162
}
6263

64+
&__tail {
65+
// Keep the arrow attached to the last word so it's not orphaned on a new line
66+
white-space: nowrap;
67+
display: inline;
68+
}
69+
6370
&__arrow {
6471
@include arrow-link-icon-styles(
6572
$interaction-color: var(--color--button-link-interaction)

‎tbx/static_src/sass/components/_featured-services.scss

+5-1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,10 @@
6060

6161
// override the rich-text font-size
6262
&__description.rich-text {
63-
@include font-size(size-seven);
63+
@include font-size(size-six);
64+
65+
@include media-query(medium) {
66+
@include font-size(size-seven);
67+
}
6468
}
6569
}

‎tbx/static_src/sass/components/_footer-cta.scss

-4
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
padding: $spacer-half 0;
99
}
1010

11-
&__title {
12-
color: var(--color--theme-primary);
13-
}
14-
1511
&__subtitle {
1612
@include font-size('size-four');
1713
color: var(--color--heading);

‎tbx/static_src/sass/components/_grid.scss

+9-7
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777

7878
@include media-query(large) {
7979
margin-bottom: $spacer-large;
80-
grid-column: 4 / span 9;
80+
grid-column: 2 / span 9;
8181
}
8282
}
8383

@@ -488,12 +488,6 @@
488488
margin-bottom: $spacer-large;
489489
}
490490
}
491-
492-
&__quote {
493-
@include media-query(large) {
494-
grid-column: 2 / span 9;
495-
}
496-
}
497491
}
498492

499493
.template-historical-work-page & {
@@ -645,4 +639,12 @@
645639
}
646640
}
647641
}
642+
643+
.template-person-page & {
644+
&__intro {
645+
@include media-query(large) {
646+
grid-column: 4 / span 7;
647+
}
648+
}
649+
}
648650
}

‎tbx/static_src/sass/components/_keypoints.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
@use 'config' as *;
22

33
.keypoints {
4+
&__header {
5+
margin-bottom: $spacer-medium;
6+
}
7+
48
&__list {
59
display: flex;
610
flex-direction: column;

‎tbx/static_src/sass/components/_stats.scss

+1-4
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,10 @@
3737
&__number {
3838
color: var(--color--theme-primary);
3939
display: block;
40-
font-weight: $weight--semibold;
4140
}
4241

4342
&__text {
44-
@include font-size(size-three);
45-
font-weight: $weight--semibold;
46-
color: var(--color--heading);
43+
color: var(--color--theme-primary);
4744
display: block;
4845
margin-bottom: $spacer-small;
4946
}

‎tbx/static_src/sass/components/_title-filters.scss

+8
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
}
4848
}
4949

50+
&--no-tags {
51+
#{$root}__title {
52+
@include media-query(large) {
53+
flex-grow: 1;
54+
}
55+
}
56+
}
57+
5058
&__title {
5159
margin-bottom: $spacer-small;
5260

0 commit comments

Comments
 (0)