Content-Seiten und Language Chooser + Collections so überarbeitet, dass ein Umschalten zwischen Sprachen und Pages möglich ist. Collection der Seiten wurde um eine Priorität erweitert. Navigation zeigt aktives Item an. Entsprechende CSS Klassen angepasst und für neue Projekte sauberer strukturiert.

2022-05-31 15:55:35 +02:00
parent fcf5490d5a
commit 87aa1689f3
8 changed files with 162 additions and 109 deletions
--- a/src/api.ts
+++ b/src/api.ts
@@ -186,13 +186,18 @@ export const sendEmail = async (type: string = "contactForm", data: any, noToken
    })
 }

-export const getContent = async (path: string, lang: string, filter?: APIParams): Promise<Content> => {
+export const getContent = async (locale: string, filter?: APIParams, params?: APIParams): Promise<Content[]> => {
    const c = await api<Content[]>("content", {
-        limit: 1,
-        filter: { path, locale: lang, ...filter },
+        // limit: 1,
+        params: {
+            sort: "priority",
+            ...params,
+        },
+        filter: { locale, ...filter },
+        sort: "-priority",
    })
    if (c?.data?.length) {
-        return c.data[0]
+        return c.data
    }
    return null
 }
--- a/src/components/routes/Content.svelte
+++ b/src/components/routes/Content.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
    import { getContent } from "../../api"
-    import { generalInfo, currentLang } from "../../store"
+    import { generalInfo, currentLang, location } from "../../store"
+    import { navigate } from "svelte-routing"

    import Image from "../widgets/Image.svelte"

@@ -9,19 +10,30 @@
    let loading = true
    let content: Content
    let currentDomain = window.location.protocol + "//" + window.location.host
+    let oldLocation: string

-    const load = () => {
-        let filter = {}
-        if (content?.tags) {
+    const load = (type?: string) => {
+        let filter = {
+            path,
+        }
+
+        if (type === "changedLanguage" && content?.tags) {
            filter = {
                tags: { $in: content?.tags },
            }
+            delete filter.path
        }

        loading = true
-        getContent(path, $currentLang, filter)
+        getContent($currentLang, filter)
            .then((c) => {
-                content = c
+                if (c && c.length) {
+                    if (type === "changedLanguage") {
+                        navigate("/" + c[0].path + $location.search, { replace: true })
+                    } else {
+                        content = c[0]
+                    }
+                }
            })
            .finally(() => {
                loading = false
@@ -29,7 +41,7 @@
    }

    currentLang.subscribe(() => {
-        load()
+        load("changedLanguage")
    })

    $: if (path) load()
@@ -46,6 +58,7 @@
                <!-- Loader -->
            {:else if content}
                {#each content.blocks || [] as b}
+                    <h1>{b.article.content.title}</h1>
                    {JSON.stringify(b)}
                {/each}
            {:else}
--- a/src/components/widgets/LanguageChooser.svelte
+++ b/src/components/widgets/LanguageChooser.svelte
@@ -17,8 +17,6 @@

    const setLanguage = (lang: string) => {
        $currentLang = lang
-        // $location.path = "/" + lang
-        // navigate($location.path + $location.search, { replace: true })
    }
 </script>

--- a/src/components/widgets/Navigation.svelte
+++ b/src/components/widgets/Navigation.svelte
@@ -40,7 +40,7 @@
                    {item.settings.title}
                </a>
            {:else}
-                <a href="{item.settings.page}" class:active="{item.settings.page === $location.path}">
+                <a href="{item.settings.page}" class:active="{'/' + item.settings.page === $location.path}">
                    {item.settings.title}
                </a>
            {/if}
@@ -72,7 +72,7 @@
                        <a
                            href="{item.settings.page}"
                            on:click="{() => (showMobileNav = false)}"
-                            class:active="{item.settings.page === $location.path}"
+                            class:active="{'/' + item.settings.page === $location.path}"
                        >
                            {item.settings.title}
                        </a>
--- a/src/css/theme-2022/components/header.less
+++ b/src/css/theme-2022/components/header.less
@@ -37,97 +37,4 @@ header {
            width: 80%;
        }
    }
-
-    nav {
-        list-style-type: none;
-        margin-top: @space-md;
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        gap: @space-md;
-
-        @media (max-width: 992px) {
-            display: none;
-        }
-
-        a {
-            &.active {
-                color: @primary;
-            }
-        }
-
-        & > * {
-            text-decoration: none;
-            transition: @transition-default;
-            font-weight: 500;
-
-            &:hover {
-                color: @primary;
-            }
-        }
-    }
-
-    .nav-mobile-toggle {
-        display: none;
-        cursor: pointer;
-        margin: @space-md 0 0 auto;
-
-        @media (max-width: 992px) {
-            display: block;
-        }
-    }
-
-    nav.main-mobile {
-        display: none;
-        position: fixed;
-        top: @header-height;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: @surface;
-        z-index: 9999;
-        margin: 0;
-        overflow-y: auto;
-
-        @media (max-width: 768px) {
-            top: @header-height-max-768;
-        }
-
-        &.show {
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            align-items: center;
-        }
-
-        .bg-image {
-            position: absolute;
-            left: 0;
-            top: 0;
-        }
-
-        .nav-item {
-            align-self: center;
-            display: block;
-            text-align: center;
-            color: @primary;
-            font-size: 18px;
-            font-weight: 700;
-
-            a {
-                transition: @transition-default;
-                padding: @space-xs;
-
-                &:hover {
-                    color: @secondary;
-                }
-
-                &.tel-box {
-                    padding: 0 @space-md 0 0;
-                    margin-bottom: @space-md;
-                    color: @primary;
-                }
-            }
-        }
-    }
 }
--- a/src/css/theme-2022/components/navigation.less
+++ b/src/css/theme-2022/components/navigation.less
@@ -1,3 +1,5 @@
+// NAVIGATION - GENERAL
+
 nav {
    @media (max-width: 992px) {
        display: none;
@@ -28,3 +30,122 @@ nav {
        display: block;
    }
 }
+
+// HEADER
+
+header {
+    nav {
+        list-style-type: none;
+        margin-top: @space-md;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: @space-md;
+
+        @media (max-width: 992px) {
+            display: none;
+        }
+
+        a {
+            &.active {
+                color: @primary;
+            }
+        }
+
+        & > * {
+            text-decoration: none;
+            transition: @transition-default;
+            font-weight: 500;
+
+            &:hover {
+                color: @primary;
+            }
+        }
+    }
+
+    .nav-mobile-toggle {
+        display: none;
+        cursor: pointer;
+        margin: @space-md 0 0 auto;
+
+        @media (max-width: 992px) {
+            display: block;
+        }
+    }
+
+    nav.main-mobile {
+        display: none;
+        position: fixed;
+        top: @header-height;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: @surface;
+        z-index: 9999;
+        margin: 0;
+        overflow-y: auto;
+
+        @media (max-width: 768px) {
+            top: @header-height-max-768;
+        }
+
+        &.show {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            align-items: center;
+        }
+
+        .bg-image {
+            position: absolute;
+            left: 0;
+            top: 0;
+        }
+
+        .nav-item {
+            align-self: center;
+            display: block;
+            text-align: center;
+            color: @primary;
+            font-size: 18px;
+            font-weight: 700;
+
+            a {
+                transition: @transition-default;
+                padding: @space-xs;
+
+                &:hover {
+                    color: @secondary;
+                }
+
+                &.tel-box {
+                    padding: 0 @space-md 0 0;
+                    margin-bottom: @space-md;
+                    color: @primary;
+                }
+            }
+        }
+    }
+}
+
+// FOOTER
+
+footer {
+    nav.footer {
+        display: flex;
+        justify-content: center;
+        gap: @space-md;
+
+        a {
+            color: @on-background;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &.active {
+                color: @primary;
+            }
+        }
+    }
+}
--- a/src/css/theme-2022/main.less
+++ b/src/css/theme-2022/main.less
@@ -40,6 +40,7 @@
@import "components/section";
@import "components/header";
@import "components/footer";
+@import "components/navigation";
@import "components/news";
@import "components/services";
@import "components/specials";