robin - final version

api/collections/fieldLists/cards.yml

@@ -9,6 +9,32 @@
   meta:
       label: Dieser Titel wird in der Karte angezeigt (Name des Landes).
 
+- name: verticalAlignment
+  type: string
+  meta:
+      label: Vertikale Ausrichtung
+      widget: select
+      choices:
+          - name: Oben
+            id: flex-start
+          - name: Mitte
+            id: center
+          - name: Unten
+            id: flex-end
+
+- name: horizontalAlignment
+  type: string
+  meta:
+      label: Horizontale Ausrichtung
+      widget: select
+      choices:
+          - name: Links
+            id: flex-start
+          - name: Mitte
+            id: center
+          - name: Rechts
+            id: flex-end
+
 - name: properties
   type: number[]
   meta:

api/collections/fieldLists/column.yml

@@ -210,11 +210,19 @@
       label: Weltkarte
       dependsOn:
           eval: $parent.contentType == 'worldCard'
+  subFields:
+      - name: row
+        type: object[]
+        meta:
+            label: Zeilen
         subFields:
             - name: cards
               type: object[]
               meta:
                   label: Karten
+                  metaElements:
+                      - verticalAlignment
+                      - horizontalAlignment
               subFields: !include cards.yml
 
 - name: nestedCard

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

