last changes

api/collections/fields/row.yml

@@ -15,12 +15,6 @@ subFields:
           label: Oberer Titel
           helperText: "Dieser Titel wird in der Zeile oben angezeigt."
 
-    - name: topTitleRed
-      type: boolean
-      meta:
-          label: Oberer Titel rot
-          helperText: "Dieser Titel wird in der Zeile oben rot angezeigt."
-
     - name: title
       type: string
       meta:
@@ -45,6 +39,12 @@ subFields:
           label: Hintergrundbild
           helperText: "Dieses Bild wird als Hintergrundbild der Zeile angezeigt."
 
+    - name: flexWrapNormal
+      type: boolean
+      meta:
+          label: Zeile normal umbrechen
+          helperText: "Ist dies aktiviert, so wird die Zeile normal und nicht reverse umgebrochen."
+
     - name: columns
       type: object[]
       meta:

docker-compose-local.yml

@@ -28,6 +28,7 @@ services:
             - ./:/data
             - ./tmp:/tmp
             - ./tmp/nonexistent:/nonexistent
+            - ./tmp/.npm:/.npm
         working_dir: /data
         command: sh -c "yarn install && API_BASE=http://tibiserver:8080/api/v1/_/${TIBI_NAMESPACE} yarn start"
         expose:

frontend/src/lib/assets/css/base.less

