From b7be64e3e0e3e73c845873282e81f97fb4a13303 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 26 Sep 2022 20:31:11 +0200
Subject: [PATCH] Update Posters section

- keep carousel on medium screen
- center title
- remove subscribe module (fixes page transition scroll bug?! for now)
---
 src/components/molecules/EmailForm.svelte   |  2 +-
 src/components/organisms/PostersGrid.svelte | 64 +++++++-------
 src/style/pages/shop/_posters.scss          | 94 +++------------------
 3 files changed, 47 insertions(+), 113 deletions(-)

diff --git a/src/components/molecules/EmailForm.svelte b/src/components/molecules/EmailForm.svelte
index 4fb407b..ad713c6 100644
--- a/src/components/molecules/EmailForm.svelte
+++ b/src/components/molecules/EmailForm.svelte
@@ -100,4 +100,4 @@
             <p class="text-xsmall">{formMessages[formStatus]}</p>
         </div>
     {/if}
-</div>
+</div>
\ No newline at end of file
diff --git a/src/components/organisms/PostersGrid.svelte b/src/components/organisms/PostersGrid.svelte
index 733de7c..ca07032 100644
--- a/src/components/organisms/PostersGrid.svelte
+++ b/src/components/organisms/PostersGrid.svelte
@@ -28,7 +28,7 @@
 
     /** Init Carousel */
     const initCarousel = () => {
-        if (innerWidth < 992) {
+        if (innerWidth < 1200) {
             if (!carousel) {
                 carousel = EmblaCarousel(carouselEl, {
                     slidesToScroll: innerWidth < 550 ? 1 : 2,
@@ -58,18 +58,25 @@
             }
         } else {
             if (carousel) {
-                carousel.destroy()
-                carousel = undefined
+                destroyCarousel()
             }
         }
     }
 
+    /** Destroy carousel */
+    const destroyCarousel = () => {
+        carousel.destroy()
+        carousel = undefined
+    }
+
     /** Destroy carousel for larger screens */
     const handleResize = debounce(initCarousel, 200)
 
 
     onMount(() => {
-        initCarousel()
+        if (innerWidth < 1200) {
+            initCarousel()
+        }
 
         // Destroy
         return () => {
@@ -85,35 +92,30 @@
     on:resize={handleResize}
 />
 
-{#if posters}
 <section class="shop-page__posters grid">
     <h3>View all of our available posters</h3>
 
-    <div class="set" bind:this={carouselEl}>
-        <div class="set__content">
-            {#each posters as { location, photos_product }}
-                <Poster
-                    location={location}
-                    image={photos_product.length && photos_product[1].directus_files_id}
-                    product={shopProducts.find(item => item.slug.includes(location.slug))}
-                />
-            {/each}
-        </div>
-
-        {#if carousel}
-            <ul class="set__dots">
-                {#each carouselDots as _, index}
-                    <li class:is-active={index === currentSlide}>
-                        <button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
-                    </li>
+    {#if posters}
+        <div class="set" bind:this={carouselEl}>
+            <div class="set__content">
+                {#each posters as { location, photos_product }}
+                    <Poster
+                        location={location}
+                        image={photos_product.length && photos_product[1].directus_files_id}
+                        product={shopProducts.find(item => item.slug.includes(location.slug))}
+                    />
                 {/each}
-            </ul>
-        {/if}
-    </div>
+            </div>
 
-    <div class="subscribe">
-        <label class="subscribe__text" for="newsletter_email">Subscribe to be notified when new posters become available</label>
-        <EmailForm />
-    </div>
-</section>
-{/if}
\ No newline at end of file
+            {#if carousel}
+                <ul class="set__dots">
+                    {#each carouselDots as _, index}
+                        <li class:is-active={index === currentSlide}>
+                            <button on:click={() => goToSlide(index)} aria-label="Go to slide #{index + 1}" />
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/if}
+</section>
\ No newline at end of file
diff --git a/src/style/pages/shop/_posters.scss b/src/style/pages/shop/_posters.scss
index eccc7ca..2d03d5f 100644
--- a/src/style/pages/shop/_posters.scss
+++ b/src/style/pages/shop/_posters.scss
@@ -22,14 +22,14 @@
         text-align: center;
 
         @include bp (sm) {
-            grid-column: 3 / span 14;
+            grid-column: 1 / -1;
             max-width: 360px;
-            margin-bottom: 48px;
+            margin: 0 auto 48px;
             font-size: rem(48px);
-            text-align: left;
+            text-align: center;
         }
         @include bp (sd) {
-            margin-bottom: 0;
+            margin-bottom: 88px;
         }
     }
 
@@ -46,7 +46,7 @@
         @include bp (sm) {
             grid-column: 3 / -3;
         }
-        @include bp (md) {
+        @include bp (sd) {
             cursor: default;
         }
 
@@ -58,13 +58,16 @@
                 margin: 0 -12px;
             }
             @include bp (md) {
+
+            }
+            @include bp (sd) {
                 --gap: clamp(32px, 2.5vw, 48px);
                 display: grid;
                 grid-template-columns: repeat(3, 1fr);
                 gap: var(--gap);
                 margin: 0;
             }
-            @include bp (sd) {
+            @include bp (md) {
                 grid-template-columns: repeat(4, 1fr);
             }
         }
@@ -82,41 +85,13 @@
             @include bp (mob-lg) {
                 flex: 0 0 calc(50% - 24px);
             }
-            @include bp (sm) {
-                flex: 0 0 calc(50% - 24px);
-            }
             @include bp (md) {
+                flex: 0 0 calc(33.33% - 24px);
+                margin: 0 20px;
+            }
+            @include bp (sd) {
                 margin: 0 auto auto;
             }
-
-            // 3 columns
-            &:nth-child(1) {
-                @include bp (md) {
-                    margin-top: calc(var(--gap) * 2);
-                }
-            }
-            &:nth-child(2) {
-                @include bp (md) {
-                    margin-top: var(--gap);
-                }
-            }
-
-            // 4 columns
-            &:nth-child(4n + 1) {
-                @include bp (sd) {
-                    margin-top: 64px * 3;
-                }
-            }
-            &:nth-child(4n + 2) {
-                @include bp (sd) {
-                    margin-top: 64px * 2;
-                }
-            }
-            &:nth-child(4n + 3) {
-                @include bp (sd) {
-                    margin-top: 64px;
-                }
-            }
         }
 
         // Pagination
@@ -153,47 +128,4 @@
             }
         }
     }
-
-    // Subscribe
-    .subscribe {
-        grid-column: 1 / -1;
-        max-width: 380px;
-        margin: 56px auto 0;
-        text-align: center;
-
-        @include bp (md) {
-            grid-column: 14 / span 8;
-            margin-top: 0;
-            text-align: left;
-        }
-
-        &__text {
-            display: block;
-            font-size: rem(18px);
-            color: $color-cream;
-            font-weight: 300;
-            line-height: 1.5;
-            margin-bottom: 24px;
-
-            @include bp (sm) {
-                font-size: rem(22px);
-                margin-bottom: 30px;
-            }
-        }
-
-        :global(.newsletter-form) {
-            padding: 0;
-            margin: 0 auto;
-
-            @include bp (sm) {
-                margin: 0;
-            }
-        }
-        :global(.newsletter-form__email) {
-            margin-bottom: 0;
-        }
-        :global(.newsletter-form__bottom) {
-            display: none;
-        }
-    }
 }
\ No newline at end of file