icon cycle circle

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

@@ -53,7 +53,7 @@
         </div>
     {/each}
     {#if displayedItems < col.networkEvents.length}
-        <button on:click="{showMore}">Weitere Events</button>
+        <button on:click="{showMore}" class="fill"><div>Weitere Events</div></button>
     {/if}
 </div>
 

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../config"
+    import { onMount } from "svelte"
+
+    export let col: Column
+    export let pageId: string
+
+    let count = col.iconCycleCircle.boxes.length // The number of surrounding circles.
+    let angleStep = 360 / count
+    let radius = 100 // Distance from center
+
+    let circles = []
+
+    onMount(() => {
+        for (let i = 0; i < count; i++) {
+            let angle = angleStep * i * (Math.PI / 180) // Convert to radians
+
+            circles.push({
+                x: radius * Math.cos(angle),
+                y: radius * Math.sin(angle),
+                rotation: angleStep * i - 90, // subtract 90 to point towards the circle
+            })
+        }
+        circles = circles
+    })
+</script>
+
+<div class="main-circle">
+    {#each circles as { x, y, rotation }}
+        <div class="circle" style="transform: translate(calc(100px + {x}px - 25px), calc(100px + {y}px - 25px))"></div>
+        <div
+            class="arrow"
+            style="transform: translate(calc(100px + {x / 2}px - 1px), calc(100px + {y /
+                2}px - 25px)) rotate({rotation}deg)"
+        ></div>
+    {/each}
+</div>
+
+<style lang="less">
+    .main-circle {
+        position: relative;
+        width: 200px;
+        height: 200px;
+        margin: auto;
+        background: red;
+        border-radius: 50%;
+    }
+
+    .circle {
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        background: blue;
+        z-index: 100;
+        border-radius: 50%;
+        transform-origin: center;
+    }
+
+    .arrow {
+        position: absolute;
+        width: 2px;
+        height: 50px;
+        background: black;
+        transform-origin: center;
+    }
+</style>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { navigate } from "svelte-routing/src/history"
-    import { pages } from "../../store"
+    import { pages, rerender } from "../../store"
     export let col: Column
 </script>
 
@@ -9,16 +9,25 @@
         {#if isNaN(link.rowNr)}
             <button
                 class="page-ref"
-                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
+                }}"
             >
                 {link.name}
             </button>
         {:else}
             <button
-                class="row-ref"
-                on:click="{() => navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')}"
+                class="row-ref fill"
+                on:click="{() => {
+                    $rerender = $rerender + 1
+                    navigate(Object.values($pages)?.find((o) => o.id == link.page)?.path || '/')
+                }}"
             >
-                {link.name} <img src="/media/arrow-r.svg" alt="arrow" />
+                <div>
+                    {link.name}
+                </div>
+                <img src="/media/arrow-r.svg" alt="arrow" />
             </button>
         {/if}
     {/each}

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

@@ -31,7 +31,7 @@
     {/each}
 </div>
 {#if displayedItems < col.publications.length}
-    <button on:click="{showMore}">Weitere Publikationen</button>
+    <button on:click="{showMore}" class="fill"><div>Weitere Publikationen</div></button>
 {/if}
 
 <style lang="less">

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

@@ -0,0 +1,62 @@
+<script>
+    import { onMount, onDestroy } from "svelte"
+    import { rerender } from "../../store"
+
+    let showButton = true
+
+    const checkScroll = () => {
+        // Change the visibility of the button based on the scroll position
+        showButton = window.pageYOffset < 100
+    }
+
+    const jumpDown = () => {
+        // Jump down by 100vh
+        window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
+    }
+
+    onMount(() => {
+        // Attach scroll event listener when component is mounted
+        window.addEventListener("scroll", checkScroll)
+    })
+
+    onDestroy(() => {
+        // Remove scroll event listener when component is destroyed
+        window.removeEventListener("scroll", checkScroll)
+    })
+    let force = true
+    setInterval(() => {
+        if (location.pathname != "/") {
+            force = false
+        } else force = true
+    }, 1000)
+    $: {
+        if ($rerender) {
+            if (location.pathname != "/") {
+                force = false
+            } else force = true
+        }
+    }
+</script>
+
+{#if showButton && force}
+    <button on:click="{jumpDown}" class="jump-down"
+        ><span> SCROLL </span>
+        <img src="/media/chev-d.svg" alt="arrow" />
+    </button>
+{/if}
+
+<style>
+    .jump-down {
+        /* Place your styles here */
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: fixed;
+        color: #4f4f4f;
+        z-index: 100;
+        gap: 5px;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>

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

@@ -0,0 +1,46 @@
+<script>
+    import { onMount, onDestroy } from "svelte"
+
+    let showButton = false
+
+    const checkScroll = () => {
+        // Change the visibility of the button based on the scroll position
+        showButton = window.pageYOffset > 200
+    }
+
+    const scrollToTop = () => {
+        // Scroll smoothly to the top
+        window.scrollTo({ top: 0, behavior: "smooth" })
+    }
+
+    onMount(() => {
+        // Attach scroll event listener when component is mounted
+        window.addEventListener("scroll", checkScroll)
+    })
+
+    onDestroy(() => {
+        // Remove scroll event listener when component is destroyed
+        window.removeEventListener("scroll", checkScroll)
+    })
+</script>
+
+{#if showButton}
+    <button on:click="{scrollToTop}" class="scroll-to-top"><img src="/media/ToTop.svg" alt="toTop" /> </button>
+{/if}
+
+<style lang="less">
+    @import "../../assets/css/main.less";
+    .scroll-to-top {
+        /* Place your styles here */
+        position: fixed;
+        bottom: 5px;
+        z-index: 100;
+        transform: scale(0.5);
+        right: 5px;
+        @media @tablet {
+            bottom: 60px;
+            right: 60px;
+            transform: scale(1);
+        }
+    }
+</style>