fixes

api/collections/fieldLists/column.yml

@@ -148,12 +148,36 @@
         meta:
             label: Zeilen Nr (0 Basiert)
 
+      - name: extendableRowNr
+        type: number
+        meta:
+            label: Ausfahrbare boxreihe (0 Basiert)
+
 - name: image
   type: file
   meta:
       label: Bild
       dependsOn:
           eval: $parent.contentType == 'image'
+
+- name: icons
+  type: object[]
+  meta:
+      label: Icons
+      helperText: "Für Personpreview xing und linkedin icons gedacht."
+      dependsOn:
+          eval: $parent.contentType == 'image'
+  subFields:
+      - name: icon
+        type: file
+        meta:
+            label: Icon
+
+      - name: link
+        type: string
+        meta:
+            label: Link
+
 - name: iconCycleSquare
   type: object
   meta:

frontend/src/App.svelte

@@ -33,7 +33,6 @@
             pagesRes[e.path] = e
         })
         $pages = pagesRes
-        console.log(pagesRes)
     }
 
     async function getNavigation() {
@@ -90,7 +89,10 @@
 
     .HP {
         h2 {
-            font-size: 3.2rem !important;
+            font-size: 2.1rem !important;
+            @media @tablet {
+                font-size: 3.2rem !important;
+            }
         }
     }
     .swiper-button-prev,

frontend/src/lib/assets/css/base.less

@@ -141,9 +141,12 @@ swiper-slide {
             left: 0px;
             bottom: 0px;
             background: #000000;
-            height: 10px;
+            height: 5px;
             width: 0;
             animation: underlineEffect 4s linear forwards;
+            @media @tablet {
+                height: 10px;
+            }
         }
 
         &:not(.active) .underline {
@@ -151,3 +154,23 @@ swiper-slide {
         }
     }
 }
+
+*::-webkit-scrollbar {
+    width: 10px; /* width of the entire scrollbar */
+    height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+    background: rgb(0, 0, 0); /* color of the tracking area */
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: rgb(255, 255, 255); /* color of the scroll thumb */
+    border-radius: 20px; /* roundness of the scroll thumb */
+    //border: 3px solid black; /* creates padding around scroll thumb */
+}
+
+* {
+    scrollbar-width: thin; /* "auto" or "thin" */
+    scrollbar-color: rgb(255, 255, 255) rgb(0, 0, 0); /* scroll thumb and track */
+}

frontend/src/lib/components/Footer.svelte

@@ -5,7 +5,7 @@
     $: nextpage = $navigation?.pages[0]
     function getNextPage(pages) {
         if (location.pathname == "/" || location.pathname == "") return
-      
+
         let currPage = pages.find(
             (page) => Object.values($pages)?.find((o) => o.id == page.page)?.path == location.pathname
         )
@@ -18,31 +18,37 @@
             nextIndex = currIndex + 1
         }
         nextpage = pages[nextIndex]
-        console.log(nextpage, pages, nextIndex)
     }
     setInterval(() => {
         getNextPage($navigation.pages)
     }, 1000)
+    let showNext = true
     $: {
         if ($rerender) {
             if (location.pathname != "/") {
                 getNextPage($navigation.pages)
             }
+            if (location.pathname.split("/").length >= 2) {
+                showNext = false
+            } else {
+                showNext = true
+            }
         }
     }
 </script>
 
 <div class="footer">
-    <button
+    {#if showNext}
-        class="upper-part"
+        <button
-        on:click="{() => {
+            class="upper-part"
-            $rerender = $rerender + 1
+            on:click="{() => {
-            navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
+                $rerender = $rerender + 1
-        }}"
+                navigate(Object.values($pages)?.find((o) => o.id == nextpage.page)?.path || '/')
-    >
+            }}"
-        <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
+        >
-        <div class="lower">{nextpage?.name}</div>
+            <div class="upper"><img src="/media/arrow-right.svg" alt="arrow" /> nächstes Thema</div>
-    </button>
+            <div class="lower">{nextpage?.name}</div>
+        </button>{/if}
     <div class="lower-part">
         <div class="links">
             <button>Datenschutz</button>
