From 61af2e2c8e01084ee4937e3118d5b9486d71a91f Mon Sep 17 00:00:00 2001
From: robin <binkrassdufass@gmail.com>
Date: Fri, 8 Sep 2023 13:42:48 +0000
Subject: [PATCH] fixes

---
 frontend/src/lib/components/Footer.svelte     |  2 +-
 .../components/Pagebuilder/Homepage.svelte    |  2 +-
 .../lib/components/Pagebuilder/Rows.svelte    |  9 +--
 .../components/widgets/Worldcard/card.svelte  | 59 ++++++++++++------
 .../widgets/Worldcard/worldcard.svelte        | 61 +++++++++++--------
 .../lib/components/widgets/iconBlock.svelte   |  7 ++-
 .../components/widgets/iconCycleBox.svelte    | 17 +++---
 7 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte
index 9a3128c..275419a 100644
--- a/frontend/src/lib/components/Footer.svelte
+++ b/frontend/src/lib/components/Footer.svelte
@@ -132,7 +132,7 @@
             display: flex;
             justify-content: center;
             .container {
-                max-width: 1800px;
+                max-width: 1400px;
                 width: 100%;
                 display: flex;
                 padding: 0px 2.5vw;
diff --git a/frontend/src/lib/components/Pagebuilder/Homepage.svelte b/frontend/src/lib/components/Pagebuilder/Homepage.svelte
index 426d5e2..0512098 100644
--- a/frontend/src/lib/components/Pagebuilder/Homepage.svelte
+++ b/frontend/src/lib/components/Pagebuilder/Homepage.svelte
@@ -105,7 +105,7 @@
         align-items: center;
         justify-content: center;
         swiper-container {
-            max-width: 1800px;
+            max-width: 1400px;
         }
         .inner-container {
             display: flex;
diff --git a/frontend/src/lib/components/Pagebuilder/Rows.svelte b/frontend/src/lib/components/Pagebuilder/Rows.svelte
index 1873e6a..5efc9b2 100644
--- a/frontend/src/lib/components/Pagebuilder/Rows.svelte
+++ b/frontend/src/lib/components/Pagebuilder/Rows.svelte
@@ -83,10 +83,11 @@
         gap: 10px;
 
         & > .row {
-            padding: 10px;
-            padding: 30px 10px;
+            margin: 15px 0px;
+            padding: 15px 10px;
             @media @tablet {
-                padding: 80px 10px;
+                margin: 40px 0px;
+                padding: 30px 10px;
             }
             width: 100%;
             position: relative;
@@ -110,7 +111,7 @@
 
             & > .content {
                 width: 100%;
-                max-width: 1800px;
+                max-width: 1400px;
                 padding: 0px 2.5vw;
                 position: relative;
                 &.bright {
diff --git a/frontend/src/lib/components/widgets/Worldcard/card.svelte b/frontend/src/lib/components/widgets/Worldcard/card.svelte
index 6aa5da4..53a932e 100644
--- a/frontend/src/lib/components/widgets/Worldcard/card.svelte
+++ b/frontend/src/lib/components/widgets/Worldcard/card.svelte
@@ -19,6 +19,7 @@
 
         return results
     }
+    let hovered = "-1"
 </script>
 
 <div class="card">
@@ -41,10 +42,23 @@
 
                 <div class="properties" style="top: {card.verticalShift || 0}%; left: {card.horizontalShift || 0}%;">
                     {#each props as propertyRow, i (i)}
-                        <div class="property-row">
+                        <div
+                            class="property-row"
+                            style="grid-template-columns: repeat({propertyRow.length}, min(25px, 1.8vw));"
+                        >
                             {#each propertyRow as property, j (j)}
                                 <div class="collapsible-wrapper">
-                                    <div class="property collapsible" class:selected="{selected[property]}">
+                                    <div
+                                        class="property collapsible"
+                                        class:hovered="{hovered == j + ' ' + i}"
+                                        class:selected="{selected[property]}"
+                                        on:mouseenter="{() => {
+                                            hovered = j + ' ' + i
+                                        }}"
+                                        on:mouseleave="{() => {
+                                            hovered = '-1'
+                                        }}"
+                                    >
                                         <div class="short">
                                             {properties[property][0]}
                                         </div>
@@ -65,6 +79,7 @@
     .card {
         position: relative;
         height: fit-content;
+
         img {
             display: block;
             width: 100%;
@@ -74,9 +89,6 @@
         }
         .content {
             position: absolute;
-            &:hover {
-                z-index: 10000;
-            }
             padding: 10px;
             top: 0px;
             left: 0px;
@@ -87,6 +99,7 @@
                 height: 100%;
                 display: flex;
                 flex-direction: column;
+
                 .inner-container {
                     max-width: 200px;
                     &:hover {
@@ -122,21 +135,29 @@
                         @media @desktop {
                             display: flex;
                         }
-                        z-index: 200;
+
                         flex-direction: column;
                         gap: 5px;
                         .property-row {
-                            display: flex;
-                            gap: 5px;
-
+                            display: grid;
+                            grid-gap: 5px;
+                            @media (max-width: 1000px) {
+                                grid-gap: 2px;
+                            }
                             .property {
+                                z-index: 99;
+                                &:hover {
+                                    z-index: 9999;
+                                }
+                                position: relative;
+                                left: 0px;
                                 cursor: pointer;
                                 overflow: hidden;
-                                width: 2vw;
-                                max-width: 30px;
-                                font-size: min(0.7vw, 14px);
-                                height: 2vw;
-                                max-height: 30px;
+                                width: 1.8vw;
+                                max-width: 25px;
+                                font-size: min(0.5vw, 11px);
+                                height: 1.8vw;
+                                max-height: 25px;
                                 border-radius: 15px;
                                 border: 2px solid #4f4f4f;
                                 color: #4f4f4f;
@@ -146,6 +167,8 @@
                                 align-items: center;
                                 transition: 0.5s width ease-in, 0.5s max-width ease-in, 0.5s background-color ease-in,
                                     0.5s color ease-in;
+                                display: flex;
+
                                 &.selected {
                                     background-color: @bg-color !important;
                                     color: @font-color !important;
@@ -155,11 +178,13 @@
                                     overflow: hidden;
                                     background-color: @bg-color-secondary;
                                     color: @font-color-secondary;
-                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in;
+                                    transition: 0.5s width ease-in, 0.5s background-color ease-in, 0.5s color ease-in,
+                                        0.5s padding ease-in;
                                     white-space: nowrap;
                                 }
-                                &:hover {
+                                &.hovered {
                                     width: fit-content;
+                                    z-index: 9999;
                                     max-width: 1000px;
                                     padding: 5px;
                                     background-color: white;
@@ -167,7 +192,7 @@
                                         padding-left: 8px;
                                     }
                                     .long {
-                                        padding-left: 15px;
+                                        padding: 0px 10px;
                                         max-width: fit-content;
                                         background-color: @bg-color;
                                         color: @font-color;
diff --git a/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte b/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
index 145becd..05721ed 100644
--- a/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
+++ b/frontend/src/lib/components/widgets/Worldcard/worldcard.svelte
@@ -35,32 +35,39 @@
     }
 </script>
 
-<div class="worldcard">
+<div style="display: flex; flex-direction: column; width: 100%; align-items: center;">
     <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="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) => {
-                            selected[availableProperties.indexOf(property)] = e.detail
-                        }}"
-                    />
-                {/each}
-            </div>
-        {/each}
+        <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) => {
+                                selected[availableProperties.indexOf(property)] = e.detail
+                            }}"
+                        />
+                    {/each}
+                </div>
+            {/each}
+        </div>
     </div>
 </div>
 
@@ -69,11 +76,11 @@
 
     .worldcard {
         line-height: 1 !important;
-        font-size: 0.7rem;
+        font-size: 0.8rem;
         display: flex;
-        align-items: flex-start;
+        align-items: center;
         flex-direction: column;
-        width: 100%;
+        width: 1170px;
         max-width: 95vw;
 
         & > .worldcard {
diff --git a/frontend/src/lib/components/widgets/iconBlock.svelte b/frontend/src/lib/components/widgets/iconBlock.svelte
index c7a833c..6617ad4 100644
--- a/frontend/src/lib/components/widgets/iconBlock.svelte
+++ b/frontend/src/lib/components/widgets/iconBlock.svelte
@@ -28,7 +28,7 @@
             flex-direction: column;
             align-items: center;
             width: 150px;
-            gap: 15px;
+            gap: 10px;
             max-width: 45%;
             flex-grow: 1;
             font-size: 0.9rem;
@@ -39,7 +39,7 @@
                 width: 160px;
             }
             @media @desktop {
-                width: 220px;
+                width: 213px;
             }
             img {
                 width: 75%;
@@ -48,7 +48,7 @@
             .text {
                 display: flex;
                 flex-direction: column;
-                gap: 10px;
+
                 em {
                     text-align: center;
                     font-size: 2.2rem;
@@ -58,6 +58,7 @@
                 p {
                     text-align: center;
                     font-weight: bold;
+                    font-size: 1.1rem;
                 }
             }
         }
diff --git a/frontend/src/lib/components/widgets/iconCycleBox.svelte b/frontend/src/lib/components/widgets/iconCycleBox.svelte
index 7949ee6..0a15425 100644
--- a/frontend/src/lib/components/widgets/iconCycleBox.svelte
+++ b/frontend/src/lib/components/widgets/iconCycleBox.svelte
@@ -48,13 +48,19 @@
             align-items: center;
             justify-content: center;
             color: @font-color-secondary;
-
+            padding: 10px;
             &.active {
                 background-color: @bg-color;
                 color: @font-color;
             }
-            width: 140px;
-            height: 150px;
+            aspect-ratio: 1/1;
+            width: calc((100% / 2) - 10px);
+            @media (min-width: 950px) and (max-width: 1450px) {
+                width: calc((100% / 4) - 10px);
+            }
+            @media (min-width: 1450px) {
+                width: calc((100% / 5) - 10px);
+            }
             .content {
                 display: flex;
                 flex-direction: column;
@@ -70,11 +76,6 @@
                     font-family: "Libre Caslon Text", serif;
                 }
             }
-            @media @tablet {
-                width: 270px;
-                height: 270px;
-                gap: 30px;
-            }
         }
     }
 </style>