diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html index 2896f4fc0..f60c3f6b8 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html @@ -1,10 +1,17 @@ {% load wagtailcore_tags wagtailimages_tags %} -
- {% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} - {% endfor %} +
+ {# Note the tabindex is important here as it makes the div focussable, meaning that the scrollbar can be operated with the keyboard #} +
+
+ {% for item in value.images %} +
+ {% srcset_image item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.alt_text %} +
+ {% endfor %} +
+
{% if value.caption %} - {{ value.caption|richtext }} +
{{ value.caption|richtext }}
{% endif %} {% if value.description %} {{ value.description|richtext }} diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml index 2b7ece7e4..316b133f7 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.yaml @@ -10,6 +10,6 @@ context: tags: srcset_image: - item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: + 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.alt_text': raw: | - + diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html index 65607a656..82a2f08cc 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html @@ -1,12 +1,12 @@ {% load wagtailcore_tags wagtailimages_tags %} -
-
+
+
{% for item in value.images %} - {% srcset_image item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text %} + {% srcset_image item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text %} {% endfor %}
-
- {{ value.introduction|richtext }} - {% if value.description %}{{ value.description|richtext }}{% endif %} +
+
{{ value.introduction|richtext }}
+ {% if value.description %}
{{ value.description|richtext }}
{% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml index 1ea955451..c80f90561 100644 --- a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml +++ b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.yaml @@ -8,6 +8,5 @@ context: tags: srcset_image: - item.image format-webp loading="lazy" fill-{100x100} alt=item.image.alt_text: - raw: | - + 'item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text': + raw: 'alt' diff --git a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html index b455ff849..510baa7ea 100644 --- a/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html +++ b/tbx/project_styleguide/templates/patterns/pages/divisions/division_page.html @@ -3,12 +3,16 @@ {% block content %} -

Title: {{ page.title }}

+
+
+

{{ page.title }}

-

Label for logo: {{ page.label }}

+

{{ page.label }}

+
- {% include_block page.hero %} +
{% include_block page.hero %}
- {% include_block page.body %} + {% include_block page.body %} +
{% endblock content %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html index a08d43ba4..485b3390c 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.html +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.html @@ -149,6 +149,16 @@

Photo collage block

{% include "patterns/molecules/streamfield/blocks/photo_collage_block.html" %}
+
+

Four photo collage block

+ {% include "patterns/molecules/streamfield/blocks/four_photo_collage_block.html" %} +
+ +
+

Introduction with images block

+ {% include "patterns/molecules/streamfield/blocks/introduction_with_images_block.html" %} +
+

Tabbed paragraph block

{% include "patterns/molecules/streamfield/blocks/tabbed_paragraph_block.html" %} diff --git a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml index a11ec09e7..5cd04562f 100644 --- a/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml +++ b/tbx/project_styleguide/templates/patterns/styleguide/components/components.yaml @@ -107,6 +107,14 @@ tags: 'item.image format-webp loading="lazy" fill-{288x288,576x576} sizes="(max-width: 598px) 576px, (min-width: 599px) 288px" class="photo-collage__image" alt=item.image_alt_text': raw: | alt text + # four photo collage block + 'item.image format-webp loading="lazy" fill-{500x500,600x600} sizes="(max-width: 1022px) 600px, 500px" class="four-photo-collage__image" alt=item.image.alt_text': + raw: | + + # introduction with images block + 'item.image format-webp loading="lazy" fill-{200x300,400x600,600x900} sizes="(max-width: 598px) 150px, (max-width: 799px) 300px, 700px" class="intro-with-images__image" alt=item.image_alt_text': + raw: | + alt text # values block 'value_item.image.image format-webp width-{482,964} sizes="(max-width: 598px) 100vw, (min-width: 599px) 30vw" loading="lazy" class="values__image"': raw: 'test alt' diff --git a/tbx/static_src/sass/components/_four-photo-collage.scss b/tbx/static_src/sass/components/_four-photo-collage.scss new file mode 100644 index 000000000..cdc8684b8 --- /dev/null +++ b/tbx/static_src/sass/components/_four-photo-collage.scss @@ -0,0 +1,121 @@ +@use 'config' as *; + +.four-photo-collage { + display: grid; + grid-template-columns: subgrid; + + &__scroller { + width: 100%; + overflow-x: scroll; + margin-bottom: $spacer-medium; + grid-column: 1 / span 5; + + @include media-query(large) { + overflow-x: visible; + width: auto; + margin-bottom: $spacer-small-plus; + grid-column: 2 / span 11; + } + + &:focus { + @include focus-style(); + } + } + + &__container { + display: flex; + column-gap: 10px; + height: 270px; + // calculated based on the total width of the images rendered at the correct aspect ratio plus the 10px gap + aspect-ratio: 1946 / 403; + + @include media-query(small) { + height: 370px; + } + + @include media-query(medium) { + height: 403px; + } + + @include media-query(large) { + display: grid; + height: auto; + // based on the size we want the images to render + grid-template-columns: + minmax(100px, 200px) minmax(60px, 120px) minmax(210px, 420px) + minmax(320px, 640px); + grid-template-rows: minmax(180px, 360px) minmax(230px, 460px) minmax( + 40px, + 80px + ); + gap: $spacer-mini-plus; + // ensures the individual images remain at the correct aspect ratio + aspect-ratio: 7 / 4; + } + } + + // These styles could just be applied direct to the images without a wrapper, + // but we do it on the wrapper to save having to mock loads of images with different + // classes in the pattern library + &__image-wrapper { + @include media-query(large) { + height: auto; + } + + // Some browsers seem to need the aspect ratio set explicitly on each image wrapper at mobile + // but this needs unsetting at desktop + &--1 { + aspect-ratio: 4 / 3; + + @include media-query(large) { + grid-column: 1 / span 2; + grid-row: 1 / span 1; + aspect-ratio: auto; + } + } + + &--2 { + aspect-ratio: 4 / 3; + + @include media-query(large) { + grid-column: 3 / span 1; + grid-row: 1 / span 1; + aspect-ratio: auto; + } + } + + &--3 { + aspect-ratio: 3 / 4; + + @include media-query(large) { + grid-column: 4 / span 1; + grid-row: 1 / span 3; + aspect-ratio: auto; + } + } + + &--4 { + aspect-ratio: 7 / 5; + + @include media-query(large) { + grid-column: 2 / span 2; + grid-row: 2 / span 1; + aspect-ratio: auto; + } + } + } + + &__image { + width: 100%; + height: 100%; + object-fit: cover; + } + + &__caption { + grid-column: 1 / span 4; + + @include media-query(large) { + grid-column: 1 / span 7; + } + } +} diff --git a/tbx/static_src/sass/components/_grid.scss b/tbx/static_src/sass/components/_grid.scss index 38a0705c7..7b8e586b1 100644 --- a/tbx/static_src/sass/components/_grid.scss +++ b/tbx/static_src/sass/components/_grid.scss @@ -52,6 +52,16 @@ } } + &__intro-with-images { + grid-column: 1 / span 5; + margin-bottom: $spacer-small-plus; + + @include media-query(large) { + margin-bottom: $spacer-large; + grid-column: 2 / span 12; + } + } + &__quote { margin-bottom: $spacer-medium; grid-column: 2 / span 4; @@ -181,6 +191,16 @@ } } + &__four-photo-collage { + grid-column: 2 / span 5; + margin-bottom: $spacer-medium; + + @include media-query(large) { + grid-column: 2 / span 12; + margin-bottom: $spacer; + } + } + &__promo, &__event { grid-column: 2 / span 5; diff --git a/tbx/static_src/sass/components/_intro-with-images.scss b/tbx/static_src/sass/components/_intro-with-images.scss new file mode 100644 index 000000000..c0c5b35c9 --- /dev/null +++ b/tbx/static_src/sass/components/_intro-with-images.scss @@ -0,0 +1,74 @@ +@use 'config' as *; + +.intro-with-images { + display: grid; + gap: $spacer-medium; + + @include media-query(large) { + grid-template-columns: 1fr 1fr; + margin-right: -20px; // extend outside the grid + } + + @include media-query(x-large) { + gap: $spacer-large; + } + + &__collage { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $spacer-mini-plus; + + @include media-query(medium) { + max-width: 80vw; + } + + @include media-query(large) { + grid-column: 2 / span 1; + } + } + + &__image { + width: 100%; + + &:first-child { + margin-top: $spacer-small-plus; + + @include media-query(large) { + margin-top: $spacer-medium; + } + } + + &:last-child { + margin-bottom: $spacer-small-plus; + + @include media-query(large) { + margin-bottom: $spacer-medium; + } + } + } + + &__text { + margin: 0 $spacer-small; + display: flex; + flex-direction: column; + gap: $spacer-small-plus; + + @include media-query(large) { + margin: $spacer-half 0 0; + grid-column: 1 / span 1; + grid-row: 1; + } + } + + &__title { + a { + // override rich text link color styles + .rich-text & { + @include link-styles( + var(--color--heading), + var(--color--heading) + ); + } + } + } +} diff --git a/tbx/static_src/sass/components/_photo-collage.scss b/tbx/static_src/sass/components/_photo-collage.scss index 559eea553..5245f10eb 100644 --- a/tbx/static_src/sass/components/_photo-collage.scss +++ b/tbx/static_src/sass/components/_photo-collage.scss @@ -122,7 +122,7 @@ } // Some browsers seem to need the aspect ratio set explicitly on each image wrapper at mobile - // but this needs unsetting at desltop + // but this needs unsetting at desktop &--1 { aspect-ratio: 1 / 1; diff --git a/tbx/static_src/sass/main.scss b/tbx/static_src/sass/main.scss index deafcf436..6e12c478f 100755 --- a/tbx/static_src/sass/main.scss +++ b/tbx/static_src/sass/main.scss @@ -25,12 +25,14 @@ @use 'components/footer'; @use 'components/footer-cta'; @use 'components/form'; +@use 'components/four-photo-collage'; @use 'components/grid'; @use 'components/header'; @use 'components/home-page-hero'; @use 'components/home-page-intro'; @use 'components/image'; @use 'components/instagram-gallery'; +@use 'components/intro-with-images'; @use 'components/link'; @use 'components/listing'; @use 'components/listing-avatar';