@@ -139,7 +139,7 @@ swiper-slide {
             position: absolute;
             z-index: 10000;
             left: 0px;
-            bottom: 0px;
+            bottom: -10px;
             background: #000000;
             height: 5px;
             width: 0;

frontend/src/lib/components/Footer.svelte

@@ -56,14 +56,16 @@
             <div class="lower">{nextpage?.name}</div>
         </button>{/if}
     <div class="lower-part">
-        <div class="links">
+        <div class="container">
-            <button>Datenschutz</button>
+            <div class="links">
-            <button>Impressum</button>
+                <button>Datenschutz</button>
-        </div>
+                <button>Impressum</button>
-        <div class="contact">
+            </div>
-            <button>0711 644 700-0</button>
+            <div class="contact">
+                <button>0711 644 700-0</button>
 
-            <button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
+                <button> <a href="mailto:info@fontis.de" class="button"> info@fontis.de</a></button>
+            </div>
         </div>
     </div>
 </div>
@@ -103,34 +105,41 @@
         }
 
         .lower-part {
-            padding: 40px 40px;
+            padding: 40px 20px;
             background-color: @bg-color-secondary;
             width: 100%;
             display: flex;
-            flex-direction: column;
+            justify-content: center;
-            .links,
+            .container {
-            .contact {
+                max-width: 1800px;
+                width: 100%;
                 display: flex;
-                justify-content: space-between;
+                padding: 0px 2.5vw;
-                padding: 10px 0px;
+                flex-direction: column;
-            }
-            button {
-                color: @font-color-secondary;
-                a {
-                    color: @font-color-secondary;
-                    font-weight: normal;
-                }
-            }
-            @media @tablet {
-                padding: 80px 40px;
-                flex-direction: row;
-                justify-content: space-between;
                 .links,
                 .contact {
                     display: flex;
-                    justify-content: flex-start;
+                    justify-content: space-between;
-                    gap: 40px;
+                    padding: 10px 0px;
-                    padding: 0px;
+                }
+                button {
+                    color: @font-color-secondary;
+                    a {
+                        color: @font-color-secondary;
+                        font-weight: normal;
+                    }
+                }
+                @media @tablet {
+                    padding: 80px 2.5vw;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    .links,
+                    .contact {
+                        display: flex;
+                        justify-content: flex-start;
+                        gap: 40px;
+                        padding: 0px;
+                    }
                 }
             }
         }

frontend/src/lib/components/Menu/Header.svelte

@@ -29,14 +29,13 @@
     .header {
         background-color: @bg-color;
         width: 100%;
-        padding: 10.4px 5px;
+
-        @media @tablet {
+        padding: 25.4px calc(2.5vw + 10px);
-            padding: 25.4px 60px;
+
-        }
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 25px;
+        gap: 35px;
 
         .logo {
             cursor: pointer;

frontend/src/lib/components/Menu/Menu.svelte

@@ -102,6 +102,7 @@
                             @media @tablet {
                                 flex-wrap: initial;
                                 flex-direction: column;
+                                align-items: flex-end;
                                 height: 100%;
                             }
                             justify-content: space-between;

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

@@ -109,18 +109,21 @@
         }
         .inner-container {
             display: flex;
-
             flex-direction: column;
             justify-content: center;
-            align-items: center;
+            align-items: flex-start;
+            @media @tablet {
+                align-items: center;
+            }
             width: 100%;
             height: fit-content;
 
             .titles {
+                padding: 0 5%;
                 font-weight: normal;
                 h1 {
                     font-size: 2rem;
-                    padding: 10px 0px;
+                    padding: 20px 0px;
                     margin: 10px 0px 20px 0px;
                     line-height: 1;
                     position: relative;
@@ -143,16 +146,17 @@
                     min-width: 0px;
                 }
             }
+            
             @media @tablet {
                 .titles {
                     font-weight: normal;
                     h1 {
-                        font-size: 4rem;
+                        font-size: 3.4rem;
-                        padding: 20px 0px;
+                        padding: 20px 20px;
                         margin: 20px 0px 40px 0px;
                     }
                     h2 {
-                        font-size: 1.6rem;
+                        font-size: 1.5rem;
                     }
                 }
                 .description {

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

@@ -61,7 +61,11 @@
     {#if row.subTitle}
         <h3>{row.subTitle}</h3>
     {/if}
-    <div class="row" class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}">
+    <div
+        class="row"
+        class:normalWrap="{row.flexWrapNormal}"
+        class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
+    >
         {#each row?.columns as col}
             <div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
                 {#if col?.contentType == "text"}
@@ -130,7 +134,7 @@
             font-size: 2.3rem;
         }
         h1 {
-            font-size: 5rem;
+            font-size: 4rem;
         }
     }
 
@@ -146,6 +150,9 @@
         }
         @media (max-width: 640px) {
             flex-direction: column-reverse;
+            &.normalWrap {
+                flex-direction: column;
+            }
         }
         & > .col {
             &.dominant {

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

@@ -63,7 +63,7 @@
         height: fit-content;
         img {
             display: block;
-            height: 100%;
+            width: 100%;
         }
         .content {
             position: absolute;
@@ -91,7 +91,11 @@
                     gap: 20px;
                     align-items: center;
                     .title {
-                        padding: 5px 10px;
+                        font-size: min(0.9vw, 14px);
+                        padding: 2px 5px;
+                        @media @tablet {
+                            padding: 5px 10px;
+                        }
                         font-weight: bold;
                         color: @font-color-secondary;
                         background-color: @bg-color-secondary;
@@ -102,7 +106,10 @@
                     }
 
                     .properties {
-                        display: flex;
+                        display: none;
+                        @media @desktop {
+                            display: flex;
+                        }
                         flex-direction: column;
                         gap: 5px;
                         .property-row {
@@ -112,9 +119,11 @@
                             .property {
                                 cursor: pointer;
                                 overflow: hidden;
-                                width: 30px;
+                                width: 2vw;
                                 max-width: 30px;
-                                height: 30px;
+                                font-size: min(0.7vw, 14px);
+                                height: 2vw;
+                                max-height: 30px;
                                 border-radius: 15px;
                                 border: 2px solid #4f4f4f;
                                 color: #4f4f4f;
@@ -122,7 +131,8 @@
                                 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;
+                                transition: 0.5s width ease-in, 0.5s max-width ease-in, 0.5s background-color ease-in,
+                                    0.5s color ease-in;
                                 &.selected {
                                     background-color: @bg-color !important;
                                     color: @font-color !important;
@@ -136,8 +146,8 @@
                                     white-space: nowrap;
                                 }
                                 &:hover {
-                                    width: 500px;
+                                    width: fit-content;
-                                    max-width: fit-content;
+                                    max-width: 1000px;
                                     padding: 5px;
                                     background-color: white;
 

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

@@ -23,9 +23,12 @@
         align-items: center;
         color: @font-color-secondary;
         padding: 5px;
-        height: 30px;
+        height: 20px;
+        @media @tablet {
+            height: 30px;
+        }
         border-radius: 15px;
-        font-size: 0.7rem;
+        font-size: min(2.2vw, 11px);
         transition: width 0.5s ease-in;
         background-color: transparent;
         border: 2px solid @bg-color;

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

@@ -36,7 +36,7 @@
     }
 </script>
 
-<div class="worldcard" style="overflow-x: scroll;">
+<div class="worldcard">
     <div class="worldcard">
         {#each col.worldCard.row as row}
             <div class="wc-row">
@@ -74,8 +74,8 @@
         display: flex;
         align-items: flex-start;
         flex-direction: column;
-        width: 100vw;
+        width: 100%;
-        max-width: 1800px;
+        max-width: 95vw;
 
         & > .worldcard {
             gap: 0px !important;
@@ -83,13 +83,14 @@
             flex-direction: column;
             .wc-row {
                 display: flex;
+                max-width: 100%;
                 height: fit-content;
             }
         }
 
         .selectboxes {
             width: 100%;
-            max-width: 100vw;
+            max-width: 95vw;
             display: flex;
             flex-direction: column;
             align-items: flex-start;
@@ -102,6 +103,7 @@
             .prop-row {
                 display: flex;
                 justify-content: flex-start;
+                flex-wrap: wrap;
                 gap: 10px;
             }
         }

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

@@ -14,6 +14,7 @@
     @import "../../assets/css/main.less";
 
     .boxList {
+     
         display: flex;
         flex-wrap: wrap;
         gap: 20px;
@@ -23,5 +24,6 @@
             color: @font-color-secondary;
             font-weight: bold;
         }
+   
     }
 </style>

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

@@ -60,6 +60,7 @@
     .boxes {
         display: flex;
         flex-direction: column;
+        font-family: "Libre Franklin", "sans-serif";
         .box {
             border-bottom: 2px dotted @bg-color-secondary;
             display: flex;
@@ -72,7 +73,8 @@
                 padding-bottom: 20px;
             }
             .upper {
-                font-size: 1.2rem;
+                cursor: pointer;
+                font-size: 1.4rem;
                 @media @tablet {
                     font-size: 1.6rem;
                 }

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

@@ -28,11 +28,15 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+
             width: 80px;
             gap: 8px;
+            max-width: 45%;
+            flex-grow: 1;
             @media @tablet {
-                width: 140px;
+                max-width: initial;
-
+                flex-grow: initial;
+                width: 107px;
                 gap: 20px;
             }
             img {

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

@@ -17,11 +17,20 @@
             }}"
         >
             <div class="image" on:mouseover="{() => (hover = i)}" on:focus on:blur on:mouseout="{() => (hover = -1)}">
-                {#if hover == i}
+                <!-- Initial Image -->
-                    <img src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}" alt="img" />
+                <img
-                {:else}
+                    class="initial"
-                    <img src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}" alt="img" />
+                    src="{`${apiBaseURL}page/${pageId}/${pp.initialImage?.src}`}"
-                {/if}
+                    alt="img"
+                    style="opacity: {hover == i ? 0 : 1}"
+                />
+                <!-- Hover Image -->
+                <img
+                    class="hover"
+                    src="{`${apiBaseURL}page/${pageId}/${pp.hoverImage?.src}`}"
+                    alt="img"
+                    style="opacity: {hover == i ? 1 : 0}"
+                />
             </div>
             <div class="text">
                 {pp.name}
@@ -36,19 +45,30 @@
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        gap: 80px;
+        gap: 30px;
+        @media @tablet {
+            gap: 80px;
+        }
         .person {
             cursor: pointer;
-            margin: 40px 0px;
+            @media @tablet {
+                margin: 40px 0px;
+            }
             display: flex;
             flex-direction: column;
             .image {
                 width: 290px;
                 height: 368px;
+                position: relative;
+
                 img {
                     width: 100%;
                     height: 100%;
                     object-fit: contain;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    transition: opacity 0.3s; 
                 }
             }
             .text {

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

@@ -9,5 +9,6 @@
 <style>
     .text {
         text-align: left;
+        font-family: "Libre Franklin", sans-serif;
     }
 </style>

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

@@ -18,5 +18,6 @@
         flex-direction: column;
         align-items: start;
         gap: 20px;
+        
     }
 </style>