Initial commit

frontend/src/lib/components/pagebuilder/blocks/Steps.svelte

@@ -0,0 +1,172 @@
+<script
+    lang="ts"
+    context="module"
+>
+    import "simplebar"
+    import "simplebar/dist/simplebar.css"
+    import ResizeObserver from "resize-observer-polyfill"
+    if (typeof window !== "undefined") window.ResizeObserver = ResizeObserver
+</script>
+
+<script lang="ts">
+    import MedialibImage from "../../widgets/MedialibImage.svelte"
+    import Step from "./Step.svelte"
+
+    export let block: ContentBlock<"steps">
+    console.log("block", block)
+    let innerWidth = 0
+    $: isMobile = innerWidth < 968
+</script>
+
+<svelte:window bind:innerWidth="{innerWidth}" />
+
+{#if block.steps?.horizontal}
+    <div
+        class=" product-preview-list verticalScrollbar"
+        data-simplebar
+    >
+        <ul class="step-blocks horizontal">
+            {#each block.steps.items as item, i}
+                <Step
+                    item="{item}"
+                    i="{i}"
+                    isMobile="{isMobile}"
+                />
+            {/each}
+        </ul>
+    </div>
+{:else}
+    <ul class="step-blocks">
+        {#each block.steps.items as item, i}
+            <Step
+                item="{item}"
+                i="{i}"
+                isMobile="{isMobile}"
+            />
+        {/each}
+    </ul>
+{/if}
+
+<style
+    lang="less"
+    global
+>
+    @import "../../../assets/css/variables.less";
+    .step-blocks {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
+        @media @mobile {
+            grid-template-columns: 1fr;
+        }
+        &.horizontal {
+            display: flex;
+            flex-direction: row;
+            overflow-x: auto;
+            gap: 2.4rem;
+            padding-bottom: 2.4rem;
+
+            & > li {
+                min-width: 500px;
+                flex-grow: 1;
+                height: unset !important;
+                @media @mobile {
+                    min-width: 300px;
+                }
+            }
+            @media @mobile {
+                padding: 0;
+            }
+        }
+
+        gap: 2.4rem;
+        & > li {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            .image-wrapper {
+                width: 100%;
+                position: relative;
+                aspect-ratio: 1 / 1;
+                h3 {
+                    position: absolute;
+                    right: 3.6rem;
+                    text-align: center;
+                    font-size: 5.5rem;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 100%; /* 128px */
+                    text-transform: uppercase;
+                    font-family: sans-serif;
+                    z-index: 4;
+                    bottom: 2.4rem;
+
+                    @media @mobile {
+                        font-size: 3rem;
+                        bottom: 2rem;
+                        right: 2.4rem;
+                    }
+                    font-weight: 700;
+                    color: transparent;
+
+                    display: inline-block;
+                    -webkit-text-stroke: 2px #eb5757;
+                }
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+            }
+            .content {
+                margin-top: -3.6rem;
+                width: 100%;
+                position: relative;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                z-index: 3;
+                .title-row {
+                    height: 3.6rem;
+                    max-height: 3.6rem;
+                    z-index: 3;
+                    width: 100%;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    h4 {
+                        background-color: #eb5757;
+                        padding: 1.2rem 2.4rem;
+                        font-size: 1.6rem;
+                        max-height: 100%;
+                        width: calc(100% - 3 * 3.6rem - 2rem);
+                        color: var(--bg-100);
+                        @media @mobile {
+                            font-size: 1.2rem;
+                            width: calc(100% - 3 * 2.4rem - 2rem);
+                        }
+                    }
+                }
+                .descriptions {
+                    background-color: #eb5757;
+                    padding: 0px;
+                    flex-grow: 1;
+                    ul {
+                        display: flex;
+                        flex-direction: column;
+
+                        li {
+                            padding: 2.4rem;
+
+                            width: 100%;
+                            color: var(--bg-100);
+                            border-bottom: 2px solid var(--bg-100);
+                            &:last-child {
+                                border-bottom: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>