next session

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

@@ -23,7 +23,6 @@
         }
     })
 
-    $: console.log(teasers, "teasers")
     let teaser = teasers[0]
 </script>
 
@@ -41,7 +40,7 @@
             class="relative"
         >
             {#each teasers as teaser}
-                {#if teaser.teaser.showTeaser}
+                {#if teaser?.teaser?.showTeaser}
                     <swiper-slide class="relative">
                         <div class="inner-container">
                             <div class="titles">
@@ -65,7 +64,7 @@
     @import "../../assets/css/main.less";
 
     .container {
-        padding: 150px 0px;
+        padding: 20px 0px 150px 0px;
         min-height: 100vh;
         display: flex;
         align-items: center;

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

@@ -1,18 +1,54 @@
 <script lang="ts">
+    import { navigate } from "svelte-routing/src/history"
+    import Boxlist from "../widgets/boxlist.svelte"
+    import Events from "../widgets/events.svelte"
+    import ExtendableBox from "../widgets/extendableBox.svelte"
+    import IconBlock from "../widgets/iconBlock.svelte"
     import Image from "../widgets/image.svelte"
+    import InfoBoard from "../widgets/infoBoard.svelte"
+    import NestedCard from "../widgets/nestedCard.svelte"
+    import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
+    import Persons from "../widgets/persons.svelte"
+    import Publications from "../widgets/publications.svelte"
     import Text from "../widgets/text.svelte"
     import TextLink from "../widgets/textLink.svelte"
+    import TopDown from "../widgets/topDown.svelte"
+    import { rerender } from "../../store"
 
     export let row: Row
     export let pageId: string
-    console.log(row, "row")
-    console.log(row.columns)
+    export let bright: boolean
+
+    function checkNestedPath() {
+        const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
+
+        if (pathSegments.length > 1) {
+            pathSegments.pop() // remove the last segment
+            return "/" + pathSegments.join("/")
+        }
+
+        return ""
+    }
+
+    let nestedPath = checkNestedPath()
 </script>
 
 {#if Object.keys(row).length}
     {#if row.topTitle}
         <h3>{row.topTitle}</h3>
     {/if}
+    {#if nestedPath}
+        <h3
+            style="cursor: pointer;"
+            on:keydown
+            on:click="{() => {
+                $rerender = $rerender + 1
+                navigate(nestedPath)
+            }}"
+        >
+            <img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
+        </h3>
+    {/if}
     {#if row.pageTitle}
         <h1>{row.pageTitle}</h1>
     {/if}
@@ -28,9 +64,29 @@
                 {#if col?.contentType == "text"}
                     <Text text="{col?.text}" />
                 {:else if col?.contentType == "textLink"}
-                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" />
+                    <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" bright="{bright}" />
                 {:else if col.contentType == "image"}
                     <Image image="{col?.image}" pageId="{pageId}" />
+                {:else if col.contentType == "iconBlocks"}
+                    <IconBlock pageId="{pageId}" col="{col}" />
+                {:else if col.contentType == "pageLinkBlocks"}
+                    <PageLinkBlocks col="{col}" />
+                {:else if col.contentType == "networkEvents"}
+                    <Events col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "publications"}
+                    <Publications col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "topDown"}
+                    <TopDown col="{col}" />
+                {:else if col.contentType == "infoBoard"}
+                    <InfoBoard col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "nestedCard"}
+                    <NestedCard col="{col}" />
+                {:else if col.contentType == "boxlist"}
+                    <Boxlist col="{col}" />
+                {:else if col.contentType == "extendableBoxes"}
+                    <ExtendableBox col="{col}" />
+                {:else if col.contentType == "personPreview"}
+                    <Persons col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}
@@ -39,24 +95,45 @@
 
 <style lang="less">
     @import "../../assets/css/main.less";
-    h3 {
-        font-size: 1.2rem;
-        padding-bottom: 20px;
-    }
-    h2 {
-        font-size: 3.2rem;
-    }
-    h1 {
-        font-size: 5rem;
+    @media @tablet {
+        h3 {
+            font-size: 1.2rem;
+            padding-bottom: 20px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            img {
+                width: 40px;
+
+                margin-right: 10px;
+            }
+        }
+        h2 {
+            font-size: 3.2rem;
+        }
+        h1 {
+            font-size: 5rem;
+        }
     }
     h1,
     h2 {
+        line-height: 1;
         padding-bottom: 40px;
     }
 
     .row {
         display: flex;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        @media (max-width: 640px) {
+            flex-direction: column-reverse;
+        }
         & > .col {
+            min-width: 40% !important;
+
+            @media @desktop {
+                min-width: 30% !important;
+            }
             padding: 10px;
             flex: 1;
             min-width: 0;

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>