@@ -90,7 +96,6 @@
 
         .lower-part {
             padding: 40px 40px;
-
             background-color: @bg-color-secondary;
             width: 100%;
             display: flex;

frontend/src/lib/components/Menu/Menu.svelte

@@ -2,7 +2,6 @@
     import { navigate } from "svelte-routing/src/history"
     import { navigation, pages, rerender } from "../../store"
     import Header from "./Header.svelte"
-    $: console.log($navigation, "nav")
     export let active = false
 </script>
 

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

@@ -9,9 +9,7 @@
     register(false)
     let swiper
 
-    function handleMouseOver() {
+    function handleMouseOver() {}
-        console.log("test")
-    }
 
     function handleMouseOut() {}
 

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

@@ -31,7 +31,8 @@
         }
 
         return ""
-    }
+    }   
+
 
     let nestedPath = checkNestedPath()
 </script>
@@ -42,7 +43,7 @@
     {/if}
     {#if nestedPath}
         <h3
-            style="cursor: pointer;"
+            style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
             on:keydown
             on:click="{() => {
                 $rerender = $rerender + 1
@@ -61,7 +62,7 @@
     {#if row.subTitle}
         <h3>{row.subTitle}</h3>
     {/if}
-    <div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
+    <div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}" >
         {#each row?.columns as col}
             <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
                 {#if col?.contentType == "text"}
@@ -69,7 +70,7 @@
                 {:else if col?.contentType == "textLink"}
                     <TextLink description="{col?.textLink?.text}" path="{col?.textLink?.link}" bright="{bright}" />
                 {:else if col.contentType == "image"}
-                    <Image image="{col?.image}" pageId="{pageId}" />
+                    <Image image="{col?.image}" col="{col}" pageId="{pageId}" />
                 {:else if col.contentType == "iconBlocks"}
                     <IconBlock pageId="{pageId}" col="{col}" />
                 {:else if col.contentType == "pageLinkBlocks"}
@@ -107,6 +108,9 @@
     .red {
         color: #fa00ff !important;
     }
+    h3 {
+        font-weight: normal;
+    }
     @media @tablet {
         h3 {
             font-size: 1.2rem;

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

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { pages } from "../../store"
+    import { pages, scrollToRowNr } from "../../store"
     import Homepage from "./Homepage.svelte"
     import Pagebuilder from "./Pagebuilder.svelte"
     import { apiBaseURL } from "../../../config"
+    import { onMount } from "svelte"
 
     export let path
     export let homepage = false
@@ -12,6 +13,27 @@
         page = $pages[path]
     }
 
+    onMount(() => {
+        if ($scrollToRowNr !== -1) {
+            console.log("test321-", $scrollToRowNr)
+            if (!$scrollToRowNr) {
+                $scrollToRowNr = -1
+                return
+            }
+            let element = document.getElementById("row-" + $scrollToRowNr)
+            console.log(element)
+            if (!element) {
+                $scrollToRowNr = -1
+                return
+            }
+
+            element?.scrollIntoView({
+                behavior: "smooth",
+            })
+            $scrollToRowNr = -1
+        }
+    })
+
     $: {
         if (Object.keys($pages).length) {
             initPage()
@@ -22,8 +44,8 @@
 <div class="rows" class:HP="{path == '/'}">
     {#if page}
         {#if path == "/"}<Homepage />{/if}
-        {#each page.rows as row}
+        {#each page.rows as row, i}
-            <div class="row">
+            <div class="row" id="row-{i}">
                 {#if row.row.backgroundImage}
                     <div class="background-image">
                         <img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
@@ -52,7 +74,10 @@
 
         & > .row {
             padding: 10px;
-            padding-top: 80px;
+            padding-top: 30px;
+            @media @tablet {
+                padding-top: 80px;
+            }
             width: 100%;
             position: relative;
             display: flex;

frontend/src/lib/components/widgets/Worldcard/worldcard.svelte

@@ -3,7 +3,7 @@
     import Selectbox from "./selectbox.svelte"
 
     export let col: Column
-    export let pageId: number
+    export let pageId: string
 
     let availableProperties = [
         ["A", "Aktien"],
@@ -23,7 +23,6 @@
     let props
     $: {
         props = chunkArray([...availableProperties], 5)
-        console.log(props, "===props")
     }
 
     function chunkArray(myArray, chunk_size): string[][] {
@@ -57,7 +56,6 @@
                         abbriviation="{property[0]}"
                         name="{property[1]}"
                         on:click="{(e) => {
-                            console.log(!selected[availableProperties.indexOf(property)], '===index')
                             selected[availableProperties.indexOf(property)] = e.detail
                         }}"
                     />

frontend/src/lib/components/widgets/events.svelte

@@ -25,8 +25,6 @@
     function showMore() {
         displayedItems += itemsPerPage
     }
-
-    console.log("col:", col)
 </script>
 
 <div class="events">

frontend/src/lib/components/widgets/extendableBox.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
+    import { onMount } from "svelte"
+    import { openExtendableNr } from "../../store"
+
     export let col: Column
     export let opened = -1
+
+    onMount(() => {
+        if (!isNaN($openExtendableNr) && $openExtendableNr !== -1) {
+            opened = $openExtendableNr
+            $openExtendableNr = -1
+        }
+    })
 </script>
 
 <div class="boxes">
@@ -62,7 +72,10 @@
                 padding-bottom: 20px;
             }
             .upper {
-                font-size: 1.6rem;
+                font-size: 1.2rem;
+                @media @tablet {
+                    font-size: 1.6rem;
+                }
                 font-weight: 500;
                 display: flex;
                 align-items: center;

frontend/src/lib/components/widgets/iconBlock.svelte

@@ -18,6 +18,7 @@
 </div>
 
 <style lang="less">
+    @import "../../assets/css/main.less";
     .iconBlock {
         display: flex;
         justify-content: start;
@@ -27,8 +28,13 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            width: 140px;
+            width: 80px;
-            gap: 20px;
+            gap: 8px;
+            @media @tablet {
+                width: 140px;
+
+                gap: 20px;
+            }
             img {
                 width: 100%;
                 height: auto;

frontend/src/lib/components/widgets/iconCycleBox.svelte

@@ -32,8 +32,10 @@
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
+        font-size: 0.8rem;
         @media @tablet {
             gap: 20px;
+            font-size: 1rem;
         }
         .box {
             border: 4px solid @bg-color-secondary;

frontend/src/lib/components/widgets/image.svelte

@@ -2,11 +2,23 @@
     import { apiBaseURL } from "../../../config"
     export let image: FileField
     export let pageId: string
+    export let col: Column
 </script>
 
 <div class="image-container">
     <img src="{`${apiBaseURL}page/${pageId}/${image?.src}`}" alt="img" />
 </div>
+{#if col && col.icons}
+    <div class="icons">
+        {#each col.icons as icon}
+            <div class="icon">
+                <a href="{icon.link}" target="_blank">
+                    <img src="{`${apiBaseURL}page/${pageId}/${icon.icon?.src}`}" alt="img" />
+                </a>
+            </div>
+        {/each}
+    </div>
+{/if}
 
 <style lang="less">
     .image-container {
@@ -21,4 +33,11 @@
             height: 100%;
         }
     }
+
+    .icons {
+        height: 60px;
+        display: flex;
+        justify-content: flex-start;
+        gap: 20px;
+    }
 </style>

frontend/src/lib/components/widgets/pageLinkBlocks.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { navigate } from "svelte-routing/src/history"
-    import { pages, rerender } from "../../store"
+    import { openExtendableNr, pages, rerender, scrollToRowNr } from "../../store"
     export let col: Column
 </script>
 
@@ -11,6 +11,7 @@
                 class="page-ref"
                 on:click="{() => {
                     $rerender = $rerender + 1
+
                     navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
                 }}"
             >
@@ -21,6 +22,8 @@
                 class="row-ref fill"
                 on:click="{() => {
                     $rerender = $rerender + 1
+                    $scrollToRowNr = link.rowNr
+                    $openExtendableNr = link.extendableRowNr
                     navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
                 }}"
             >

frontend/src/lib/store.ts

@@ -13,4 +13,6 @@ export const location = writable(initLoc)
 export let navigation = writable<Navigation>()
 export let pages = writable<Pages>({})
 export let serviceNavigation = writable<Navigation>()
-export let rerender = writable(0)
+export let rerender = writable(0)
+export let scrollToRowNr = writable(-1)
+export let openExtendableNr = writable(-1)

types/global.d.ts

@@ -55,6 +55,10 @@ interface Column {
         | "networkEvents"
 
     image?: FileField
+    icons: {
+        icon: FileField
+        link: string
+    }[]
     iconCycleSquare?: IconCycleSquare
     iconCycleCircle?: IconCycleCircle
     text: string
@@ -95,6 +99,7 @@ interface pageLinkBlock {
     name: string
     rowNr: number
     page: string
+    extendableRowNr: number
 }
 
 interface IconCycleSquare {