-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #333 from torchbox/feature/twe-8-division-page-fe
TWE-8 | FE | Division page
- Loading branch information
Showing
12 changed files
with
266 additions
and
21 deletions.
There are no files selected for viewing
17 changes: 12 additions & 5 deletions
17
..._styleguide/templates/patterns/molecules/streamfield/blocks/four_photo_collage_block.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 6 additions & 6 deletions
12
...guide/templates/patterns/molecules/streamfield/blocks/introduction_with_images_block.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,12 @@ | ||
| {% load wagtailcore_tags wagtailimages_tags %} | ||
| <div> | ||
| <div> | ||
| <div class="grid__intro-with-images intro-with-images"> | ||
| <div class="intro-with-images__collage"> | ||
| {% 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 %} | ||
| </div> | ||
| <div> | ||
| {{ value.introduction|richtext }} | ||
| {% if value.description %}{{ value.description|richtext }}{% endif %} | ||
| <div class="intro-with-images__text rich-text"> | ||
| <div class="intro-with-images__title heading heading--three heading--light">{{ value.introduction|richtext }}</div> | ||
| {% if value.description %}<div class="text text--six">{{ value.description|richtext }}</div>{% endif %} | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
tbx/static_src/sass/components/_four-photo-collage.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) | ||
| ); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters