forked from cms/tibi-svelte-starter
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.
This commit is contained in:
parent
fcf5490d5a
commit
87aa1689f3
@ -112,7 +112,7 @@ fields:
|
||||
meta:
|
||||
helperText:
|
||||
de: "Entsprechende Seiten in einer anderen Sprache, die mit den selben zugewiesenen Stichworten gekennzeichnet sind, können bei Umschaltung der Seitensprache gefunden werden."
|
||||
en: ""
|
||||
en: "Corresponding pages in another language, marked with the same assigned keywords, can be found when switching the page language."
|
||||
widget: chipArray
|
||||
label:
|
||||
de: Verknüpfungs-Stichworte
|
||||
@ -133,6 +133,14 @@ fields:
|
||||
helperText:
|
||||
de: "Der Pfad muss eindeutig sein und ohne ein Slash (/) beginnen und enden."
|
||||
en: "The path must be unique and must start and end without a slash (/)."
|
||||
- name: priority
|
||||
type: number
|
||||
meta:
|
||||
defaultValue: [0]
|
||||
label: { de: "Priorität", en: "Priority" }
|
||||
helperText:
|
||||
de: "Sind mehr als ein Stichwort mit einer Seite verknüpft, führt die Priorität (z.B.: eine Zahl von 0..10..x) der gefundenen Seiten zu einer automatischen Vorauswahl aus den gefundenen Seiten."
|
||||
en: "If more than one keyword is linked to a page, the priority (e.g. a number 0..10..x) of the pages found leads to an automatic preselection from the pages found."
|
||||
- name: blocks
|
||||
type: object[]
|
||||
meta:
|
||||
|
||||
13
src/api.ts
13
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
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -17,8 +17,6 @@
|
||||
|
||||
const setLanguage = (lang: string) => {
|
||||
$currentLang = lang
|
||||
// $location.path = "/" + lang
|
||||
// navigate($location.path + $location.search, { replace: true })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user