General frontend tweaks (lazy load CTA images and styling updates) (#389)

shyusu4 · web-flow · commit 36444b34518e · 2025-04-14T12:40:59.000+03:00
* Add small heading variant to feature services cards

* Update torchbox public logo height

* Lazy load footer CTA avatar

* Lazy load contact CTA

* Fix desktop submenu layout

* Update torchbox public logo svg

* Update featured services heading size
diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html
@@ -72,7 +72,7 @@
     </symbol>
 
     {# Logo: Torchbox Public #}
-    <symbol id="logo-public" viewBox="0 0 1283 220" fill="none">
+    <symbol id="logo-public" viewBox="0 0 1283 200" fill="none">
         <path fill="currentColor" d="M119.519 93.327c.754-1.318 2.734-.941 2.923.564.471 4.33 1.037 11.011.094 18.257-2.074 16.468-15.747 43.287-44.885 50.816-1.32.376-2.357-1.129-1.603-2.353 2.64-4.14 4.243-9.975 4.243-17.597 0-17.409-18.859-43.853-18.859-43.853s-18.859 26.444-18.859 43.853c0 7.528 1.603 13.363 4.243 17.503.849 1.223-.188 2.729-1.603 2.353-29.986-7.999-47.43-38.018-44.979-67.379 1.037-12.14 7.827-23.243 11.787-28.701.849-1.13 2.735-.565 2.83.94.282 6.305 1.696 17.786 8.014 27.385l.189.188c3.112-6.587 6.412-11.387 6.412-11.387 2.734-4.14 5.94-8.28 8.864-11.48 15.37-17.41 18.765-35.29 9.618-54.204-.66-1.412.943-2.823 2.263-1.976 13.956 8.657 53.56 38.3 54.315 92.974v.847c4.337-2.07 10.561-8.845 14.993-16.75ZM173.985 57.33v103.517h24.367V57.33h39.842V35.808H134.143V57.33h39.842ZM520.864 111.579v49.269h23.3v-54.427c0-6.522-1.423-12.273-4.269-17.253-2.845-4.98-6.817-8.893-11.916-11.739-4.98-2.846-10.731-4.269-17.253-4.269s-12.332 1.423-17.431 4.27a30.598 30.598 0 0 0-6.936 5.387V35.812h-23.301v125.036h23.301v-49.269c0-3.439.711-6.462 2.134-9.071 1.542-2.609 3.617-4.624 6.225-6.047 2.609-1.423 5.573-2.135 8.894-2.135 5.098 0 9.248 1.601 12.45 4.803 3.202 3.201 4.802 7.351 4.802 12.45Z"/>
         <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M603.295 162.626c-6.166 0-11.739-1.304-16.719-3.913-2.967-1.553-5.575-3.444-7.826-5.67v7.805h-23.123V35.812h23.3v46.545c2.279-2.171 4.887-3.992 7.826-5.461 4.981-2.49 10.494-3.736 16.542-3.736 7.945 0 15.059 1.957 21.344 5.87 6.284 3.913 11.205 9.249 14.762 16.008 3.676 6.759 5.514 14.407 5.514 22.944 0 8.419-1.838 16.008-5.514 22.767-3.557 6.759-8.478 12.095-14.762 16.008-6.285 3.913-13.399 5.869-21.344 5.869Zm-3.913-21.521c4.269 0 8.004-.949 11.205-2.846 3.32-2.016 5.87-4.743 7.649-8.182 1.897-3.557 2.845-7.648 2.845-12.273 0-4.505-.948-8.478-2.845-11.916-1.779-3.558-4.329-6.285-7.649-8.182-3.32-2.016-7.114-3.024-11.383-3.024-4.269 0-8.063 1.008-11.383 3.024-3.202 1.897-5.751 4.624-7.649 8.182-1.778 3.438-2.667 7.411-2.667 11.916 0 4.625.889 8.716 2.667 12.273 1.898 3.439 4.506 6.166 7.826 8.182 3.321 1.897 7.115 2.846 11.384 2.846ZM675.809 156.756c6.996 3.914 14.822 5.87 23.478 5.87 8.656 0 16.423-1.956 23.3-5.87 6.996-4.031 12.51-9.426 16.541-16.185 4.032-6.878 6.048-14.526 6.048-22.945s-2.016-15.948-6.048-22.589c-4.031-6.758-9.545-12.094-16.541-16.007-6.877-4.032-14.704-6.048-23.478-6.048-8.538 0-16.304 2.016-23.3 6.048-6.996 3.913-12.51 9.249-16.542 16.007-4.031 6.641-6.047 14.17-6.047 22.589 0 8.419 2.016 16.067 6.047 22.945 4.15 6.759 9.664 12.154 16.542 16.185Zm34.861-18.675c-3.32 1.897-7.174 2.846-11.561 2.846-4.269 0-8.063-.949-11.383-2.846-3.321-2.016-5.929-4.743-7.827-8.182-1.897-3.557-2.845-7.589-2.845-12.095s.948-8.478 2.845-11.917c1.898-3.439 4.506-6.106 7.827-8.004 3.32-2.015 7.114-3.023 11.383-3.023 4.387 0 8.241 1.008 11.561 3.023 3.32 1.898 5.929 4.565 7.826 8.004 1.897 3.439 2.846 7.411 2.846 11.917s-.949 8.538-2.846 12.095c-1.779 3.439-4.387 6.166-7.826 8.182Z"/>
         <path fill="currentColor" d="m784.425 133.171 17.933 27.676h27.391l-30.628-44.172 29.027-41.737h-26.146l-16.264 25.175-16.641-25.175h-27.569l29.568 41.992-31.347 43.917h26.324l18.352-27.676ZM422.39 162.626c-8.775 0-16.66-1.956-23.656-5.87-6.996-3.913-12.51-9.248-16.541-16.007-4.032-6.759-6.048-14.348-6.048-22.767 0-8.538 2.016-16.186 6.048-22.945 4.031-6.758 9.545-12.094 16.541-16.007 7.115-4.032 15-6.048 23.656-6.048 6.759 0 12.984 1.245 18.676 3.735a42.52 42.52 0 0 1 14.763 10.672l-14.941 15.119c-2.253-2.49-4.98-4.387-8.182-5.692-3.083-1.304-6.522-1.956-10.316-1.956-4.269 0-8.123 1.008-11.561 3.023-3.32 1.898-5.988 4.565-8.004 8.004-1.897 3.32-2.846 7.293-2.846 11.917 0 4.506.949 8.538 2.846 12.095 2.016 3.439 4.684 6.166 8.004 8.182 3.438 1.897 7.292 2.846 11.561 2.846 3.913 0 7.411-.653 10.494-1.957 3.202-1.423 5.929-3.439 8.182-6.047l15.118 15.118c-4.387 4.743-9.427 8.36-15.118 10.85-5.692 2.49-11.917 3.735-18.676 3.735ZM315.61 74.94v85.908h23.3v-47.49c0-6.403 1.542-11.146 4.625-14.23 3.201-3.2 7.292-4.802 12.272-4.802 2.372 0 4.447.356 6.225 1.068 1.898.711 3.499 1.778 4.803 3.201l14.585-16.719c-2.728-3.083-5.751-5.277-9.071-6.581-3.32-1.423-7.056-2.134-11.206-2.134-9.605 0-16.956 3.083-22.055 9.249l-.085.1-.031.038-.062.075v-7.684h-23.3Z"/>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html b/tbx/project_styleguide/templates/patterns/molecules/footer-cta/footer-cta.html
@@ -7,7 +7,7 @@ <h2 class="motif-heading">{{ contact_heading }}</h2>
         {% endif %}
         <p class="footer-cta__subtitle">{{ contact_text }}</p>
         <div class="footer-cta__container">
-            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--cta" %}
+            {% include "patterns/atoms/avatar/avatar.html" with avatar=contact_image classes="footer-cta__avatar avatar--cta" lazy_load=True %}
             <div class="footer-cta__content">
                 <div class="footer-cta__text">
                     <p><span class="footer-cta__name">{{ contact_name }} </span>{{ contact_role }}</p>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html
@@ -2,7 +2,7 @@
 <div class="contact-cta grid__contact-cta">
     {# Contact person photo #}
     {% if value.person %}
-        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar avatar--cta" %}
+        {% include "patterns/atoms/avatar/avatar.html" with avatar=value.person.image classes="contact-cta__avatar avatar--cta" lazy_load=True %}
     {% endif %}
 
     {# call_to_action is a required field (streamblock) in the block definition #}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/featured_services_block.html
@@ -11,7 +11,7 @@ <h2 class="motif-heading motif-heading--half-width">{{ value.title }}</h2>
             <li class="featured-services__card">
                 {% srcset_image card.image format-webp fill-{750x420,650x420} sizes="(max-width: 750px) 100vw, (min-width: 751px) 650px" alt="" %}
                 <div class="featured-services__text">
-                    <h3 class="featured-services__heading heading heading--two-b">{% firstof card.heading card.page.title %}</h3>
+                    <h3 class="featured-services__heading heading heading--two-b{% if value.cards|length >= 4 %} heading--three{% endif %}">{% firstof card.heading card.page.title %}</h3>
                     {% if card.subheading %}
                         <p class="featured-services__subheading">{{ card.subheading }}</p>
                     {% endif %}
diff --git a/tbx/static_src/sass/components/_featured-services.scss b/tbx/static_src/sass/components/_featured-services.scss
@@ -49,6 +49,7 @@
     &__heading {
         color: var(--color--heading);
         margin-bottom: $spacer-mini;
+        word-wrap: break-word;
         line-height: 1;
     }
 
diff --git a/tbx/static_src/sass/components/_logo.scss b/tbx/static_src/sass/components/_logo.scss
@@ -36,8 +36,8 @@
         height: 30px;
 
         @include media-query(large) {
-            width: 227px;
-            height: 41px;
+            width: 229px;
+            height: 39px;
         }
     }
 
diff --git a/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss b/tbx/static_src/sass/components/navigation/_sub-nav-desktop.scss
@@ -46,10 +46,17 @@ Styles for the lower levels of the navigation at desktop
     // the unordered list containing the level 2 menu items
     // also used for the level 3 menu items
     &__list {
-        display: flex;
-        flex-direction: row;
-        row-gap: $spacer-half;
+        display: grid;
+        row-gap: $spacer-small-plus;
         column-gap: $spacer-medium;
+        grid-template-columns: repeat(4, 1fr);
+
+        #{$root}--2 & {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        #{$root}--3 & {
+            grid-template-columns: repeat(3, 1fr);
+        }
 
         // at desktop the third level is always visible once the subnav is expanded
         // it sits inside each column
@@ -63,22 +70,6 @@ Styles for the lower levels of the navigation at desktop
     &__item {
         display: flex;
         flex-direction: column;
-        // at desktop level 2 these are arranged in columns
-        // which are based on the number of items at that level
-        flex-basis: calc(100% - #{$spacer-small});
-
-        #{$root}--2 &,
-        #{$root}--3 & {
-            flex-basis: calc(33.33% - #{$spacer-small});
-        }
-
-        #{$root}--4 & {
-            flex-basis: calc(50% - #{$spacer-small});
-
-            @include media-query(large) {
-                flex-basis: calc(25% - #{$spacer-small});
-            }
-        }
     }
 
     // the heading for each menu item in the 2nd and 3rd level

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@`
`49`	`49`	`&__heading {`
`50`	`50`	`color: var(--color--heading);`
`51`	`51`	`margin-bottom: $spacer-mini;`
	`52`	`+ word-wrap: break-word;`
`52`	`53`	`line-height: 1;`
`53`	`54`	`}`
`54`	`55`
Original file line number	Diff line number	Diff line change
`@@ -36,8 +36,8 @@`
`36`	`36`	`height: 30px;`
`37`	`37`
`38`	`38`	`@include media-query(large) {`
`39`		`- width: 227px;`
`40`		`- height: 41px;`
	`39`	`+ width: 229px;`
	`40`	`+ height: 39px;`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`