Skip to content

Commit 15d390d

Browse files
liamjohnstonliamjohnston
authored
Merge pull request #101 from springload/feature/streamfield-wrappers-and-featured-tile-style
Streamfield wrapper overhaul and featured tiles style
2 parents 6893743 + ca32a44 commit 15d390d

32 files changed

+363
-320
lines changed

Diff for: ‎cdhweb/pages/templates/cdhpages/blocks/feature_block.html

+23-20
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
{% load wagtailcore_tags wagtailimages_tags %}
22
{% image self.image width-400 as img_base %}
3-
<div class="feature">
4-
<div class="feature__text-content">
5-
<h2>{{ self.heading }}</h2>
6-
{{ self.feature_text|richtext }}
7-
{% if self.cta_buttons %}
8-
{% include_block self.cta_buttons %}
9-
{% endif %}
10-
</div>
113

12-
{% image self.image width-750 as img_base %}
13-
{% image self.image width-1200 as img_sm %}
14-
{% image self.image width-1400 as img_md %}
4+
<div class="block block--feature">
5+
<div class="feature">
6+
<div class="feature__text-content">
7+
<h2>{{ self.heading }}</h2>
8+
{{ self.feature_text|richtext }}
9+
{% if self.cta_buttons %}
10+
{% include_block self.cta_buttons %}
11+
{% endif %}
12+
</div>
1513

16-
<picture class="feature__img">
17-
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
18-
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
19-
<img
20-
src="{{ img_base.url }}"
21-
alt="{{ self.alt_text|default:img_base.alt }}"
22-
loading="lazy"
23-
/>
24-
</picture>
14+
{% image self.image width-750 as img_base %}
15+
{% image self.image width-1200 as img_sm %}
16+
{% image self.image width-1400 as img_md %}
17+
18+
<picture class="feature__img">
19+
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
20+
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
21+
<img
22+
src="{{ img_base.url }}"
23+
alt="{{ self.alt_text|default:img_base.alt }}"
24+
loading="lazy"
25+
/>
26+
</picture>
27+
</div>
2528
</div>

Diff for: ‎cdhweb/pages/templates/cdhpages/blocks/image_block.html

+42-41
Original file line numberDiff line numberDiff line change
@@ -17,47 +17,48 @@
1717
{% image self.image width-2300 as img_xxxl %}
1818
{% endif %}
1919

20-
<figure class="sk-image sk-image--{{ self.size }}">
21-
<picture>
22-
{% if img_sm %}
23-
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
24-
{% endif %}
25-
{% if img_md %}
26-
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
27-
{% endif %}
28-
{% if img_lg %}
29-
<source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
30-
{% endif %}
31-
{% if img_xl %}
32-
<source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
33-
{% endif %}
34-
{% if img_xxl %}
35-
<source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
36-
{% endif %}
37-
{% if img_xxxl %}
38-
<source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
39-
{% endif %}
40-
<img class="sk-image__img"
41-
src="{{ img_base.url }}"
42-
alt="{{ self.alt_text|default:img_base.alt }}"
43-
loading="lazy"
44-
style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
45-
/>
46-
</picture>
47-
48-
{% if self.credit or self.caption %}
49-
<figcaption class="sk-image__text-content">
50-
{% if self.credit %}
51-
<div class="sk-image__credit">
52-
{{ self.credit|richtext }}
53-
</div>
20+
<div class="block block--image">
21+
<figure class="sk-image sk-image--{{ self.size }}">
22+
<picture>
23+
{% if img_sm %}
24+
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
25+
{% endif %}
26+
{% if img_md %}
27+
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
28+
{% endif %}
29+
{% if img_lg %}
30+
<source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
5431
{% endif %}
55-
{% if self.caption %}
56-
<div class="sk-image__caption">
57-
{{ self.caption|richtext }}
58-
</div>
32+
{% if img_xl %}
33+
<source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
5934
{% endif %}
60-
</figcaption>
61-
{% endif %}
62-
</figure>
35+
{% if img_xxl %}
36+
<source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
37+
{% endif %}
38+
{% if img_xxxl %}
39+
<source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
40+
{% endif %}
41+
<img class="sk-image__img"
42+
src="{{ img_base.url }}"
43+
alt="{{ self.alt_text|default:img_base.alt }}"
44+
loading="lazy"
45+
style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
46+
/>
47+
</picture>
6348

