Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Streamfield wrapper overhaul and featured tiles style #101

Merged
merged 2 commits into from
Jun 14, 2024
Merged

Streamfield wrapper overhaul and featured tiles style #101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a8db56
Streamfield wrapper overhaul and featured tiles style
liamjohnston Jun 14, 2024
ca32a44
Be more deliberate around component spacing
liamjohnston Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 23 additions & 20 deletions cdhweb/pages/templates/cdhpages/blocks/feature_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
{% load wagtailcore_tags wagtailimages_tags %}
{% image self.image width-400 as img_base %}
<div class="feature">
<div class="feature__text-content">
<h2>{{ self.heading }}</h2>
{{ self.feature_text|richtext }}
{% if self.cta_buttons %}
{% include_block self.cta_buttons %}
{% endif %}
</div>

{% image self.image width-750 as img_base %}
{% image self.image width-1200 as img_sm %}
{% image self.image width-1400 as img_md %}
<div class="block block--feature">
<div class="feature">
<div class="feature__text-content">
<h2>{{ self.heading }}</h2>
{{ self.feature_text|richtext }}
{% if self.cta_buttons %}
{% include_block self.cta_buttons %}
{% endif %}
</div>

<picture class="feature__img">
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
<img
src="{{ img_base.url }}"
alt="{{ self.alt_text|default:img_base.alt }}"
loading="lazy"
/>
</picture>
{% image self.image width-750 as img_base %}
{% image self.image width-1200 as img_sm %}
{% image self.image width-1400 as img_md %}

<picture class="feature__img">
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
<img
src="{{ img_base.url }}"
alt="{{ self.alt_text|default:img_base.alt }}"
loading="lazy"
/>
</picture>
</div>
</div>
83 changes: 42 additions & 41 deletions cdhweb/pages/templates/cdhpages/blocks/image_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,47 +17,48 @@
{% image self.image width-2300 as img_xxxl %}
{% endif %}

<figure class="sk-image sk-image--{{ self.size }}">
<picture>
{% if img_sm %}
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
{% endif %}
{% if img_md %}
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
{% endif %}
{% if img_lg %}
<source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
{% endif %}
{% if img_xl %}
<source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
{% endif %}
{% if img_xxl %}
<source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
{% endif %}
{% if img_xxxl %}
<source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
{% endif %}
<img class="sk-image__img"
src="{{ img_base.url }}"
alt="{{ self.alt_text|default:img_base.alt }}"
loading="lazy"
style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
/>
</picture>

{% if self.credit or self.caption %}
<figcaption class="sk-image__text-content">
{% if self.credit %}
<div class="sk-image__credit">
{{ self.credit|richtext }}
</div>
<div class="block block--image">
<figure class="sk-image sk-image--{{ self.size }}">
<picture>
{% if img_sm %}
<source srcset="{{ img_sm.url }}" media="(min-width: 500px)">
{% endif %}
{% if img_md %}
<source srcset="{{ img_md.url }}" media="(min-width: 768px)">
{% endif %}
{% if img_lg %}
<source srcset="{{ img_lg.url }}" media="(min-width: 1024px)">
{% endif %}
{% if self.caption %}
<div class="sk-image__caption">
{{ self.caption|richtext }}
</div>
{% if img_xl %}
<source srcset="{{ img_xl.url }}" media="(min-width: 1200px)">
{% endif %}
</figcaption>
{% endif %}
</figure>
{% if img_xxl %}
<source srcset="{{ img_xxl.url }}" media="(min-width: 1440px)">
{% endif %}
{% if img_xxxl %}
<source srcset="{{ img_xxxl.url }}" media="(min-width: 1920px)">
{% endif %}
<img class="sk-image__img"
src="{{ img_base.url }}"
alt="{{ self.alt_text|default:img_base.alt }}"
loading="lazy"
style="aspect-ratio: {{ img_base.width|unlocalize }} / {{ img_base.height|unlocalize }}"
/>
</picture>

