Collection für Content angepasst. Image Components erweitert. Verschiedene CSS Apassungen der Demo Page

api/collections/content.yml

@@ -120,5 +120,6 @@ fields:
       type: object[]
       meta:
           label: { de: "Artikel dieser Seite", en: "Page Articles" }
+          collapse: { titleFieldName: "article.content.title" }
       subFields:
           - !include fields/_article.yml

api/collections/fields/_article.yml

@@ -135,21 +135,11 @@ subFields:
                   meta:
                       widget: richtext
                       label: { de: "Teaser-Text des Artikel", en: "Article Teaser Text" }
-                - name: teaserContent
-                  type: string
-                  meta:
-                      widget: uiContentBuilder
-                      label: { de: "Teaser-Inhalt", en: "Article Teaser Content" }
                 - name: details
                   type: string
                   meta:
                       widget: richtext
                       label: { de: "Detail-Text des Artikel", en: "Article Detail Text" }
-                - name: detailsContent
-                  type: string
-                  meta:
-                      widget: uiContentBuilder
-                      label: { de: "Details-Inhalt", en: "Article Details Content" }
                 - name: contentMedia
                   type: object
                   meta:

api/collections/general.yml

@@ -39,7 +39,7 @@ meta:
                   label: { de: "Allgemein", en: "General" }
               subFields:
                   - source: public
-                  - source: meta.metaDescription
+                  #   - source: meta.metaDescription
             - name: meta
               meta:
                   label: { de: "Meta", en: "Meta" }

src/components/widgets/GeneralMediaImage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { generalInfo } from "../../store"
+    import { apiBaseURL } from "../../config"
 
     export let id: string = null
     export let cssClass: string = ""
@@ -14,6 +15,12 @@
                     alt="{mediaFile.alternateText ? mediaFile.alternateText + ' - ' : ''}"
                     class="{cssClass}"
                 />
+            {:else}
+                <img
+                    src="{`${apiBaseURL}general/${$generalInfo?.id}/${mediaFile.file.src}?filter=l`}"
+                    alt="{mediaFile.alternateText ? mediaFile.alternateText : mediaFile.file.path}"
+                    class="{cssClass}"
+                />
             {/if}
         {/if}
     {/each}

src/components/widgets/Header.svelte

@@ -14,6 +14,8 @@
                 <div class="header-content">
                     <a href="/" use:link>
                         <Image
+                            collectionName="general"
+                            entryId="{$generalInfo?.id}"
                             file="{$generalInfo?.media?.brand}"
                             alt="{$generalInfo?.meta?.metaTitle}"
                             cssClass="brand"

src/components/widgets/Image.svelte

@@ -1,9 +1,21 @@
 <script lang="ts">
+    import { apiBaseURL } from "../../config"
+
+    export let collectionName: string = null
+    export let entryId: string = null
     export let file: File = null
     export let alt: string = ""
     export let cssClass: string = ""
 </script>
 
