From 8d626450f68c6935da70a20bcf03a8702f0a8672 Mon Sep 17 00:00:00 2001
From: robin <binkrassdufass@gmail.com>
Date: Tue, 5 Sep 2023 12:35:51 +0000
Subject: [PATCH] push

---
 api/collections/fieldLists/cards.yml               | 12 ++++++++++++
 .../lib/components/widgets/Worldcard/card.svelte   | 14 +++++++++++---
 .../components/widgets/Worldcard/worldcard.svelte  |  1 -
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/api/collections/fieldLists/cards.yml b/api/collections/fieldLists/cards.yml
index b5c8a4c..0502281 100644
--- a/api/collections/fieldLists/cards.yml
+++ b/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."
diff --git a/frontend/src/lib/components/widgets/Worldcard/card.svelte b/frontend/src/lib/components/widgets/Worldcard/card.svelte
index d2ac625..48b8f64 100644
--- a/frontend/src/lib/components/widgets/Worldcard/card.svelte
+++ b/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 {
diff --git a/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte b/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
index 69c2bff..145becd 100644
--- a/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
+++ b/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"],