{% if self.credit or self.caption %}
<figcaption class="sk-image__text-content">
{% if self.credit %}
<div class="sk-image__credit">
{{ self.credit|richtext }}
</div>
{% endif %}
{% if self.caption %}
<div class="sk-image__caption">
{{ self.caption|richtext }}
</div>
{% endif %}
</figcaption>
{% endif %}
</figure>
</div>
4 changes: 3 additions & 1 deletion cdhweb/pages/templates/cdhpages/blocks/rich_text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
{% load wagtailcore_tags %}
{{ self | richtext }}
<div class="block block--paragraph">
{{ self | richtext }}
</div>
54 changes: 28 additions & 26 deletions cdhweb/pages/templates/cdhpages/blocks/table_block.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,32 @@

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

{# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
<div class="table-scroll-wrapper" tabindex="0">
<table class="table">
{% if value.caption %}
<caption class="table__caption">{{ value.caption }}</caption>
{% endif %}
<thead class="table__thead">
<tr>
{% for col in value.table.columns %}
<th class="table__th" scope="col">{{ col.heading }}</th>
<div class="block block--table">
{# tabindex is because scrollable elements must be focusable (a11y). allows keyboard users to scroll. #}
<div class="table-scroll-wrapper" tabindex="0">
<table class="table">
{% if value.caption %}
<caption class="table__caption">{{ value.caption }}</caption>
{% endif %}
<thead class="table__thead">
<tr>
{% for col in value.table.columns %}
<th class="table__th" scope="col">{{ col.heading }}</th>
{% endfor %}
</tr>
</thead>
<tbody class="table__tbody">
{% for row in value.table.rows %}
<tr>
{% for block in row %}
<td class="table__td">{% include_block block %}</td>
{% endfor %}
</tr>
{% endfor %}
</tr>
</thead>
<tbody class="table__tbody">
{% for row in value.table.rows %}
<tr>
{% for block in row %}
<td class="table__td">{% include_block block %}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% if value.notes %}
<div class="table__notes">{{ value.notes }}</div>
{% endif %}
</tbody>
</table>
</div>
{% if value.notes %}
<div class="table__notes">{{ value.notes }}</div>
{% endif %}
</div>
2 changes: 1 addition & 1 deletion cdhweb/static_src/global/components/cta.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.block-cta_block {
.cta {
border: 1px solid var(--color-brand-100);
background-color: var(--color-brand-5);
padding: 24px;
Expand Down
6 changes: 3 additions & 3 deletions cdhweb/static_src/global/components/newsletter.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
/*
Newsletter streamfield block.
Note: this uses the same `includes/newsletter_form.html` rendered by in <footer>.
We don't have a streamfield-specific template for it, therefore we're styling this one
the streamfield version based on its wagtail-generated class name `.block-newsletter`.
We don't have a streamfield-specific template for it, but we conditionally add a
`.block--newsletter` wrapper when it's used in a streamfield context.
*/

.block-newsletter {
.block--newsletter {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the most part I'm not styling these .block--x classes in terms of component styling. Mainly just for streamfield-wrapper spacing and alignment.

Newsletter is a special case because I want to keep the DOM light, as it's also used as a non-streamfield block in the footer.

--form-control-border-color: var(--color-grey-80);
--btn-color: var(--color-black);
--btn-bg: var(--color-brand-100);
Expand Down
12 changes: 11 additions & 1 deletion cdhweb/static_src/global/components/tiles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
.tiles--featured {
@include full-bleed-bg(var(--color-grey-5));
padding-block: 40px;

@include md {
padding-block: 72px;
}
}

// Wrapper for component title and 'see more' link, both of
// which are optional. Only renders if content is present.
.tiles__title-wrapper {
Expand Down Expand Up @@ -34,7 +43,7 @@
row-gap: 40px;

@include sm {
grid-template-columns: repeat(auto-fit, minmax(px2rem(280), 1fr));
grid-template-columns: repeat(auto-fill, minmax(px2rem(280), 1fr));
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops. This meant that tiles block with only one tile had a big full-width tile, which we don't want. I always get these two confused.

column-gap: 32px;
}
}
Expand All @@ -48,6 +57,7 @@
.tile__text {
grid-row: 2;
grid-column: 1;
background-color: var(--color-white);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because the component bg can now be grey. But the tile should always have a white bg.

border: 8px solid var(--color-brand-100);
border-top: none;
padding: 24px 12px;
Expand Down
5 changes: 3 additions & 2 deletions cdhweb/static_src/global/components/video.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.sk-video__iframe,
.block-embed iframe {
// Apply to both the video block (.sk-video__iframe) and the
// hosted video block (which we can't access the DOM for)
.block--video :where(iframe) {
aspect-ratio: 16/9;
width: 100%;
display: block;
Expand Down
43 changes: 18 additions & 25 deletions cdhweb/static_src/global/layout/streamfields.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,42 @@
display: flex;
flex-direction: column;

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

// Cases where there should be a `sm` space above:
&:where(
:is(
.block-image,
.block-table,
.block-note,
.block-paragraph,
.block-pull_quote,
.block-accordion_block:not(:has(> h2)),
.block-embed:not(:has(> h2)),
.block-video_block:not(:has(> h2))
.block--image,
.block--table,
.block--note,
.block--paragraph,
.block--pull-quote,
.block--accordion:not(:has(> h2)),
.block--video:not(:has(> h2))
)
) {
margin-block-start: var(--streamfield-space-sm);
}

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

& > * {
// Cap width of some (most?) streamfield block types
&:where(
.block-accordion_block,
.block-table,
.block-paragraph,
.block-download_block,
.block-cta_block,
.block-note,
.block-pull_quote,
.block-video_block,
.block-embed
.block--accordion,
.block--table,
.block--paragraph,
.block--download,
.block--cta,
.block--note,
.block--pull-quote,
.block--video
) {
max-inline-size: var(--reading-max-width);
}
Expand All @@ -53,12 +51,7 @@
// Outdented components.
// Tile block title is excluded because it needs to be wrapped in another
// container to allow the "see all" link to display in line with it.
:where(
.block-heading,
.block-accordion_block > h2,
.block-video_block > h2,
.block-embed > h2
) {
:where(.block--heading, .block--accordion > h2, .block--video > h2) {
@include md {
margin-left: calc(-1 * var(--content-outdent));
}
Expand Down
2 changes: 1 addition & 1 deletion cdhweb/static_src/global/migrated-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
Regarding content migrated as part of Springload's 2024 rebuild.
Existing content was dumped into a "migrated" content streamfield block.
*/
.migrated-content {
.block--migrated-content {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is another special case. I mean, I could add another wrapper but I don't intend to add any styling for this content at this stage.

:where(h2) {
@include md {
margin-left: calc(-1 * var(--content-outdent));
Expand Down
2 changes: 1 addition & 1 deletion cdhweb/static_src/global/rich-text.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
margin-bottom: var(--space-h6-lg);
}

:where(.block-paragraph blockquote) {
:where(.block--paragraph blockquote) {
@include outdented-line-block;
}

Expand Down
6 changes: 3 additions & 3 deletions templates/blog/blog_post.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<div class="content-width grid-standard page-layout page-layout--without-sidenav">
<div class="page-layout__main-content">
<div class="streamfields-wrapper">
{% if page.body %}
{% include_block page.body %}
{% endif %}
{% for block in page.body %}
{% include_block block %}
{% endfor %}
Comment on lines +11 to +13
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the method that stops rendering the auto-generated wrapping divs. I have applied it everywhere we loop over streamfields.

</div>
</div>
</div>
Expand Down
Loading
Loading