From add5d4040eceeebf194b316c938dd7370820f135 Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 09:58:11 +0200 Subject: [PATCH 1/7] Tweak: moved icons of USP items Moved icon of USP items to bottom. Aligned icons at bottom regardless of USP height. --- comments.MD | 5 ++++ src/index.html | 39 +++++++++++++-------------- src/scss/component/component-usp.scss | 6 ++++- 3 files changed, 29 insertions(+), 21 deletions(-) create mode 100644 comments.MD diff --git a/comments.MD b/comments.MD new file mode 100644 index 0000000..fba1e57 --- /dev/null +++ b/comments.MD @@ -0,0 +1,5 @@ +# Comments / things that stand out + +- Grid is always 12 columns +- For the first task, I just changed classNames, because its the easiest solution. +- For the second task, I moved the markup of the icons down, also removed some CSS that added element-spacing to the bottom of the item. I realize it's already handled by a `:last-child` selector in the _critical.css but I think for maintainability and readability sake it's better to also remove it from the component specific styling. I think if a new element was introduced underneath, it would need to be re-evaluated anyways with regards to how much whitespace there should be between items. \ No newline at end of file diff --git a/src/index.html b/src/index.html index 1b85c24..14badf3 100644 --- a/src/index.html +++ b/src/index.html @@ -1494,51 +1494,50 @@

Featured products slider

-
- + +
+

Wireless

+
+

Your personal heating buddy whenever and wherever you need it

+

-

Wireless

-
-

Your personal heating buddy whenever and wherever you need it

-
-
-
+
+

Save energy

+
+

Every degree lower on your thermostat saves 7% energy

+

-

Save energy

+
+
+

Free shipment

-

Every degree lower on your thermostat saves 7% energy

+

Fast & free shipping

-
-

-

Free shipment

+
+
+

30 days return policy

-

Fast & free shipping

+

Experience our infrared heating yourself

-
-

-

30 days return policy

-
-

Experience our infrared heating yourself