-{#if file}
-    <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
+{#if collectionName && entryId && file}
+    {#if file.src.includes(";base64,")}
+        <img src="{file.src}" alt="{alt ? alt + ' - ' : ''}{file.path}" class="{cssClass}" />
+    {:else}
+        <img
+            src="{`${apiBaseURL}${collectionName}/${entryId}/${file.src}?filter=l`}"
+            alt="{alt ? alt : file.path}"
+            class="{cssClass}"
+        />
+    {/if}
 {/if}

src/components/widgets/Navigation.svelte

@@ -53,8 +53,6 @@
         </div>
 
         <nav class="{ident}-mobile" class:show="{showMobileNav}" use:links>
-            <!-- <img src="img/body-image-left.svg" alt="" class="bg-image" /> -->
-
             {#each navigation?.items || [] as item}
                 {#if item.settings.url.url}
                     <div class="nav-item">

src/css/theme-2022/components/forms.less

@@ -6,7 +6,7 @@ form {
     box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
 
     strong {
-        color: @secondary;
+        color: @primary;
         font-weight: 700;
     }
 
@@ -30,13 +30,6 @@ form {
         flex-shrink: 0;
         border-radius: 100%;
 
-        &.contact {
-            background-color: @secondary-light-green;
-        }
-        &.recipe {
-            background-color: @secondary-light;
-        }
-
         img {
             width: 50%;
         }
@@ -82,7 +75,7 @@ form {
         }
 
         &:focus {
-            border: 1px solid @secondary;
+            border: 1px solid @primary;
             color: @primary;
         }
 
@@ -98,10 +91,10 @@ form {
         display: flex;
         justify-content: center;
         align-items: center;
-        color: @secondary;
+        color: @primary;
 
         &:hover {
-            box-shadow: inset 0 0 10px 0 @secondary;
+            box-shadow: inset 0 0 10px 0 @primary;
         }
     }
 
@@ -111,8 +104,8 @@ form {
 
     button {
         width: 100%;
-        background: @secondary;
-        color: @on-secondary;
+        background: @primary;
+        color: @on-primary;
         padding: @space-xs @space-md;
         border-radius: 10px;
         border: 1px solid transparent;
@@ -121,7 +114,7 @@ form {
         cursor: pointer;
 
         &:hover {
-            border-color: @on-secondary;
+            border-color: @on-primary;
             background-color: @primary;
             color: @on-primary;
         }

src/css/theme-2022/components/general.less

@@ -48,7 +48,7 @@ body {
     .circle-email {
         width: 60px;
         height: 60px;
-        background-color: @secondary-light;
+        background-color: @secondary;
         position: absolute;
         top: -20px;
         right: -39px;
@@ -57,7 +57,7 @@ body {
     .circle-contact {
         width: 60px;
         height: 60px;
-        background-color: @secondary-light-green;
+        background-color: @secondary;
         position: absolute;
         top: 23px;
         right: -53px;

src/css/theme-2022/components/header.less

@@ -31,47 +31,13 @@ header {
     .brand {
         display: block;
         margin: @space-md 0;
+        max-width: 300px;
 
         @media (max-width: 992px) {
             width: 80%;
         }
     }
 
-    .tel-box {
-        display: inline-flex;
-        align-items: center;
-        gap: @space-sm;
-        background: @secondary;
-        color: @on-secondary;
-        font-weight: 700;
-        border-radius: 50px;
-        height: 40px;
-        padding-right: @space-md;
-        margin: @space-md 0 0 auto;
-        text-decoration: none;
-        white-space: nowrap;
-
-        .icon {
-            background: @secondary-light;
-            width: 40px;
-            height: 40px;
-            border-radius: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        @media (max-width: 992px) {
-            & {
-                display: none;
-            }
-            &.mobile {
-                display: inline-flex;
-                justify-content: center;
-            }
-        }
-    }
-
     nav {
         list-style-type: none;
         margin-top: @space-md;
@@ -86,12 +52,11 @@ header {
 
         & > * {
             text-decoration: none;
-            color: @primary;
             transition: @transition-default;
             font-weight: 500;
 
             &:hover {
-                color: @on-background;
+                color: @primary;
             }
         }
     }

src/css/theme-2022/components/language-chooser.less

@@ -2,7 +2,6 @@
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    border: 1px solid @secondary;
     margin: @space-xs;
 
     .lang {

src/css/theme-2022/components/services.less

@@ -19,7 +19,7 @@
             width: 50px;
             height: 50px;
             border-radius: 100%;
-            background-color: @secondary-light;
+            background-color: @secondary;
             display: flex;
             justify-content: center;
             align-items: center;

src/css/theme-2022/main.less

@@ -3,20 +3,16 @@
 @background: #fff;
 @on-background: #575756;
 
-@primary: #2d8e91;
+@primary: #ff0000;
 @on-primary: #fff;
 
-@secondary: #72efdd;
-@on-secondary: #2d8e91;
-@secondary-light: #dafbf7;
-@on-secondary-light: @on-secondary;
-@secondary-light-green: #e2fbf0;
-@on-secondary-light-green: @on-secondary;
+@secondary: #1e7c9e;
+@on-secondary: #ffffff;
 
 @surface: #fff;
-@on-surface: #575756;
+@on-surface: #555555;
 
-@error: #fff0e9;
+@error: #eebdbd;
 @on-error: #eb5757;
 
 @font-size-default: 16px;