next session

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;