-
diff --git a/src/scss/component/component-usp.scss b/src/scss/component/component-usp.scss index 3be70e2..b6b3c58 100644 --- a/src/scss/component/component-usp.scss +++ b/src/scss/component/component-usp.scss @@ -17,6 +17,10 @@ padding-inline: var(--site-side-spacing-xxl); } } + &__wrapper { + display: flex; + flex-direction: column; + } &__title { margin-bottom: 0; @include mqmax($bp-md) { @@ -29,7 +33,7 @@ &__icon { display: inline-flex; padding: rem(10); - margin: 0 auto calc(var(--element-spacing) * 3) auto; + margin: auto auto 0 auto; transform: scale(1); transition: transform var(--duration-default) ease-in-out; @include mqmin($bp-xl) { From 336645d8c9c813c5b1d72c641f52354f8a2e5a37 Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 10:18:44 +0200 Subject: [PATCH 2/7] Fix: Changed section heading elements. --- src/index.html | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/index.html b/src/index.html index 14badf3..941224f 100644 --- a/src/index.html +++ b/src/index.html @@ -338,7 +338,7 @@

-

+ -

+
-

Wireless

+

Wireless

Your personal heating buddy whenever and wherever you need it

@@ -1507,7 +1509,7 @@

Featured products slider

-

Save energy

+

Save energy

Every degree lower on your thermostat saves 7% energy

@@ -1518,7 +1520,7 @@

Featured products slider

-

Free shipment

+

Free shipment

Fast & free shipping

@@ -1529,7 +1531,7 @@

Featured products slider

-

30 days return policy

+

30 days return policy

Experience our infrared heating yourself

From b60db1e3f633ecc419aead28b9651772b0f4afda Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 10:34:36 +0200 Subject: [PATCH 3/7] Fix: Improved touch-target size of newsletter submit button Increased the touch-size of the newsletter submit button on mobile sizes. --- comments.MD | 6 +++++- src/index.html | 4 +++- src/scss/section/section-footer.scss | 15 +++++++++++++-- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/comments.MD b/comments.MD index fba1e57..507edce 100644 --- a/comments.MD +++ b/comments.MD @@ -2,4 +2,8 @@ - Grid is always 12 columns - For the first task, I just changed classNames, because its the easiest solution. -- For the second task, I moved the markup of the icons down, also removed some CSS that added element-spacing to the bottom of the item. I realize it's already handled by a `:last-child` selector in the _critical.css but I think for maintainability and readability sake it's better to also remove it from the component specific styling. I think if a new element was introduced underneath, it would need to be re-evaluated anyways with regards to how much whitespace there should be between items. \ No newline at end of file +- For the second task, I moved the markup of the icons down, also removed some CSS that added element-spacing to the bottom of the item. I realize it's already handled by a `:last-child` selector in the _critical.css but I think for maintainability and readability sake it's better to also remove it from the component specific styling. I think if a new element was introduced underneath, it would need to be re-evaluated anyways with regards to how much whitespace there should be between items. I also made it so that the icons are aligned at the bottom with each other to make the visuals seem not as chaotic. +- Why is 1 of the USP items a link while the others arent? for now I'll just assume it was a mistake and remove the link element. The only reason I'm doing so is because I want to add flex and I would have to add flex to 2 different items. +- For the reviews section with regards to headings; I think there might need to be some change anyway; none of the texts on their own are a very good indicator of the section in the page structure. Similarly, the USP's could do with a (visually hidden) heading 2, and potentially the actual USP items could get a heading 3 (their title) +- Also no completely sure about the headings in the slider hero. +- For the touch target size, I've upped the size on mobile. The button is still touching the edge of the input field.I don't know if this is intentional design wise, so I left it (I checked the initial styling). Also, the + is falling out of the button, so I added some markup + styling to fix this. diff --git a/src/index.html b/src/index.html index 941224f..b2c9c91 100644 --- a/src/index.html +++ b/src/index.html @@ -1685,7 +1685,9 @@

30 days return policy

required >
diff --git a/src/scss/section/section-footer.scss b/src/scss/section/section-footer.scss index 3ba249e..c8d822e 100644 --- a/src/scss/section/section-footer.scss +++ b/src/scss/section/section-footer.scss @@ -138,10 +138,21 @@ width: rem(20); height: rem(20); padding: 0; + @include mqmax($bp-md) { + width: rem(24); + height: rem(24); + } .icon { - width: rem(32); - height: rem(32); + display: flex; + justify-content: center; + align-items: center; margin: 0; + width: rem(16); + height: rem(16); + @include mqmax($bp-md) { + width: rem(20); + height: rem(20); + } } } .field__input { From bc0a051ef8d067d2b37fd2df2933051c9879a79f Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 11:07:01 +0200 Subject: [PATCH 4/7] Feat: Added text-image-block section. --- comments.MD | 2 ++ src/index.html | 29 +++++++++++++++++++ .../section/section-text-image-block.scss | 12 ++++++++ 3 files changed, 43 insertions(+) create mode 100644 src/scss/section/section-text-image-block.scss diff --git a/comments.MD b/comments.MD index 507edce..51a4563 100644 --- a/comments.MD +++ b/comments.MD @@ -7,3 +7,5 @@ - For the reviews section with regards to headings; I think there might need to be some change anyway; none of the texts on their own are a very good indicator of the section in the page structure. Similarly, the USP's could do with a (visually hidden) heading 2, and potentially the actual USP items could get a heading 3 (their title) - Also no completely sure about the headings in the slider hero. - For the touch target size, I've upped the size on mobile. The button is still touching the edge of the input field.I don't know if this is intentional design wise, so I left it (I checked the initial styling). Also, the + is falling out of the button, so I added some markup + styling to fix this. +- While making the new section I tried to use as much existing styles as possible, and for the design implementation I had to eyeball some values, one of the things I eyeballed is the margin between image and content on mobile. I did not do it the same way as it's done in the `two-column-info-block` slice, which uses margin as a %. Instead I used a static value, as I am not sure what your guys' philosophy is on this. +- For the responsiveness of this section, I tried to use the same way of thinking as was used in the `two-column-info-block`. To be honest the sections are now very similar but I would imagine ina. real life situation there wouldbe some back and forth regarding design. \ No newline at end of file diff --git a/src/index.html b/src/index.html index b2c9c91..061363b 100644 --- a/src/index.html +++ b/src/index.html @@ -731,6 +731,35 @@

Save energy with personal heating

+ + +
+ + + + +
+
+
+
+
+

Sustainable journey to your front door

+
+

+ We use as little plastic as possible to transport your Stoov®. Preferably not at all! If plastic packaging is nevertheles uses, it is recyclable or compostable. We also pack the products as small and efficiently as possible, so that more orderd fit in one van and there is less need to drive up and dow. +

+
+
+
+ + Sofa + +
+
+
+
+
+
diff --git a/src/scss/section/section-text-image-block.scss b/src/scss/section/section-text-image-block.scss new file mode 100644 index 0000000..ef31fba --- /dev/null +++ b/src/scss/section/section-text-image-block.scss @@ -0,0 +1,12 @@ +@use '../mixins'as *; + +.section-text-image-block { + .text-image-block { + &__image { + margin-bottom: rem(24); + } + &__description { + margin-top: var(--spacing); + } + } +} \ No newline at end of file From a6ea4d26fce9346bd7b5558b988cb72568075756 Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 11:37:52 +0200 Subject: [PATCH 5/7] Feat: Added collapsible footer headings --- src/index.html | 24 ++++++++++++------------ src/js/footer.js | 23 +++++++++++++++++++++++ src/scss/section/section-footer.scss | 10 ++++++++++ 3 files changed, 45 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index 061363b..2ce7541 100644 --- a/src/index.html +++ b/src/index.html @@ -737,7 +737,7 @@

Save energy with personal heating

- +
@@ -1611,12 +1611,12 @@

30 days return policy

-
+
    -
  • -
    +
  • +
+
  • Journal @@ -1638,10 +1638,10 @@

    30 days return policy

-
  • -
    +
  • +
    • +
    • Business @@ -1663,10 +1663,10 @@

      30 days return policy

    -
  • -
    +
  • +
    • + -
    +
    +
    @@ -576,11 +576,11 @@

    +

    +
    @@ -1614,7 +1614,7 @@

    30 days return policy

    • -
        @@ -1639,7 +1639,7 @@

        30 days return policy

    • -
        @@ -1664,7 +1664,7 @@

        30 days return policy

    • -
        diff --git a/src/js/swiper-slider.js b/src/js/swiper-slider.js index e1f1c05..72a5f57 100644 --- a/src/js/swiper-slider.js +++ b/src/js/swiper-slider.js @@ -72,7 +72,12 @@ constructor() { super(); this.swiper = this.querySelector('[data-swiper]'); - + this.scrollIndicators = this.querySelectorAll('.swiper-scroll-indicators') || []; + + this.scrollIndicators.forEach((indicator) => { + indicator.addEventListener('click', () => this.scrollPastSlider()); + }); + // Stop when the swiper is not found if(!this.swiper) { return; @@ -135,6 +140,12 @@ } + scrollPastSlider() { + const boundingRect = this.swiper.getBoundingClientRect(); + const sliderEnd = boundingRect.bottom - boundingRect.top; + window.scrollTo({ top: sliderEnd, behavior: 'smooth' }); + } + /** * Handles the theme editor block change/edit event * @param {Object} event diff --git a/src/scss/section/section-hero-slider.scss b/src/scss/section/section-hero-slider.scss index 4fc646c..50b4904 100644 --- a/src/scss/section/section-hero-slider.scss +++ b/src/scss/section/section-hero-slider.scss @@ -133,6 +133,8 @@ left: 50%; transform: translateX(-50%); bottom: rem(32); + background: transparent; + border: none; @include mqmin($bp-lg) { bottom: rem(50); } From 2a8d2a4627c7358289630fb2536cb3c556f961c6 Mon Sep 17 00:00:00 2001 From: FHoogland <33831870+TristanKirwan@users.noreply.github.com> Date: Tue, 8 Jul 2025 12:37:43 +0200 Subject: [PATCH 7/7] Fix: Prevent slider content from overlapping with nav bar. --- comments.MD | 4 +++- src/scss/section/section-hero-slider.scss | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/comments.MD b/comments.MD index dc72d5f..d7bdfe3 100644 --- a/comments.MD +++ b/comments.MD @@ -9,4 +9,6 @@ - For the touch target size, I've upped the size on mobile. The button is still touching the edge of the input field.I don't know if this is intentional design wise, so I left it (I checked the initial styling). Also, the + is falling out of the button, so I added some markup + styling to fix this. - While making the new section I tried to use as much existing styles as possible, and for the design implementation I had to eyeball some values, one of the things I eyeballed is the margin between image and content on mobile. I did not do it the same way as it's done in the `two-column-info-block` slice, which uses margin as a %. Instead I used a static value, as I am not sure what your guys' philosophy is on this. - For the responsiveness of this section, I tried to use the same way of thinking as was used in the `two-column-info-block`. To be honest the sections are now very similar but I would imagine ina. real life situation there wouldbe some back and forth regarding design. -- For the collapsable footer, I have some improvements /comments if I had a little more time. Firstly, an animation on the closing/opening would be nice. Second, I have the feeling I might have to dive a little deeper in the markup and stying as I saw some `collapsible` class already pop up somewhere. \ No newline at end of file +- For the collapsable footer, I have some improvements /comments if I had a little more time. Firstly, an animation on the closing/opening would be nice. Second, I have the feeling I might have to dive a little deeper in the markup and stying as I saw some `collapsible` class already pop up somewhere. +- I implemented the scroll functionality with JS, though we could also implement an anchor to scroll to and add the scrolling-behaviour to the body. +- For making sure that content is always readable, I added a padding-top with currently a set in stone value, which is not based on any vars. I think in some cases it's worth considering making a calculation out of this (for example, padding-top and bottom of nav item + font-size). \ No newline at end of file diff --git a/src/scss/section/section-hero-slider.scss b/src/scss/section/section-hero-slider.scss index 50b4904..41bbe9d 100644 --- a/src/scss/section/section-hero-slider.scss +++ b/src/scss/section/section-hero-slider.scss @@ -25,9 +25,9 @@ &__content-wrapper { box-sizing: border-box; // padding left/right given to avoid overlap with the "swiper navigation arrows" - padding-block: 0 rem(100); + padding-block: rem(80) rem(100); @include mqmin($bp-md) { - padding-block: 0 rem(102); + padding-block: rem(80) rem(102); max-width: var(--site-center-narrow); } &.has-navigation {