Streamfield wrapper overhaul and featured tiles style #101
Conversation
| */ | ||
|
|
||
| .block-newsletter { | ||
| .block--newsletter { |
There was a problem hiding this comment.
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.
| @@ -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)); | |||
There was a problem hiding this comment.
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.
| @@ -48,6 +57,7 @@ | |||
| .tile__text { | |||
| grid-row: 2; | |||
| grid-column: 1; | |||
| background-color: var(--color-white); | |||
There was a problem hiding this comment.
Because the component bg can now be grey. But the tile should always have a white bg.
| @@ -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 { | |||
There was a problem hiding this comment.
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.
| {% for block in page.body %} | ||
| {% include_block block %} | ||
| {% endfor %} |
There was a problem hiding this comment.
This is the method that stops rendering the auto-generated wrapping divs. I have applied it everywhere we loop over streamfields.
liamjohnston
deleted the
feature/streamfield-wrappers-and-featured-tile-style
branch
Hide whitespace changes when reviewing this.
This PR does two sort of related things.
Firstly: adds a style (background-color & padding) and when a standard tiles block is "featured":
Secondly: this was the catalyst for finally refactoring the streamfield blocks to not auto-magically render wrapping divs that don't exist in any template, e.g.
.block-accordion_block.While it seems like I'm adding a bunch of extra divs here, I'm essentially just renaming the divs that were already rendering, but with a bit more consistency/control. Now we don't need to style tags that have no corresponding html in the codebase.