push

api/collections/fieldLists/cards.yml

@@ -61,3 +61,15 @@
             id: 8
           - name: Immobilienbestand
             id: 9
+
+- name: verticalShift
+  type: number
+  meta:
+      label: Vertikale Verschiebung
+      helperText: "Die Karte wird um die angegebene Anzahl in Prozent nach oben verschoben."
+
+- name: horizontalShift
+  type: number
+  meta:
+      label: Horizontale Verschiebung
+      helperText: "Die Karte wird um die angegebene Anzahl in Prozent nach rechts verschoben."

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

@@ -7,7 +7,7 @@
     export let selected: boolean[]
     let props
     $: {
-        props = chunkArray([...card.properties], 5)
+        props = chunkArray([...card.properties], card.properties.length > 8 ? 5 : 4)
     }
 
     function chunkArray(myArray, chunk_size): number[][] {
@@ -31,11 +31,15 @@
                 'center'};"
         >
             <div class="inner-container">
-                <div class="title" class:active="{card.properties.some((v, i) => selected[v])}">
+                <div
+                    class="title"
+                    class:active="{card.properties.some((v, i) => selected[v])}"
+                    style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;"
+                >
                     {card.title}
                 </div>
 
-                <div class="properties">
+                <div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
                     {#each props as propertyRow, i (i)}
                         <div class="property-row">
                             {#each propertyRow as property, j (j)}
@@ -95,6 +99,8 @@
                     align-items: center;
                     .title {
                         font-size: min(1.6vw, 14px);
+                        position: relative;
+                        z-index: 200;
                         padding: 2px 5px;
                         text-transform: uppercase;
                         @media @tablet {
@@ -112,9 +118,11 @@
 
                     .properties {
                         display: none;
+                        position: relative;
                         @media @desktop {
                             display: flex;
                         }
+                        z-index: 200;
                         flex-direction: column;
                         gap: 5px;
                         .property-row {

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

@@ -11,7 +11,6 @@
         ["IN", "Infrastruktur"],
         ["W", "Waldwirtschaft"],
         ["IE", "Immobilien-Entwicklung"],
-
         ["R", "Renten"],
         ["VC", "Venture Capital"],
         ["PD", "Private Debt"],