@@ -107,7 +107,7 @@
         align-items: center;
         justify-content: center;
         swiper-container {
-            max-width: 1600px;
+            max-width: 1800px;
         }
         .inner-container {
             display: flex;

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

@@ -13,6 +13,7 @@
     import Text from "../widgets/text.svelte"
     import TextLink from "../widgets/textLink.svelte"
     import TopDown from "../widgets/topDown.svelte"
+    import WorldCard from "../widgets/Worldcard/worldcard.svelte"
     import { rerender } from "../../store"
     import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
     import IconCycleBox from "../widgets/iconCycleBox.svelte"
@@ -91,8 +92,10 @@
                     <Persons col="{col}" pageId="{pageId}" />
                 {:else if col.contentType == "iconCycleCircle"}
                     <IconCycleCircle col="{col}" pageId="{pageId}" />
-                {:else}
+                {:else if col.contentType == "iconCycleSquare"}
                     <IconCycleBox col="{col}" pageId="{pageId}" />
+                {:else if col.contentType == "worldCard"}
+                    <WorldCard col="{col}" pageId="{pageId}" />
                 {/if}
             </div>
         {/each}

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

@@ -75,7 +75,7 @@
 
             & > .content {
                 width: 100%;
-                max-width: 1600px;
+                max-width: 1800px;
                 padding: 0px 2.5vw;
                 position: relative;
                 &.bright {

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

@@ -0,0 +1,154 @@
+<script lang="ts">
+    import { apiBaseURL } from "../../../../config"
+
+    export let card: Card
+    export let properties: string[][]
+    export let pageId: string
+    export let selected: boolean[]
+    let props
+    $: {
+        props = chunkArray([...card.properties], 5)
+    }
+
+    function chunkArray(myArray, chunk_size): number[][] {
+        var results = []
+
+        while (myArray.length) {
+            results.push(myArray.splice(0, chunk_size))
+        }
+
+        return results
+    }
+</script>
+
+<div class="card">
+    <img src="{apiBaseURL}page/{pageId}/{card.image.src}" alt="card" />
+
+    <div class="content">
+        <div
+            class="container"
+            style="align-items: {card.horizontalAlignment || 'center'}; justify-content: {card.verticalAlignment ||
+                'center'};"
+        >
+            <div class="inner-container">
+                <div class="title" class:active="{card.properties.some((v, i) => selected[v])}">
+                    {card.title}
+                </div>
+
+                <div class="properties">
+                    {#each props as propertyRow, i (i)}
+                        <div class="property-row">
+                            {#each propertyRow as property, j (j)}
+                                <div class="collapsible-wrapper">
+                                    <div class="property collapsible" class:selected="{selected[property]}">
+                                        <div class="short">
+                                            {properties[property][0]}
+                                        </div>
+                                        <div class="long">{properties[property][1]}</div>
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {/each}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<style lang="less">
+    @import "../../../assets/css/main.less";
+    .card {
+        position: relative;
+        height: fit-content;
+        img {
+            display: block;
+            height: 100%;
+        }
+        .content {
+            position: absolute;
+            &:hover {
+                z-index: 10000;
+            }
+            padding: 10px;
+            top: 0px;
+            left: 0px;
+            bottom: 0px;
+            right: 0px;
+            .container {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                .inner-container {
+                    max-width: 170px;
+                    &:hover {
+                        max-width: fit-content;
+                    }
+                    display: flex;
+                    width: fit-content;
+                    flex-direction: column;
+                    gap: 20px;
+                    align-items: center;
+                    .title {
+                        padding: 5px 10px;
+                        font-weight: bold;
+                        color: @font-color-secondary;
+                        background-color: @bg-color-secondary;
+                        &.active {
+                            background-color: @bg-color;
+                            color: @font-color;
+                        }
+                    }
+
+                    .properties {
+                        display: flex;
+                        flex-direction: column;
+                        gap: 5px;
+                        .property-row {
+                            display: flex;
+                            gap: 5px;
+
+                            .property {
+                                cursor: pointer;
+                                overflow: hidden;
+                                width: 30px;
+                                max-width: 30px;
+                                height: 30px;
+                                border-radius: 15px;
+                                border: 2px solid #4f4f4f;
+                                color: #4f4f4f;
+                                background-color: @bg-color-secondary;
+                                display: flex;
+                                justify-content: center;
+                                align-items: center;
+                                transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
+                                &.selected {
+                                    background-color: @bg-color !important;
+                                    color: @font-color !important;
+                                }
+                                .long {
+                                    display: none;
+                                    white-space: nowrap;
+                                    padding-left: 15px;
+                                }
+                                &:hover {
+                                    width: 500px;
+                                    max-width: fit-content;
+                                    padding: 5px;
+                                    background-color: white;
+
+                                    .long {
+                                        display: initial;
+                                        background-color: @bg-color;
+                                        color: @font-color;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    export let abbriviation
+    export let name
+    export let focused = false
+    let dispatcher = createEventDispatcher()
+    $: {
+        dispatcher("click", focused)
+    }
+</script>
+
+<button class="selectbox" on:click="{() => (focused = !focused)}" class:focused="{focused}">
+    <div class="abbriviation">{abbriviation}</div>
+    <div class="name">{name}</div>
+</button>
+
+<style lang="less">
+    @import "../../../assets/css/main.less";
+    .selectbox {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        color: @font-color-secondary;
+        padding: 5px;
+        height: 30px;
+        border-radius: 15px;
+        font-size: 0.7rem;
+        transition: width 0.5s ease-in-out;
+        background-color: transparent;
+        border: 2px solid @bg-color;
+        .abbriviation {
+            padding-right: 10px;
+        }
+        .name {
+            padding-right: 10px;
+        }
+        &.focused {
+            width: fit-content;
+            background-color: @bg-color;
+            color: @font-color;
+            .abbriviation {
+                font-weight: bold;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import Card from "./card.svelte"
+    import Selectbox from "./selectbox.svelte"
+
+    export let col: Column
+    export let pageId: number
+
+    let availableProperties = [
+        ["A", "Aktien"],
+        ["PE", "Private Equity"],
+        ["IN", "Infrastruktur"],
+        ["W", "Waldwirtschaft"],
+        ["IE", "Immobilien-Entwicklung"],
+
+        ["R", "Renten"],
+        ["VC", "Venture Capital"],
+        ["PD", "Private Debt"],
+        ["LW", "Landwirtschaft"],
+        ["IB", "Immobilien-Bestand"],
+    ]
+    let selected = []
+    availableProperties.forEach((e) => selected.push(false))
+    let props
+    $: {
+        props = chunkArray([...availableProperties], 5)
+        console.log(props, "===props")
+    }
+
+    function chunkArray(myArray, chunk_size): string[][] {
+        var results = []
+
+        while (myArray.length) {
+            results.push(myArray.splice(0, chunk_size))
+        }
+
+        return results
+    }
+</script>
+
+<div class="worldcard" style="overflow-x: scroll;">
+    <div class="worldcard">
+        {#each col.worldCard.row as row}
+            <div class="wc-row">
+                {#each row.cards as card}
+                    <Card card="{card}" properties="{availableProperties}" pageId="{pageId}" selected="{selected}" />
+                {/each}
+            </div>
+        {/each}
+    </div>
+
+    <div class="selectboxes">
+        <h3>WÄHLEN SIE IHRE ANLAGEKLASSEN</h3>
+        {#each props as propertyRow, i}
+            <div class="prop-row">
+                {#each propertyRow as property, j}
+                    <Selectbox
+                        abbriviation="{property[0]}"
+                        name="{property[1]}"
+                        on:click="{(e) => {
+                            console.log(!selected[availableProperties.indexOf(property)], '===index')
+                            selected[availableProperties.indexOf(property)] = e.detail
+                        }}"
+                    />
+                {/each}
+            </div>
+        {/each}
+    </div>
+</div>
+
+<style lang="less">
+    @import "../../../assets/css/main.less";
+
+    .worldcard {
+        line-height: 1 !important;
+        font-size: 0.7rem;
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        width: 100vw;
+        max-width: 1800px;
+
+        & > .worldcard {
+            gap: 0px !important;
+            display: flex;
+            flex-direction: column;
+            .wc-row {
+                display: flex;
+                height: fit-content;
+            }
+        }
+
+        .selectboxes {
+            width: 100%;
+            max-width: 100vw;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            @media @tablet {
+                align-items: center;
+            }
+            margin-bottom: 20px;
+            gap: 10px;
+
+            .prop-row {
+                display: flex;
+                justify-content: flex-start;
+                gap: 10px;
+            }
+        }
+    }
+</style>

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

@@ -11,7 +11,7 @@
 </script>
 
 <div class="iconCycleSquares">
-    {#each col.iconCycleSquare.boxes as box, i}
+    {#each col?.iconCycleSquare?.boxes as box, i}
         <div class="box" id="box{i}" class:active="{i == active}">
             <div class="content">
                 <div class="icon">

types/global.d.ts

@@ -119,10 +119,15 @@ interface InfoBoard {
 }
 
 interface WorldCard {
+    rows: WorldCardRow[]
+}
+interface worldCardRow {
     cards: Card[]
 }
 
 interface Card {
+    verticalAlignment: string
+    horizontalAlignment: string
     image: FileField
     title: string
     properties: number[]