From 3a4164f7be6fab1a7d0880a45a8f72bbf9555473 Mon Sep 17 00:00:00 2001 From: Albina Starykova Date: Tue, 24 Dec 2024 15:43:37 +0100 Subject: [PATCH 1/3] Homepage redesign --- docs/front-end/grid.md | 2 +- tbx/core/models.py | 2 +- .../streamfield/home_story_container.html | 1 + .../streamfield/home_story_container.yaml | 5 ++ .../atoms/icons/background-swirls.html | 20 ++++++++ .../patterns/atoms/sprites/sprites.html | 4 +- .../home-page-hero/home-page-hero.html | 2 +- .../partner_logos/partner_logos.html | 6 +-- .../partner_logos/partner_logos.yaml | 8 +-- .../blocks/division_signpost_block.html | 49 +++++++++---------- .../streamfield/blocks/partners_block.yaml | 8 +-- .../patterns/pages/home/home_page.html | 9 +++- .../patterns/pages/home/home_page.yaml | 21 ++++++-- .../styleguide/components/components.yaml | 8 +-- .../sass/components/_division-signpost.scss | 2 - .../sass/components/_employee-owned-icon.scss | 6 +-- tbx/static_src/sass/components/_grid.scss | 28 +++-------- .../sass/components/_home-page-hero.scss | 9 ++-- .../sass/components/_home-page-intro.scss | 38 ++++++++++++++ tbx/static_src/sass/components/_logo.scss | 13 ++--- tbx/static_src/sass/components/_partners.scss | 34 ++++++------- .../sass/components/_rich-text.scss | 3 +- tbx/static_src/sass/components/_swirls.scss | 25 ++++++++++ tbx/static_src/sass/config/_variables.scss | 5 ++ tbx/static_src/sass/main.scss | 2 + 25 files changed, 195 insertions(+), 115 deletions(-) create mode 100644 tbx/project_styleguide/templates/patterns/atoms/icons/background-swirls.html create mode 100644 tbx/static_src/sass/components/_home-page-intro.scss create mode 100644 tbx/static_src/sass/components/_swirls.scss diff --git a/docs/front-end/grid.md b/docs/front-end/grid.md index df3480c97..e537c5c4a 100644 --- a/docs/front-end/grid.md +++ b/docs/front-end/grid.md @@ -36,7 +36,7 @@ Any alignment or spacing rules for a component should be added using BEM syntax grid-column: 2 / span 4; @include media-query(large) { - grid-column: 4 / span 9; + grid-column: 2 / span 9; } } } diff --git a/tbx/core/models.py b/tbx/core/models.py index 36b68f999..b857d2c9c 100644 --- a/tbx/core/models.py +++ b/tbx/core/models.py @@ -179,7 +179,7 @@ def partner_logos(self): " sentence or one paragraph, depending on the presence of punctuation." ), ), - InlinePanel("logos", heading="Partner logos", label="logo", max_num=7), + InlinePanel("logos", heading="Partner logos", label="logo", max_num=12), FieldPanel("body"), ] diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.html b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.html index 93e506b9f..7dd6a7320 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.html +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.html @@ -1,4 +1,5 @@ +{% include "patterns/molecules/streamfield/blocks/division_signpost_block.html" %} {% include "patterns/molecules/streamfield/blocks/promo_block.html" %} {% include "patterns/molecules/streamfield/blocks/event_block.html" %} {% include "patterns/molecules/streamfield/blocks/featured_case_study.html" %} diff --git a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.yaml b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.yaml index b8883d734..4a4347fc5 100644 --- a/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.yaml +++ b/tbx/project_styleguide/templates/patterns/_pattern_library_only/streamfield/home_story_container.yaml @@ -1,5 +1,10 @@ tags: srcset_image: + # Division signpost + 'card.image format-webp fill-{540x280,490x280} sizes="(max-width: 598px) 540px, (min-width: 599px) 490px" alt=""': + raw: | + + # Featured case study 'value.featured_case_study_image format-webp fill-{400x225,800x450,1600x900,1280x720} sizes="(max-width: 1022px) 90vw, (max-width: 1789px) 50vw, (min-width: 1800px) 1120px" class="featured-case-study__image"': raw: 'Jeth-JulyImage_from_iOS' diff --git a/tbx/project_styleguide/templates/patterns/atoms/icons/background-swirls.html b/tbx/project_styleguide/templates/patterns/atoms/icons/background-swirls.html new file mode 100644 index 000000000..e5a748be3 --- /dev/null +++ b/tbx/project_styleguide/templates/patterns/atoms/icons/background-swirls.html @@ -0,0 +1,20 @@ + +{% comment %} +This SVG doesn't work well when added to sprite.html, +so we've separated it into its own HTML file. +{% endcomment %} + + + + + + + + + + + + + + + diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html index a7aa5f8f5..bd0f0620a 100644 --- a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html +++ b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html @@ -43,8 +43,8 @@ -