next session

frontend/src/lib/components/Pagebuilder/Rows.svelte

@@ -2,10 +2,11 @@
     import { pages } from "../../store"
     import Homepage from "./Homepage.svelte"
     import Pagebuilder from "./Pagebuilder.svelte"
+    import { apiBaseURL } from "../../../config"
 
     export let path
     export let homepage = false
-
+    export let image: FileField
     let page: Page
     function initPage() {
         page = $pages[path]
@@ -23,7 +24,14 @@
         {#if path == "/"}<Homepage />{/if}
         {#each page.rows as row}
             <div class="row">
-                <Pagebuilder row="{row.row}" pageId="{page.id}" />
+                {#if row.row.backgroundImage}
+                    <div class="background-image">
+                        <img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
+                    </div>
+                {/if}
+                <div class="content" class:bright="{row.row.backgroundImage}">
+                    <Pagebuilder row="{row.row}" pageId="{page.id}" bright="{!!row.row.backgroundImage}" />
+                </div>
             </div>
         {/each}
     {/if}
@@ -35,6 +43,45 @@
     .rows {
         display: flex;
         flex-direction: column;
-        gap: 80px;
+        justify-content: flex-start;
+        width: 100%;
+        position: relative;
+
+        overflow-x: hidden;
+        gap: 10px;
+        & > .row {
+            padding: 10px;
+            padding-top: 80px;
+            width: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+
+            .background-image {
+                position: absolute;
+                width: 100%;
+                z-index: 1;
+                top: 0px;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                img {
+                    object-fit: cover;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            & > .content {
+                width: 100%;
+                max-width: 1600px;
+                padding: 0px 2.5vw;
+                position: relative;
+                &.bright {
+                    color: @font-color-secondary !important;
+                }
+                z-index: 2;
+            }
+        }
     }
 </style>