49+
{% if self.credit or self.caption %}
50+
<figcaption class="sk-image__text-content">
51+
{% if self.credit %}
52+
<div class="sk-image__credit">
53+
{{ self.credit|richtext }}
54+
</div>
55+
{% endif %}
56+
{% if self.caption %}
57+
<div class="sk-image__caption">
58+
{{ self.caption|richtext }}
59+
</div>
60+
{% endif %}
61+
</figcaption>
62+
{% endif %}
63+
</figure>
64+
</div>

Diff for: ‎cdhweb/pages/templates/cdhpages/blocks/rich_text.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
{% load wagtailcore_tags %}
2-
{{ self | richtext }}
2+
<div class="block block--paragraph">
3+
{{ self | richtext }}
4+
</div>

Diff for: ‎cdhweb/pages/templates/cdhpages/blocks/table_block.html

+28-26
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,32 @@
22

33
{# Note: This is actually a wagtail typed table, not a standard wagtail table #}
44

5-
{# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
6-
<div class="table-scroll-wrapper" tabindex="0">
7-
<table class="table">
8-
{% if value.caption %}
9-
<caption class="table__caption">{{ value.caption }}</caption>
10-
{% endif %}
11-
<thead class="table__thead">
12-
<tr>
13-
{% for col in value.table.columns %}
14-
<th class="table__th" scope="col">{{ col.heading }}</th>
5+
<div class="block block--table">
6+
{# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
7+
<div class="table-scroll-wrapper" tabindex="0">
8+
<table class="table">
9+
{% if value.caption %}
10+
<caption class="table__caption">{{ value.caption }}</caption>
11+
{% endif %}
12+
<thead class="table__thead">
13+
<tr>
14+
{% for col in value.table.columns %}
15+
<th class="table__th" scope="col">{{ col.heading }}</th>
16+
{% endfor %}
17+
</tr>
18+
</thead>
19+
<tbody class="table__tbody">
20+
{% for row in value.table.rows %}
21+
<tr>
22+
{% for block in row %}
23+
<td class="table__td">{% include_block block %}</td>
24+
{% endfor %}
25+
</tr>
1526
{% endfor %}
16-
</tr>
17-
</thead>
18-
<tbody class="table__tbody">
19-
{% for row in value.table.rows %}
20-
<tr>
21-
{% for block in row %}
22-
<td class="table__td">{% include_block block %}</td>
23-
{% endfor %}
24-
</tr>
25-
{% endfor %}
26-
</tbody>
27-
</table>
28-
</div>
29-
{% if value.notes %}
30-
<div class="table__notes">{{ value.notes }}</div>
31-
{% endif %}
27+
</tbody>
28+
</table>
29+
</div>
30+
{% if value.notes %}
31+
<div class="table__notes">{{ value.notes }}</div>
32+
{% endif %}
33+
</div>

Diff for: ‎cdhweb/static_src/global/components/cta.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.block-cta_block {
1+
.cta {
22
border: 1px solid var(--color-brand-100);
33
background-color: var(--color-brand-5);
44
padding: 24px;

Diff for: ‎cdhweb/static_src/global/components/newsletter.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/*
22
Newsletter streamfield block.
33
Note: this uses the same `includes/newsletter_form.html` rendered by in <footer>.
4-
We don't have a streamfield-specific template for it, therefore we're styling this one
5-
the streamfield version based on its wagtail-generated class name `.block-newsletter`.
4+
We don't have a streamfield-specific template for it, but we conditionally add a
5+
`.block--newsletter` wrapper when it's used in a streamfield context.
66
*/
77

8-
.block-newsletter {
8+
.block--newsletter {
99
--form-control-border-color: var(--color-grey-80);
1010
--btn-color: var(--color-black);
1111
--btn-bg: var(--color-brand-100);

Diff for: ‎cdhweb/static_src/global/components/tiles.scss

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
.tiles--featured {
2+
@include full-bleed-bg(var(--color-grey-5));
3+
padding-block: 40px;
4+
5+
@include md {
6+
padding-block: 72px;
7+
}
8+
}
9+
110
// Wrapper for component title and 'see more' link, both of
211
// which are optional. Only renders if content is present.
312
.tiles__title-wrapper {
@@ -34,7 +43,7 @@
3443
row-gap: 40px;
3544

3645
@include sm {
37-
grid-template-columns: repeat(auto-fit, minmax(px2rem(280), 1fr));
46+
grid-template-columns: repeat(auto-fill, minmax(px2rem(280), 1fr));
3847
column-gap: 32px;
3948
}
4049
}
@@ -48,6 +57,7 @@
4857
.tile__text {
4958
grid-row: 2;
5059
grid-column: 1;
60+
background-color: var(--color-white);
5161
border: 8px solid var(--color-brand-100);
5262
border-top: none;
5363
padding: 24px 12px;

Diff for: ‎cdhweb/static_src/global/components/video.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
.sk-video__iframe,
2-
.block-embed iframe {
1+
// Apply to both the video block (.sk-video__iframe) and the
2+
// hosted video block (which we can't access the DOM for)
3+
.block--video :where(iframe) {
34
aspect-ratio: 16/9;
45
width: 100%;
56
display: block;

Diff for: ‎cdhweb/static_src/global/layout/streamfields.scss

+18-25
Original file line numberDiff line numberDiff line change
@@ -7,44 +7,42 @@
77
display: flex;
88
flex-direction: column;
99

10-
& > * + * {
10+
& > :where(.block + .block) {
1111
// Default `lg` space above each streamfield
1212
margin-block-start: var(--streamfield-space-lg);
1313

1414
// Cases where there should be a `sm` space above:
1515
&:where(
1616
:is(
17-
.block-image,
18-
.block-table,
19-
.block-note,
20-
.block-paragraph,
21-
.block-pull_quote,
22-
.block-accordion_block:not(:has(> h2)),
23-
.block-embed:not(:has(> h2)),
24-
.block-video_block:not(:has(> h2))
17+
.block--image,
18+
.block--table,
19+
.block--note,
20+
.block--paragraph,
21+
.block--pull-quote,
22+
.block--accordion:not(:has(> h2)),
23+
.block--video:not(:has(> h2))
2524
)
2625
) {
2726
margin-block-start: var(--streamfield-space-sm);
2827
}
2928

3029
// Cases where there should be a `xs` space above:
31-
&:where(:is(.block-heading + *)) {
30+
&:where(:is(.block--heading + *)) {
3231
margin-block-start: var(--streamfield-space-xs);
3332
}
3433
}
3534

3635
& > * {
3736
// Cap width of some (most?) streamfield block types
3837
&:where(
39-
.block-accordion_block,
40-
.block-table,
41-
.block-paragraph,
42-
.block-download_block,
43-
.block-cta_block,
44-
.block-note,
45-
.block-pull_quote,
46-
.block-video_block,
47-
.block-embed
38+
.block--accordion,
39+
.block--table,
40+
.block--paragraph,
41+
.block--download,
42+
.block--cta,
43+
.block--note,
44+
.block--pull-quote,
45+
.block--video
4846
) {
4947
max-inline-size: var(--reading-max-width);
5048
}
@@ -53,12 +51,7 @@
5351
// Outdented components.
5452
// Tile block title is excluded because it needs to be wrapped in another
5553
// container to allow the "see all" link to display in line with it.
56-
:where(
57-
.block-heading,
58-
.block-accordion_block > h2,
59-
.block-video_block > h2,
60-
.block-embed > h2
61-
) {
54+
:where(.block--heading, .block--accordion > h2, .block--video > h2) {
6255
@include md {
6356
margin-left: calc(-1 * var(--content-outdent));
6457
}

Diff for: ‎cdhweb/static_src/global/migrated-content.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
Regarding content migrated as part of Springload's 2024 rebuild.
33
Existing content was dumped into a "migrated" content streamfield block.
44
*/
5-
.migrated-content {
5+
.block--migrated-content {
66
:where(h2) {
77
@include md {
88
margin-left: calc(-1 * var(--content-outdent));

Diff for: ‎cdhweb/static_src/global/rich-text.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959
margin-bottom: var(--space-h6-lg);
6060
}
6161

62-
:where(.block-paragraph blockquote) {
62+
:where(.block--paragraph blockquote) {
6363
@include outdented-line-block;
6464
}
6565

Diff for: ‎templates/blog/blog_post.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<div class="content-width grid-standard page-layout page-layout--without-sidenav">
99
<div class="page-layout__main-content">
1010
<div class="streamfields-wrapper">
11-
{% if page.body %}
12-
{% include_block page.body %}
13-
{% endif %}
11+
{% for block in page.body %}
12+
{% include_block block %}
13+
{% endfor %}
1414
</div>
1515
</div>
1616
</div>

0 commit comments

Comments
 (0)