forked from cms/tibi-svelte-starter
Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)
This commit is contained in:
parent
f4b6bb17ca
commit
47fdee2396
Binary file not shown.
@ -1,364 +0,0 @@
|
||||
name: article
|
||||
type: tabs
|
||||
meta:
|
||||
label:
|
||||
de: Einstellungen zum Artikel
|
||||
en: Article Setings
|
||||
activeTab: 0
|
||||
subFields:
|
||||
- name: general
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Allgemein
|
||||
en: General
|
||||
css:
|
||||
subFields:
|
||||
- name: public
|
||||
type: boolean
|
||||
meta:
|
||||
label:
|
||||
de: Veröffentlicht
|
||||
en: Public
|
||||
helperText:
|
||||
de: "Der Artikel wird auf der Seite angezeigt."
|
||||
en: "This article is displayed on the page."
|
||||
- name: publish_date
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Datum der Veröffentlichung
|
||||
en: Release Date
|
||||
css: "grid grid-50"
|
||||
subFields:
|
||||
- name: public_from
|
||||
type: date
|
||||
meta:
|
||||
inputProps:
|
||||
type: "datetime-local"
|
||||
label:
|
||||
de: Datum (ab)
|
||||
en: Date (from)
|
||||
- name: public_until
|
||||
type: date
|
||||
meta:
|
||||
inputProps:
|
||||
type: "datetime-local"
|
||||
label:
|
||||
de: Datum (bis)
|
||||
en: Date (until)
|
||||
- name: position
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Position auf der Seite
|
||||
en: Position on page
|
||||
defaultValue: []
|
||||
choices:
|
||||
- { id: "content", name: "Inhaltsbereich" }
|
||||
- { id: "sidebar", name: "Sidebar" }
|
||||
- name: sort
|
||||
type: number
|
||||
meta:
|
||||
inputProps:
|
||||
type: number
|
||||
placeholder: 0
|
||||
label: { de: "Sortierung", en: "Sorting" }
|
||||
helperText:
|
||||
de: "1...5...10...100"
|
||||
en: "1...5...10...100"
|
||||
- name: content
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Inhalt
|
||||
en: Content
|
||||
css:
|
||||
subFields:
|
||||
- name: slug
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Permalink", en: "Permalink" }
|
||||
- name: title
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Titel", en: "Title" }
|
||||
- name: subtitle
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Untertitel", en: "Subtitle" }
|
||||
- name: types
|
||||
type: tabs
|
||||
meta:
|
||||
label:
|
||||
de: Inhalt dieses Artikel
|
||||
en: Article Content
|
||||
activeTab: 0
|
||||
subFields:
|
||||
- name: teaser
|
||||
type: string
|
||||
meta:
|
||||
widget: richtext
|
||||
label: { de: "Teaser-Text des Artikel", en: "Article Teaser Text" }
|
||||
- name: details
|
||||
type: string
|
||||
meta:
|
||||
widget: richtext
|
||||
label: { de: "Detail-Text des Artikel", en: "Article Detail Text" }
|
||||
- name: contentMedia
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Medien
|
||||
en: Media
|
||||
css:
|
||||
subFields:
|
||||
- name: mediaFiles
|
||||
type: object[]
|
||||
meta:
|
||||
label: { de: "Bilder", en: "Images" }
|
||||
subFields:
|
||||
- name: title
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Datei-Titel", en: "File Title" }
|
||||
- name: alternateText
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Alternativer Text", en: "Alternate Text" }
|
||||
- name: id
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||
- name: file
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "Datei", en: "File" }
|
||||
- name: caption
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Bildunterschrift", en: "Caption" }
|
||||
- name: contentAttachments
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Anhänge / Downloads
|
||||
en: Attachments / Downloads
|
||||
css:
|
||||
subFields:
|
||||
- name: attachments
|
||||
type: object[]
|
||||
meta:
|
||||
label: { de: "Anhänge", en: "Attachments" }
|
||||
subFields:
|
||||
- name: title
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Datei-Titel", en: "File Title" }
|
||||
- name: id
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||
- name: file
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "", en: "" }
|
||||
- name: layout
|
||||
type: tabs
|
||||
meta:
|
||||
label:
|
||||
de: Layout
|
||||
en: Layout
|
||||
css:
|
||||
subFields:
|
||||
- name: variant
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Erscheinungsbild
|
||||
en: Appearance
|
||||
defaultValue: ["_self"]
|
||||
choices:
|
||||
- {
|
||||
id: "top",
|
||||
name: { de: "Artikelbild oben (volle Breite)", en: "Article picture top (full width)" },
|
||||
}
|
||||
- {
|
||||
id: "right",
|
||||
name: { de: "Artikelbild rechts (volle Höhe)", en: "Article picture right (full height)" },
|
||||
}
|
||||
- {
|
||||
id: "bottom",
|
||||
name: { de: "Artikelbild unten (volle Breite)", en: "Article picture left (full width)" },
|
||||
}
|
||||
- {
|
||||
id: "left",
|
||||
name: { de: "Artikelbild links (volle Höhe)", en: "Article picture left (full height)" },
|
||||
}
|
||||
- {
|
||||
id: "after-teaser",
|
||||
name:
|
||||
{
|
||||
de: "Artikelbild unter Teaser (volle Breite)",
|
||||
en: "Article picture under teaser (full width)",
|
||||
},
|
||||
}
|
||||
- { id: "top-left", name: { de: "Artikelbild oben links", en: "Article picture above left" } }
|
||||
- { id: "top-right", name: { de: "Artikelbild oben rechts", en: "Article picture above right" } }
|
||||
- { id: "bottom-left", name: { de: "Artikelbild unten links", en: "Article picture below left" } }
|
||||
- {
|
||||
id: "bottom-right",
|
||||
name: { de: "Artikelbild unten rechts", en: "Article picture below right" },
|
||||
}
|
||||
- name: margin
|
||||
type: object
|
||||
meta:
|
||||
label: { de: "Abstand nach außen (Margin)", en: "Distance to the outside (Margin)" }
|
||||
subFields:
|
||||
- name: top
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Oben
|
||||
en: Top
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "mt-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "mt-sm", name: "Kleiner Abstand" }
|
||||
- { id: "mt-md", name: "Normal" }
|
||||
- { id: "mt-lg", name: "Großer Abstand" }
|
||||
- { id: "mt-xl", name: "Sehr großer Abstand" }
|
||||
- name: right
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Rechts
|
||||
en: Right
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "mr-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "mr-sm", name: "Kleiner Abstand" }
|
||||
- { id: "mr-md", name: "Normal" }
|
||||
- { id: "mr-lg", name: "Großer Abstand" }
|
||||
- { id: "mr-xl", name: "Sehr großer Abstand" }
|
||||
- name: bottom
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Unten
|
||||
en: Bottom
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "mb-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "mb-sm", name: "Kleiner Abstand" }
|
||||
- { id: "mb-md", name: "Normal" }
|
||||
- { id: "mb-lg", name: "Großer Abstand" }
|
||||
- { id: "mb-xl", name: "Sehr großer Abstand" }
|
||||
- name: left
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Links
|
||||
en: Left
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "ml-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "ml-sm", name: "Kleiner Abstand" }
|
||||
- { id: "ml-md", name: "Normal" }
|
||||
- { id: "ml-lg", name: "Großer Abstand" }
|
||||
- { id: "ml-xl", name: "Sehr großer Abstand" }
|
||||
- name: padding
|
||||
type: object
|
||||
meta:
|
||||
label: { de: "Abstand nach innen (Padding)", en: "Distance inside (Padding)" }
|
||||
subFields:
|
||||
- name: top
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Oben
|
||||
en: Top
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "pt-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "pt-sm", name: "Kleiner Abstand" }
|
||||
- { id: "pt-md", name: "Normal" }
|
||||
- { id: "pt-lg", name: "Großer Abstand" }
|
||||
- { id: "pt-xl", name: "Sehr großer Abstand" }
|
||||
- name: right
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Rechts
|
||||
en: Right
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "pr-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "pr-sm", name: "Kleiner Abstand" }
|
||||
- { id: "pr-md", name: "Normal" }
|
||||
- { id: "pr-lg", name: "Großer Abstand" }
|
||||
- { id: "pr-xl", name: "Sehr großer Abstand" }
|
||||
- name: bottom
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Unten
|
||||
en: Bottom
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "pb-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "pb-sm", name: "Kleiner Abstand" }
|
||||
- { id: "pb-md", name: "Normal" }
|
||||
- { id: "pb-lg", name: "Großer Abstand" }
|
||||
- { id: "pb-xl", name: "Sehr großer Abstand" }
|
||||
- name: left
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Links
|
||||
en: Left
|
||||
choices:
|
||||
- { id: "", name: "Kein Abstand" }
|
||||
- { id: "pl-xs", name: "Sehr kleiner Abstand" }
|
||||
- { id: "pl-sm", name: "Kleiner Abstand" }
|
||||
- { id: "pl-md", name: "Normal" }
|
||||
- { id: "pl-lg", name: "Großer Abstand" }
|
||||
- { id: "pl-xl", name: "Sehr großer Abstand" }
|
||||
- name: link
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Verlinkung
|
||||
en: Link
|
||||
css:
|
||||
subFields:
|
||||
- name: url
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Ziel-URL", en: "Target URL" }
|
||||
- name: text
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Link-Beschriftung", en: "Link-Text" }
|
||||
- name: target
|
||||
type: string
|
||||
meta:
|
||||
widget: select
|
||||
label:
|
||||
de: Zielfenster
|
||||
en: Target
|
||||
defaultValue: ["_self"]
|
||||
choices:
|
||||
- { id: "_self", name: "(Standardwert) gleicher Tab oder Seite" }
|
||||
- { id: "_blank", name: "Neuer Tab oder Fenster" }
|
||||
- { id: "_parent", name: "Elternfenster" }
|
||||
@ -9,7 +9,7 @@ uploadPath: ../media/content
|
||||
# Metaangaben zur Kollektion welche in der Admin-UI verwendet werden können
|
||||
meta:
|
||||
# Navigationseintrag in der Admin-UI
|
||||
label: { de: "Seiteninhalt", en: "Page Content" }
|
||||
label: { de: "Seiten", en: "Pages" }
|
||||
# Icon (Material UI) für den Navigationseintrag
|
||||
muiIcon: web
|
||||
# Identifizierung eines Eintrags für z.B. Select-Boxen in der Admin-UI
|
||||
@ -24,11 +24,13 @@ meta:
|
||||
mediaQuery: "(max-width:599px)"
|
||||
primaryText: path
|
||||
columns:
|
||||
- name
|
||||
- path
|
||||
# Desktop
|
||||
- type: table
|
||||
mediaQuery: "(min-width:600px)"
|
||||
columns:
|
||||
- name
|
||||
- path
|
||||
|
||||
imageFilter:
|
||||
|
||||
75
api/collections/email.yml
Normal file
75
api/collections/email.yml
Normal file
@ -0,0 +1,75 @@
|
||||
########################################################################
|
||||
# email
|
||||
########################################################################
|
||||
|
||||
name: email
|
||||
uploadPath: ../media/email
|
||||
meta:
|
||||
label: { de: "Kontaktformular", en: "Contact Form" }
|
||||
muiIcon: email
|
||||
rowIdentTpl: { twig: "{{ email }} - {{ subject }}" }
|
||||
views:
|
||||
- type: simpleList
|
||||
mediaQuery: "(max-width: 600px)"
|
||||
primaryText: email
|
||||
secondaryText: subject
|
||||
tertiaryText: insertTime
|
||||
- type: table
|
||||
columns:
|
||||
- insertTime
|
||||
- email
|
||||
- subject
|
||||
|
||||
# Zugriff auf diese Kollektion
|
||||
permissions:
|
||||
# öffentlicher Zugriff
|
||||
public:
|
||||
methods:
|
||||
# Liste und Einzeleinträge lesen
|
||||
# checked via hook
|
||||
get: false
|
||||
# neuen Eintrag anlegen
|
||||
post: true
|
||||
# Eintrag editieren
|
||||
put: false
|
||||
# Eintrag löschen
|
||||
delete: false
|
||||
# zum Projekt zugeordneter Benutzer ohne Zusatzberechtigungen
|
||||
user:
|
||||
methods:
|
||||
get: false
|
||||
post: false
|
||||
put: false
|
||||
delete: false
|
||||
# token als Zusatzsicherung gegen Spam, mehr siehe Hook
|
||||
"token:${PUBLIC_TOKEN}":
|
||||
methods:
|
||||
get: false
|
||||
post: true
|
||||
put: false
|
||||
delete: false
|
||||
|
||||
hooks:
|
||||
post:
|
||||
create:
|
||||
type: javascript
|
||||
file: hooks/email/post_create.js
|
||||
|
||||
fields:
|
||||
- name: name
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Name", en: "Name" }
|
||||
- name: email
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Email", en: "Email" }
|
||||
- name: subject
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Betreff", en: "Subject" }
|
||||
- name: message
|
||||
type: string
|
||||
meta:
|
||||
widget: richtext
|
||||
label: { de: "Nachricht", en: "Message" }
|
||||
@ -9,7 +9,7 @@ meta:
|
||||
en: "Defines in which language the menu is available. The default language is 'de-DE'.",
|
||||
}
|
||||
filter: true
|
||||
defaultValue: "de-DE"
|
||||
defaultValue: "de"
|
||||
choices:
|
||||
- { id: af, name: { key: "labels.locales.af" } }
|
||||
- { id: af-ZA, name: { key: "labels.locales.af-ZA" } }
|
||||
|
||||
@ -37,25 +37,219 @@ meta:
|
||||
entryViewFields:
|
||||
tabsSection:
|
||||
meta:
|
||||
expand: general
|
||||
expand: meta
|
||||
tabs:
|
||||
- name: general
|
||||
meta:
|
||||
label: { de: "Allgemein", en: "General" }
|
||||
source: generalInformation
|
||||
- name: general2
|
||||
meta:
|
||||
label: { de: "Allgemein2", en: "General2 " }
|
||||
fields:
|
||||
- name: public
|
||||
type: boolean
|
||||
meta:
|
||||
defaultValue: true
|
||||
label:
|
||||
de: Veröffentlicht
|
||||
en: Public
|
||||
helperText:
|
||||
de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
|
||||
en: "All general information are displayed on the page."
|
||||
- name: meta
|
||||
meta:
|
||||
label: { de: "Meta", en: "Meta" }
|
||||
fields:
|
||||
- name: meta
|
||||
type: object
|
||||
subFields:
|
||||
- name: metaTitle
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Titel der Webseite", en: "Page Title" }
|
||||
- name: metaDescription
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Beschreibung der Webseite", en: "Page Description" }
|
||||
- name: metaTagRobots
|
||||
type: string[]
|
||||
meta:
|
||||
widget: chipArray
|
||||
label:
|
||||
de: Robots
|
||||
en: Robots
|
||||
defaultValue: []
|
||||
autocomplete: true
|
||||
choices:
|
||||
- { id: "noindex", name: "noindex" }
|
||||
- { id: "index", name: "index" }
|
||||
- { id: "follow", name: "follow" }
|
||||
- { id: "nofollow", name: "nofollow" }
|
||||
- { id: "noimageindex", name: "noimageindex" }
|
||||
- { id: "none", name: "none" }
|
||||
- { id: "noarchive", name: "noarchive" }
|
||||
- { id: "nocache", name: "nocache" }
|
||||
- { id: "nosnippet", name: "nosnippet" }
|
||||
- { id: "nnavailable_after", name: "nnavailable_after" }
|
||||
helperText:
|
||||
de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
|
||||
en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
|
||||
- name: metaKeywords
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
|
||||
helperText:
|
||||
de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
|
||||
en: "Example: keyword1, keyword2, keyword3"
|
||||
- name: person
|
||||
meta:
|
||||
label: { de: "Person", en: "Person" }
|
||||
fields:
|
||||
- name: person
|
||||
type: object
|
||||
subFields:
|
||||
- name: salutation
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Anrede", en: "Salutation" }
|
||||
- name: firstname
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Vorname", en: "Firstname" }
|
||||
- name: lastname
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Nachname", en: "Lastname" }
|
||||
- name: additional
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Zusatz", en: "Additional" }
|
||||
- name: street
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Straße", en: "Street" }
|
||||
- name: postcode
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Postleitzahl", en: "Postcode" }
|
||||
- name: city
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Ort", en: "City" }
|
||||
- name: tel
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Telefonnummer", en: "Phone number" }
|
||||
- name: fax
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Faxnummer", en: "Fax number" }
|
||||
- name: mobile
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Handynummer", en: "Mobile number" }
|
||||
- name: email
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "E-Mail", en: "E-Mail" }
|
||||
- name: company
|
||||
meta:
|
||||
label: { de: "Unternehmen", en: "Company" }
|
||||
fields:
|
||||
- name: person
|
||||
type: object
|
||||
subFields:
|
||||
- name: companyName
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Name des Unternehmens", en: "Company Name" }
|
||||
- name: companyWebUrl
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "URL zur Webseite", en: "Website URL" }
|
||||
- name: companyAddresses
|
||||
type: object[]
|
||||
meta:
|
||||
label:
|
||||
de: Adresse
|
||||
en: Adresse
|
||||
css:
|
||||
subFields:
|
||||
- name: street
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Straße", en: "Street" }
|
||||
- name: houseNr
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Hausnummer", en: "House number" }
|
||||
- name: postcode
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "PLZ", en: "ZIP" }
|
||||
- name: city
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Ort", en: "City" }
|
||||
- name: tel
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Telefon", en: "Phone number" }
|
||||
- name: fax
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Fax", en: "Fax" }
|
||||
- name: email
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "E-Mail", en: "E-Mail" }
|
||||
- name: media
|
||||
meta:
|
||||
label: { de: "Medien", en: "Media" }
|
||||
fields:
|
||||
- name: media
|
||||
type: object
|
||||
subFields:
|
||||
- name: favicon
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "Favicon", en: "Favicon" }
|
||||
helperText:
|
||||
de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen."
|
||||
en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way."
|
||||
- name: brand
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "Logo / Brand", en: "Logo / Brand" }
|
||||
helperText:
|
||||
de: "Logo der Seite"
|
||||
en: "Page Logo"
|
||||
- name: mediaFiles
|
||||
type: object[]
|
||||
meta:
|
||||
label: { de: "Dateien", en: "Files" }
|
||||
subFields:
|
||||
- name: title
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Datei-Titel", en: "File Title" }
|
||||
- name: alternateText
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Alternativer Text", en: "Alternate Text" }
|
||||
- name: id
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||
- name: file
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "", en: "" }
|
||||
- name: copyright
|
||||
meta:
|
||||
label: { de: "Copyright", en: "Copyright" }
|
||||
fields:
|
||||
- name: copyrightText
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Copyright Text", en: "Copyright Text" }
|
||||
|
||||
imageFilter:
|
||||
xs:
|
||||
@ -110,231 +304,4 @@ permissions:
|
||||
put: false
|
||||
delete: false
|
||||
|
||||
fields:
|
||||
- name: public
|
||||
type: boolean
|
||||
meta:
|
||||
label:
|
||||
de: Veröffentlicht
|
||||
en: Public
|
||||
helperText:
|
||||
de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
|
||||
en: "All general information are displayed on the page."
|
||||
- name: generalInformation
|
||||
type: tabs
|
||||
meta:
|
||||
label:
|
||||
de: Allgemeine Information
|
||||
en: General Information
|
||||
activeTab: 0
|
||||
subFields:
|
||||
- name: types
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Allgemein
|
||||
en: General
|
||||
css:
|
||||
subFields:
|
||||
- name: public
|
||||
type: boolean
|
||||
meta:
|
||||
label:
|
||||
de: Veröffentlicht
|
||||
en: Public
|
||||
helperText:
|
||||
de: "Alle allgemeinen Informationen werden auf der Seite angezeigt."
|
||||
en: "All general information are displayed on the page."
|
||||
- name: meta
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Meta
|
||||
en: Meta
|
||||
css:
|
||||
subFields:
|
||||
- name: metaTitle
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Titel der Webseite", en: "Page Title" }
|
||||
- name: metaDescription
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Beschreibung der Webseite", en: "Page Description" }
|
||||
- name: metaTagRobots
|
||||
type: string[]
|
||||
meta:
|
||||
widget: chipArray
|
||||
label:
|
||||
de: Robots
|
||||
en: Robots
|
||||
defaultValue: []
|
||||
autocomplete: true
|
||||
choices:
|
||||
- { id: "noindex", name: "noindex" }
|
||||
- { id: "index", name: "index" }
|
||||
- { id: "follow", name: "follow" }
|
||||
- { id: "nofollow", name: "nofollow" }
|
||||
- { id: "noimageindex", name: "noimageindex" }
|
||||
- { id: "none", name: "none" }
|
||||
- { id: "noarchive", name: "noarchive" }
|
||||
- { id: "nocache", name: "nocache" }
|
||||
- { id: "nosnippet", name: "nosnippet" }
|
||||
- { id: "nnavailable_after", name: "nnavailable_after" }
|
||||
helperText:
|
||||
de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
|
||||
en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
|
||||
- name: metaKeywords
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
|
||||
helperText:
|
||||
de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
|
||||
en: "Example: keyword1, keyword2, keyword3"
|
||||
- name: person
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Personendaten
|
||||
en: Personal Data
|
||||
css:
|
||||
subFields:
|
||||
- name: firstname
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Vorname", en: "Firstname" }
|
||||
- name: lastname
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Nachname", en: "Lastname" }
|
||||
- name: street
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Straße", en: "Street" }
|
||||
- name: postcode
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Postleitzahl", en: "Postcode" }
|
||||
- name: city
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Ort", en: "City" }
|
||||
- name: tel
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Telefonnummer", en: "Phone number" }
|
||||
- name: mobile
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Handynummer", en: "Mobile number" }
|
||||
- name: email
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "E-Mail", en: "E-Mail" }
|
||||
- name: company
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Unternehmensdaten
|
||||
en: Company Data
|
||||
css:
|
||||
subFields:
|
||||
- name: companyName
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Name des Unternehmens", en: "Company Name" }
|
||||
- name: companyWebUrl
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "URL zur Webseite", en: "Website URL" }
|
||||
- name: companyAddresses
|
||||
type: object[]
|
||||
meta:
|
||||
label:
|
||||
de: Adresse
|
||||
en: Adresse
|
||||
css:
|
||||
subFields:
|
||||
- name: street
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Straße", en: "Street" }
|
||||
- name: houseNr
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Hausnummer", en: "House number" }
|
||||
- name: postcode
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "PLZ", en: "ZIP" }
|
||||
- name: city
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Ort", en: "City" }
|
||||
- name: tel
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Telefon", en: "Phone number" }
|
||||
- name: fax
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Fax", en: "Fax" }
|
||||
- name: email
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "E-Mail", en: "E-Mail" }
|
||||
- name: media
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Media
|
||||
en: Media
|
||||
css:
|
||||
subFields:
|
||||
- name: favicon
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "Favicon", en: "Favicon" }
|
||||
helperText:
|
||||
de: "Ein Favicon ist ein kleines Icon, Symbol oder Logo, das von Webbrowsern verwendet wird, um eine Website auf wiedererkennbare Weise zu kennzeichnen."
|
||||
en: "A favicon is a small icon, symbol, or logo used by web browsers to identify a website in a recognizable way."
|
||||
- name: brand
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "Logo / Brand", en: "Logo / Brand" }
|
||||
helperText:
|
||||
de: "Logo der Seite"
|
||||
en: "Page Logo"
|
||||
- name: mediaFiles
|
||||
type: object[]
|
||||
meta:
|
||||
label: { de: "Dateien", en: "Files" }
|
||||
subFields:
|
||||
- name: title
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Datei-Titel", en: "File Title" }
|
||||
- name: alternateText
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Alternativer Text", en: "Alternate Text" }
|
||||
- name: id
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Technischer Name / ID", en: "Technical name / ID" }
|
||||
- name: file
|
||||
type: file
|
||||
meta:
|
||||
label: { de: "", en: "" }
|
||||
- name: copyright
|
||||
type: object
|
||||
meta:
|
||||
label:
|
||||
de: Copyright
|
||||
en: Copyright
|
||||
css:
|
||||
subFields:
|
||||
- name: copyrightText
|
||||
type: string
|
||||
meta:
|
||||
label: { de: "Copyright Text", en: "Copyright Text" }
|
||||
fields: []
|
||||
|
||||
@ -104,15 +104,15 @@ x-settings: &settings
|
||||
|
||||
x-page: &page
|
||||
name: page
|
||||
type: string
|
||||
type: object
|
||||
meta:
|
||||
widget: select
|
||||
label: { de: Seite, en: "Page" }
|
||||
choices:
|
||||
endpoint: "content"
|
||||
mapping:
|
||||
id: "id"
|
||||
name: "path"
|
||||
id: "path"
|
||||
name: "name"
|
||||
params:
|
||||
count: 1
|
||||
sort: "ASC"
|
||||
@ -170,10 +170,10 @@ fields:
|
||||
name:
|
||||
de: Hauptnavigation
|
||||
en: Main Navigation
|
||||
- id: service
|
||||
- id: footer
|
||||
name:
|
||||
de: Servicenavigation
|
||||
en: Servicen Navigation
|
||||
de: Fußzeile
|
||||
en: Footer Navigation
|
||||
|
||||
- !include fields/_locale.yml
|
||||
|
||||
|
||||
@ -49,9 +49,11 @@
|
||||
"typescript": "^4.6.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/js": "^6.7.96",
|
||||
"@sentry/browser": "^6.19.6",
|
||||
"@sentry/tracing": "^6.19.6",
|
||||
"core-js": "3.22.2"
|
||||
"core-js": "3.22.2",
|
||||
"mdi-svelte": "^1.1.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@cypress/code-coverage": "^3.9.12",
|
||||
|
||||
@ -49,6 +49,17 @@
|
||||
<div id="appContainer"><!--HTML--></div>
|
||||
<script type="module" src="/_dist_/index.mjs?t=__TIMESTAMP__"></script>
|
||||
<script nomodule src="/_dist_/index.es5.js?t=__TIMESTAMP__"></script>
|
||||
|
||||
<!-- Webmakers - Cookie Bar -->
|
||||
<script
|
||||
src="//cc.webmakers.de/cc.js"
|
||||
defer
|
||||
id="ccScript"
|
||||
data-cc-tags="googleMaps"
|
||||
data-cc-privacy-policy-url="/datenschutz"
|
||||
data-cc-secondary-color="#c4253e"
|
||||
data-cc-necessary-cookies="likecmsSession"
|
||||
></script>
|
||||
</body>
|
||||
|
||||
<!--SSR.ERROR-->
|
||||
|
||||
116
src/api.ts
116
src/api.ts
@ -1,6 +1,7 @@
|
||||
import { apiBaseURL } from "./config"
|
||||
import * as sentry from "./sentry"
|
||||
import * as SSR from "../api/hooks/lib/ssr.js"
|
||||
import config from "../api/hooks/config"
|
||||
|
||||
// [MIT License](LICENSE.md) © [Jason Miller](https://jasonformat.com/)
|
||||
const _f = function (url, options): Promise<Response> {
|
||||
@ -74,9 +75,12 @@ export const api = async <T>(
|
||||
headers?: {
|
||||
[key: string]: string
|
||||
}
|
||||
params?: {
|
||||
[key: string]: string
|
||||
}
|
||||
params?: APIParams
|
||||
body?: any
|
||||
noToken?: boolean
|
||||
signal?: AbortSignal
|
||||
_groupBy?: string
|
||||
showErrors?: boolean
|
||||
}
|
||||
): Promise<{ data: T; count: number }> => {
|
||||
if (typeof window === "undefined") {
|
||||
@ -98,6 +102,7 @@ export const api = async <T>(
|
||||
}
|
||||
|
||||
let method = "GET"
|
||||
if (options?.method) method = options.method.toUpperCase()
|
||||
|
||||
let query = "&count=1"
|
||||
if (options?.filter) query += "&filter=" + encodeURIComponent(JSON.stringify(options.filter))
|
||||
@ -105,6 +110,7 @@ export const api = async <T>(
|
||||
if (options?.limit) query += "&limit=" + options.limit
|
||||
if (options?.offset) query += "&offset=" + options.offset
|
||||
if (options?.projection) query += "&projection=" + options.projection
|
||||
if (options?._groupBy) query += "&_groupBy=" + options._groupBy
|
||||
|
||||
if (options?.params) {
|
||||
Object.keys(options.params).forEach((p) => {
|
||||
@ -116,9 +122,17 @@ export const api = async <T>(
|
||||
"Content-Type": "application/json",
|
||||
}
|
||||
|
||||
// send jwt
|
||||
if (!options?.noToken) {
|
||||
// try {
|
||||
// headers["Authorization"] =
|
||||
// "Bearer " + (await getLogin()).tokenString
|
||||
// } catch (e) { }
|
||||
}
|
||||
|
||||
if (options?.headers) headers = { ...headers, ...options.headers }
|
||||
|
||||
let url = apiBaseURL + endpoint + (query ? "?" + query : "")
|
||||
let url = apiBaseURL + endpoint + (query ? (endpoint.includes("?") ? query : "?" + query) : "")
|
||||
|
||||
const span = sentry.currentTransaction()?.startChild({
|
||||
op: "fetch",
|
||||
@ -130,21 +144,46 @@ export const api = async <T>(
|
||||
headers["sentry-trace"] = trace_id
|
||||
}
|
||||
|
||||
const response = await _fetch(url, {
|
||||
method,
|
||||
mode: "cors",
|
||||
headers,
|
||||
try {
|
||||
const response = await _fetch(url, {
|
||||
method,
|
||||
mode: "cors",
|
||||
headers,
|
||||
body: options?.body ? JSON.stringify(options.body) : null,
|
||||
signal: options?.signal,
|
||||
})
|
||||
|
||||
span?.finish()
|
||||
|
||||
// @ts-ignore
|
||||
let data = (await response?.json()) || null
|
||||
|
||||
if (response?.status < 200 || response?.status >= 400) throw { response, data }
|
||||
|
||||
// @ts-ignore
|
||||
return { data, count: response?.headers?.get("x-results-count") || 0 }
|
||||
} catch (e) {
|
||||
if (options?.showErrors && !(e instanceof DOMException)) {
|
||||
// newNotification({
|
||||
// class: "error",
|
||||
// html: "Es ist ein Fehler aufgetreten! Bitte laden Sie die Seite neu und versuchen es später nocheinmal.",
|
||||
// timeout: 6000,
|
||||
// })
|
||||
}
|
||||
throw e
|
||||
}
|
||||
}
|
||||
|
||||
export const sendEmail = async (type: string = "contactForm", data: any, noToken?: boolean) => {
|
||||
await api("email?type=" + type, {
|
||||
method: "post",
|
||||
body: data,
|
||||
noToken,
|
||||
showErrors: true,
|
||||
headers: {
|
||||
token: config.publicToken,
|
||||
},
|
||||
})
|
||||
|
||||
span?.finish()
|
||||
|
||||
// @ts-ignore
|
||||
let data = (await response?.json()) || null
|
||||
|
||||
if (response?.status < 200 || response?.status >= 400) throw { response, data }
|
||||
|
||||
// @ts-ignore
|
||||
return { data, count: response?.headers?.get("x-results-count") || 0 }
|
||||
}
|
||||
|
||||
export const getContent = async (path: string): Promise<Content> => {
|
||||
@ -155,14 +194,14 @@ export const getContent = async (path: string): Promise<Content> => {
|
||||
return null
|
||||
}
|
||||
|
||||
export const getGeneralInformation = async (): Promise<GeneralInformation[]> => {
|
||||
export const getGeneralInformation = async (): Promise<GeneralInfo[]> => {
|
||||
try {
|
||||
let response = await api<GeneralInformation[]>("general", {
|
||||
let response = await api<GeneralInfo[]>("general", {
|
||||
method: "get",
|
||||
offset: 0,
|
||||
limit: 1,
|
||||
filter: {
|
||||
active: true,
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
return response.data
|
||||
@ -185,3 +224,38 @@ export const getArticles = async (): Promise<TibiArticle[]> => {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export const getNavigations = async (l: Locale): Promise<Navigation[]> => {
|
||||
try {
|
||||
let response = await api<Navigation[]>("navigation", {
|
||||
method: "get",
|
||||
offset: 0,
|
||||
filter: {
|
||||
locale: l.key,
|
||||
},
|
||||
})
|
||||
return response.data
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export const getGalleries = async (galIds: number[], params?: APIParams): Promise<Gallery[]> => {
|
||||
try {
|
||||
let response = await api<Gallery[]>("galleries", {
|
||||
method: "get",
|
||||
offset: 0,
|
||||
params: {
|
||||
sort: "title",
|
||||
...params,
|
||||
},
|
||||
filter: {
|
||||
_id: { $in: galIds },
|
||||
},
|
||||
})
|
||||
|
||||
return response.data
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { Router, Route, links } from "svelte-routing"
|
||||
import { Router, Route } from "svelte-routing"
|
||||
import { scrollToTop } from "svelte-scrollto"
|
||||
import { location } from "../store"
|
||||
|
||||
import Home from "./routes/Home.svelte"
|
||||
import Content from "./routes/Content.svelte"
|
||||
|
||||
import Header from "./widgets/Header.svelte"
|
||||
import Footer from "./widgets/Footer.svelte"
|
||||
|
||||
export let url = ""
|
||||
if (url) {
|
||||
// ssr
|
||||
@ -24,23 +29,21 @@
|
||||
if (typeof window !== "undefined") console.log("App initialized")
|
||||
</script>
|
||||
|
||||
<style lang="less" global>
|
||||
@import "./../css/main.less";
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<Header />
|
||||
|
||||
<h1>__PROJECT_TITLE__</h1>
|
||||
|
||||
<div use:links>
|
||||
<a href="/test1">1</a>
|
||||
<a href="/test2">2</a>
|
||||
<a href="/test3">3</a>
|
||||
<a href="/test4">4</a>
|
||||
<div>
|
||||
<Router url="{url}">
|
||||
<Route path="/" let:params>
|
||||
<Home />
|
||||
</Route>
|
||||
<Route path="/*path" let:params>
|
||||
<Content path="/{params.path}" />
|
||||
</Route>
|
||||
</Router>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style lang="less" global>
|
||||
@import "./../css/main.less";
|
||||
</style>
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let blocks: ContentBlock[]
|
||||
export let imageBase: string
|
||||
|
||||
export let accordeon = false
|
||||
|
||||
let activeAccordeons: {
|
||||
[key: number]: boolean
|
||||
} = {}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.acc_trigger {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
border-bottom: solid 1px #ccc;
|
||||
padding-bottom: 10px;
|
||||
.icon {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
transform: rotate(0deg);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&.active {
|
||||
.icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideText {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if blocks?.length}
|
||||
<section class="section_padding">
|
||||
<div class="container">
|
||||
{#each blocks as box, idx}
|
||||
<!-- Teaserbox -->
|
||||
<div class="row center_row">
|
||||
{#if box.images?.length && (box.layout == 1 || box.layout == 3)}
|
||||
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="{imageBase + box.images[0].file.src}"
|
||||
alt="{box.images[0].label || ''}"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if box.text || box.title || (box.button_text && box.button_url)}
|
||||
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||
{#if box.subtitle}
|
||||
<div class="subline">{box.subtitle}</div>
|
||||
{/if}
|
||||
{#if box.title}
|
||||
{#if accordeon == true}
|
||||
<h2
|
||||
class="h2_nooffset acc_trigger"
|
||||
class:active="{activeAccordeons[idx]}"
|
||||
on:click="{() => {
|
||||
activeAccordeons[idx] =
|
||||
!activeAccordeons[idx]
|
||||
}}"
|
||||
>
|
||||
{box.title}
|
||||
<span class="icon">\/</span>
|
||||
</h2>
|
||||
{:else}
|
||||
<h2 class="h2_nooffset">{box.title}</h2>
|
||||
{/if}
|
||||
{/if}
|
||||
<div
|
||||
class="boxText"
|
||||
class:hideText="{accordeon &&
|
||||
box.title &&
|
||||
!activeAccordeons[idx]}"
|
||||
>
|
||||
{@html box.text}
|
||||
{#if box.button_text && box.button_url}
|
||||
<a
|
||||
href="{box.button_url}"
|
||||
class="btn btn_blue"
|
||||
>{box.button_text}</a
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if box.images?.length && (box.layout == 2 || box.layout == 4)}
|
||||
<div class="col-md-{box.layout < 3 ? 6 : 12}">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="{imageBase + box.images[0].file.src}"
|
||||
alt="{box.images[0].label || ''}"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
@ -1,95 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { generalInformation } from "../store"
|
||||
import { apiBaseURL } from "../config"
|
||||
|
||||
export let article: PrototypeArticle
|
||||
export let details: boolean = false
|
||||
|
||||
const a = article.article
|
||||
let cssClasses: string = "p_article"
|
||||
|
||||
cssClasses += a.layout.variant ? " p_article-" + a.layout.variant : ""
|
||||
cssClasses += " " + Object.values(a.layout.margin).join(" ")
|
||||
cssClasses += " " + Object.values(a.layout.padding).join(" ")
|
||||
|
||||
const getImageAlt = (image): string => {
|
||||
if (image.alternateText) {
|
||||
return image.alternateText
|
||||
}
|
||||
if (image.title) {
|
||||
return image.title
|
||||
}
|
||||
|
||||
return a.content.title
|
||||
}
|
||||
|
||||
const getImageSrc = (file) => {
|
||||
const url = `${apiBaseURL}prototype_articles/${file.id}/${file.file.path}?filter=l`
|
||||
console.log(url, file)
|
||||
return url
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if a.general.public}
|
||||
<article class="{cssClasses}">
|
||||
{#if !a.layout.variant || a.layout.variant === "top-left"}
|
||||
{#if a.general.categories}
|
||||
<div class="p_article-categories">
|
||||
{#each a.general.categories || [] as c}
|
||||
<span class="p_article-category">{c}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if a.content.types.contentMedia.mediaFiles}
|
||||
<div class="p_article-images">
|
||||
{#each a.content.types.contentMedia.mediaFiles || [] as image}
|
||||
<!-- {JSON.stringify(image)} -->
|
||||
{#if image?.file?.path}
|
||||
{getImageSrc(image)}
|
||||
<!-- <img
|
||||
src="{getImageSrc(image?.file)}"
|
||||
id="{image?.id ? image?.id : ''}"
|
||||
alt="{getImageAlt(image)}"
|
||||
class="p_article-image"
|
||||
/> -->
|
||||
{/if}
|
||||
{#if image?.caption}
|
||||
<div class="p_article-image-caption">{image?.caption}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if a.content.title}
|
||||
<div class="p_article-title">{a.content.title}</div>
|
||||
{/if}
|
||||
{#if a.content.subtitle}
|
||||
<div class="p_article-subtitle">{a.content.subtitle}</div>
|
||||
{/if}
|
||||
{#if a.content.types.teaser}
|
||||
<div class="p_article-teaser">
|
||||
{@html a.content.types.teaser}
|
||||
</div>
|
||||
{/if}
|
||||
{#if details && a.content.types.details}
|
||||
<div class="p_article-details">
|
||||
{@html a.content.types.details}
|
||||
</div>
|
||||
{/if}
|
||||
{#if a.link.url}
|
||||
<a href="{a.link.url}" target="{a.link.target}">
|
||||
{a.link.text ? a.link.text : a.link.url}
|
||||
</a>
|
||||
{/if}
|
||||
{#if a.content.types.contentAttachments.attachments}
|
||||
<div class="p_article-attachments">
|
||||
{#each a.content.types.contentAttachments.attachments || [] as attachment}
|
||||
<a href="{attachment.file.src}" download="{attachment.file.path}" class="p_article-attachment">
|
||||
{attachment.title ? attachment.title : attachment.file.path}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</article>
|
||||
{/if}
|
||||
@ -1,7 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { getContent } from "../../api"
|
||||
// import { apiBaseURL } from "../../config"
|
||||
import { generalInfo } from "../../store"
|
||||
|
||||
export let path: string
|
||||
|
||||
console.log("Content: ", path)
|
||||
let loading = true
|
||||
let content: Content
|
||||
|
||||
function load() {
|
||||
loading = true
|
||||
getContent(path)
|
||||
.then((c) => {
|
||||
content = c
|
||||
})
|
||||
.finally(() => {
|
||||
loading = false
|
||||
})
|
||||
}
|
||||
|
||||
$: if (path) load()
|
||||
</script>
|
||||
|
||||
<h2>{path}</h2>
|
||||
<svelte:head>
|
||||
<title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
|
||||
<meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
|
||||
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
|
||||
<meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
|
||||
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{#if loading}
|
||||
<!-- Loader -->
|
||||
{:else if content}
|
||||
{#each content.blocks || [] as b}
|
||||
<h2>{b.title}</h2>
|
||||
<div>{@html b.text}</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<h1>Seite nicht gefunden</h1>
|
||||
<div>Pfad: {path}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
50
src/components/routes/Home.svelte
Normal file
50
src/components/routes/Home.svelte
Normal file
@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import * as animateScroll from "svelte-scrollto"
|
||||
|
||||
import { generalInfo } from "../../store"
|
||||
|
||||
import GoogleMaps from "../widgets/GoogleMaps.svelte"
|
||||
import ScrollTo from "../widgets/ScrollTo.svelte"
|
||||
import ContactForm from "../widgets/ContactForm.svelte"
|
||||
|
||||
let expandedForm: string = "recipe"
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$generalInfo?.meta?.metaTitle}</title>
|
||||
<meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
|
||||
<meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
|
||||
<meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
|
||||
<meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="contact">
|
||||
<div class="container">
|
||||
<div class="row nospace">
|
||||
<div class="col-md-6">
|
||||
<ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GoogleMaps />
|
||||
</section>
|
||||
|
||||
<ScrollTo
|
||||
on:scrollTo="{(e) => {
|
||||
expandedForm = null
|
||||
animateScroll.scrollTo({
|
||||
delay: 100,
|
||||
element: '#' + e.detail.element,
|
||||
offset: -200,
|
||||
onDone: () => {
|
||||
expandedForm = e.detail.element
|
||||
},
|
||||
})
|
||||
}}"
|
||||
/>
|
||||
@ -1,31 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { getPrototypeArticles } from "../../api"
|
||||
|
||||
import Sidebar from "../page/Sidebar.svelte"
|
||||
import PrototypeArticle from "../page/PrototypeArticle.svelte"
|
||||
|
||||
let articles: PrototypeArticle[] | []
|
||||
|
||||
const getArticles = async () => {
|
||||
articles = await getPrototypeArticles()
|
||||
}
|
||||
getArticles()
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
|
||||
<div>
|
||||
{#each articles || [] as article}
|
||||
<PrototypeArticle article="{article}" />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<Sidebar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
160
src/components/widgets/ContactForm.svelte
Normal file
160
src/components/widgets/ContactForm.svelte
Normal file
@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition"
|
||||
import { mdiCheck, mdiChevronDown } from "@mdi/js"
|
||||
import Icon from "mdi-svelte"
|
||||
|
||||
import { sendEmail } from "../../api"
|
||||
|
||||
export let type: string
|
||||
export let collapsed: boolean = false
|
||||
|
||||
let formData: {
|
||||
name: string
|
||||
email: string
|
||||
subject: string
|
||||
message: string
|
||||
privacy: boolean
|
||||
} = {
|
||||
name: null,
|
||||
email: null,
|
||||
subject: null,
|
||||
message: null,
|
||||
privacy: false,
|
||||
}
|
||||
let requestSucessfully: boolean = false
|
||||
let requestPending: boolean = false
|
||||
|
||||
const submit = () => {
|
||||
if (
|
||||
formData["name"] &&
|
||||
formData["email"] &&
|
||||
formData["subject"] &&
|
||||
formData["message"] &&
|
||||
formData["privacy"]
|
||||
) {
|
||||
requestPending = true
|
||||
sendEmail(type + "Form", formData)
|
||||
.then(() => {
|
||||
resetForm()
|
||||
requestSucessfully = true
|
||||
requestPending = false
|
||||
|
||||
setTimeout(() => {
|
||||
requestSucessfully = false
|
||||
}, 10000)
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e)
|
||||
requestPending = false
|
||||
})
|
||||
.finally(() => {
|
||||
requestPending = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
formData = {
|
||||
name: null,
|
||||
email: null,
|
||||
subject: null,
|
||||
message: null,
|
||||
privacy: false,
|
||||
}
|
||||
}
|
||||
|
||||
$: isValid =
|
||||
formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
|
||||
</script>
|
||||
|
||||
<div id="{type}">
|
||||
<form on:submit|preventDefault="{submit}" class="mt-lg">
|
||||
<div class="layout justify-content-space-between layout-gap-md">
|
||||
<div class="hidden-sm icon {type}">
|
||||
<!-- <img src="img/icon/{type}.svg" alt="" /> -->
|
||||
</div>
|
||||
<div class="titles" on:click="{() => (collapsed = !collapsed)}">
|
||||
<h3 class="title">
|
||||
{type === "contact" ? "Kontakt" : ""}
|
||||
{type === "recipe" ? "Rezeptanfrage" : ""}
|
||||
</h3>
|
||||
<h4 class="subTitle">
|
||||
{type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
|
||||
{type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
|
||||
<Icon path="{mdiChevronDown}" size="2" />
|
||||
</div>
|
||||
</div>
|
||||
{#if !collapsed}
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mt-sm">
|
||||
<input
|
||||
type="text"
|
||||
bind:value="{formData['name']}"
|
||||
placeholder="Name"
|
||||
readonly="{requestPending}"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-6 mt-sm">
|
||||
<input
|
||||
type="text"
|
||||
bind:value="{formData['email']}"
|
||||
placeholder="E-Mail Adresse"
|
||||
readonly="{requestPending}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nospace">
|
||||
<div class="col-md-12 mt-sm">
|
||||
<input
|
||||
type="text"
|
||||
bind:value="{formData['subject']}"
|
||||
placeholder="Betreff"
|
||||
readonly="{requestPending}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nospace">
|
||||
<div class="col-md-12 mt-sm">
|
||||
<textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row nospace">
|
||||
<div class="col-md-12 mt-sm">
|
||||
<div class="layout layout-gap-md align-items-center">
|
||||
<div
|
||||
class="checkbox"
|
||||
on:click="{() => {
|
||||
formData.privacy = !formData.privacy
|
||||
}}"
|
||||
>
|
||||
{#if formData.privacy}
|
||||
<div class="icon">
|
||||
<Icon path="{mdiCheck}" size="2" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div on:click="{() => (formData.privacy = !formData.privacy)}">
|
||||
<a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if requestSucessfully}
|
||||
<div class="mt-sm" transition:fade>
|
||||
<div>
|
||||
<strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
|
||||
</div>
|
||||
<p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="layout justify-content-end mt-sm">
|
||||
<button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
11
src/components/widgets/ContactInformation.svelte
Normal file
11
src/components/widgets/ContactInformation.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { generalInfo } from "../../store"
|
||||
</script>
|
||||
|
||||
<div class="contact-information" id="contact-information">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
24
src/components/widgets/Footer.svelte
Normal file
24
src/components/widgets/Footer.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { generalInfo } from "../../store"
|
||||
|
||||
import Navigation from "./Navigation.svelte"
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<Navigation ident="footer" />
|
||||
</div>
|
||||
</div>
|
||||
{#if $generalInfo?.copyrightText}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="copyright">
|
||||
{$generalInfo?.copyrightText}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</footer>
|
||||
@ -64,13 +64,9 @@
|
||||
{#each galleries || [] as gallery}
|
||||
<div class="gallery gallery-{gallery.variant}">
|
||||
{#each gallery.items || [] as image, index}
|
||||
<div
|
||||
class="gallery-item"
|
||||
on:click="{() => showDetails(gallery, image)}"
|
||||
>
|
||||
<div class="gallery-item" on:click="{() => showDetails(gallery, image)}">
|
||||
<img
|
||||
src="{apiBaseURL}galleries/{gallery.id}/{image.file
|
||||
.src}?filter=s"
|
||||
src="{apiBaseURL}galleries/{gallery.id}/{image.file.src}?filter=s"
|
||||
alt="{image.alt ? image.alt : image.title}"
|
||||
/>
|
||||
{#if gallery.variant === "simple-with-title"}
|
||||
@ -87,11 +83,8 @@
|
||||
<Modal show="{selectedGallery && selectedImage}">
|
||||
<div transition:fade class="gallery-image-details">
|
||||
<img
|
||||
src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
|
||||
.file.src}?filter=l"
|
||||
alt="{selectedImage.alt
|
||||
? selectedImage.alt
|
||||
: selectedImage.title}"
|
||||
src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage.file.src}?filter=l"
|
||||
alt="{selectedImage.alt ? selectedImage.alt : selectedImage.title}"
|
||||
on:click="{closeDetails}"
|
||||
/>
|
||||
<div class="gallery-info">
|
||||
22
src/components/widgets/GoogleMaps.svelte
Normal file
22
src/components/widgets/GoogleMaps.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { generalInfo, ccTags } from "../../store"
|
||||
|
||||
$: iframeTitle =
|
||||
$generalInfo?.person?.salutation +
|
||||
" " +
|
||||
$generalInfo?.person?.firstname +
|
||||
" " +
|
||||
$generalInfo?.person?.lastname +
|
||||
" - " +
|
||||
$generalInfo?.person?.additional
|
||||
</script>
|
||||
|
||||
{#if $ccTags?.includes("googleMaps")}
|
||||
<iframe
|
||||
id="googleMaps"
|
||||
title="{iframeTitle}"
|
||||
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1342.4197187151062!2d10.4164909278422!3d50.56856037791808!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x2a509772539d6c1b!2sDr.%20med.%20Christine%20Wedekind!5e0!3m2!1sde!2sde!4v1652861335963!5m2!1sde!2sde"
|
||||
allowfullscreen
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
{/if}
|
||||
30
src/components/widgets/Header.svelte
Normal file
30
src/components/widgets/Header.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { link } from "svelte-routing"
|
||||
|
||||
import { generalInfo } from "../../store"
|
||||
|
||||
import Navigation from "./Navigation.svelte"
|
||||
import Image from "./Image.svelte"
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="header-content">
|
||||
<a href="/" use:link>
|
||||
<Image
|
||||
file="{$generalInfo?.media?.brand}"
|
||||
alt="{$generalInfo?.meta?.metaTitle}"
|
||||
cssClass="brand"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div class="header-content-right">
|
||||
<Navigation />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
9
src/components/widgets/Image.svelte
Normal file
9
src/components/widgets/Image.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
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}
|
||||
78
src/components/widgets/Navigation.svelte
Normal file
78
src/components/widgets/Navigation.svelte
Normal file
@ -0,0 +1,78 @@
|
||||
<script lang="ts">
|
||||
import * as animateScroll from "svelte-scrollto"
|
||||
import Icon from "mdi-svelte"
|
||||
import { mdiMenu } from "@mdi/js"
|
||||
// import { generalInfo } from "../../store"
|
||||
|
||||
import { links } from "svelte-routing"
|
||||
import { navigations } from "../../store"
|
||||
|
||||
export let ident = "main"
|
||||
|
||||
let navigation: Navigation
|
||||
let showMobileNav: boolean = false
|
||||
|
||||
$: {
|
||||
$navigations?.map((nav) => {
|
||||
if (nav.ident === ident) {
|
||||
navigation = nav
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if navigation}
|
||||
<nav class="{ident}" use:links>
|
||||
{#each navigation?.items || [] as item}
|
||||
{#if item.settings.url.url}
|
||||
<a
|
||||
href="{item.settings.url.url}"
|
||||
target="{item.settings.url.target}"
|
||||
on:click="{() => {
|
||||
animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
|
||||
showMobileNav = false
|
||||
}}"
|
||||
>
|
||||
{item.settings.title}
|
||||
</a>
|
||||
{:else}
|
||||
<a href="{item.settings.page}">
|
||||
{item.settings.title}
|
||||
</a>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
|
||||
{#if ident === "main"}
|
||||
<div class="nav-mobile-toggle" on:click="{() => (showMobileNav = !showMobileNav)}">
|
||||
<Icon path="{mdiMenu}" size="2" />
|
||||
</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">
|
||||
<a
|
||||
href="{item.settings.url.url}"
|
||||
target="{item.settings.url.target}"
|
||||
on:click="{() => {
|
||||
animateScroll.scrollTo({ element: item.settings.url.url, offset: -200 })
|
||||
showMobileNav = false
|
||||
}}"
|
||||
>
|
||||
{item.settings.title}
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="nav-item">
|
||||
<a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}">
|
||||
{item.settings.title}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
{/if}
|
||||
56
src/components/widgets/News.svelte
Normal file
56
src/components/widgets/News.svelte
Normal file
@ -0,0 +1,56 @@
|
||||
<script lang="ts">
|
||||
import { news } from "../../store"
|
||||
|
||||
const getNewsDate = (news) => {
|
||||
const from = news?.from ? new Date(news?.from) : null
|
||||
const until = news?.until ? new Date(news?.until) : null
|
||||
const options = { year: "numeric", month: "2-digit", day: "2-digit" }
|
||||
let d = ""
|
||||
if (from) {
|
||||
// @ts-ignore
|
||||
d += from.toLocaleDateString("de-DE", options)
|
||||
}
|
||||
if (until) {
|
||||
// @ts-ignore
|
||||
d += " bis " + until.toLocaleDateString("de-DE", options)
|
||||
}
|
||||
|
||||
if (news.title) {
|
||||
d += " - "
|
||||
}
|
||||
return d
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $news?.length}
|
||||
<section class="news" id="news">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>Neuigkeiten</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{#each $news as n}
|
||||
{#if n.title || n.from || n.until}
|
||||
<div class="col-md-6">
|
||||
<article>
|
||||
<div class="title">
|
||||
{getNewsDate(n)}
|
||||
{#if n.title}
|
||||
{@html n.title}
|
||||
{/if}
|
||||
</div>
|
||||
{#if n.content}
|
||||
<div class="content">
|
||||
{@html n.content}
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
74
src/components/widgets/PromotionImage.svelte
Normal file
74
src/components/widgets/PromotionImage.svelte
Normal file
@ -0,0 +1,74 @@
|
||||
<svg
|
||||
class="promotion-image-wave-top"
|
||||
width="1920"
|
||||
height="70"
|
||||
viewBox="0 0 1920 70"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="m1920 70-80-12c-80-12-240-36-400-42s-320 6-480 18-320 24-480 18S160 22 80 10L0-2v-108h1920V70z"
|
||||
fill="#fff"></path>
|
||||
</svg>
|
||||
|
||||
<!-- <img src="img/promotion/promotion-image.png" alt="" class="promotion-image" /> -->
|
||||
|
||||
<svg class="promotion-image-wave-bottom" viewBox="0 0 1920 137" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
|
||||
fill="url(#plkj8d2oga)"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
|
||||
fill="url(#iwnto70uxb)"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 30.708 80 24.7c80-6.008 240-18.024 400-6.008 160 12.016 320 48.065 480 42.057 160-6.009 320-54.073 480-60.082 160-6.008 320 30.041 400 48.065l80 18.025V137H0V30.708z"
|
||||
fill="url(#aco1fmuv9c)"></path>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0 121.708 80 108.7c80-6.008 240-48.024 400-36.008 160 12.016 320 48.065 480 42.057 160-6.009 320-94.073 480-100.081 160-6.009 320 30.04 400 48.064l80 18.025V141H0v-19.292z"
|
||||
fill="#fff"></path>
|
||||
<defs>
|
||||
<radialGradient
|
||||
id="plkj8d2oga"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(960 0 0 41.5089 960 95.491)"
|
||||
>
|
||||
<stop stop-color="#FFFEFF"></stop>
|
||||
<stop offset="1" stop-color="#D7FFFE"></stop>
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="iwnto70uxb"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(-652.99956 -34.96514 36.02623 -672.81617 1033.5 102.034)"
|
||||
>
|
||||
<stop stop-color="#BCFFFD"></stop>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
|
||||
</radialGradient>
|
||||
<radialGradient
|
||||
id="aco1fmuv9c"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r="1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="rotate(8.473 63.69 3351.307) scale(825.005 723.955)"
|
||||
>
|
||||
<stop stop-color="#fff"></stop>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
37
src/components/widgets/ScrollTo.svelte
Normal file
37
src/components/widgets/ScrollTo.svelte
Normal file
@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="scroll-to-top">
|
||||
<div class="circle-email">
|
||||
<a
|
||||
href="/#"
|
||||
on:click="{() => {
|
||||
dispatch('scrollTo', {
|
||||
element: 'contact',
|
||||
})
|
||||
}}"
|
||||
>
|
||||
<!-- <img src="img/icon/contact.svg" alt="" /> -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="circle-contact">
|
||||
<a
|
||||
href="/#"
|
||||
on:click="{() => {
|
||||
dispatch('scrollTo', {
|
||||
element: 'recipe',
|
||||
})
|
||||
}}"
|
||||
>
|
||||
<!-- <img src="img/icon/recipe.svg" alt="" /> -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="circle-top">
|
||||
<a href="/#">
|
||||
<!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +1 @@
|
||||
body {
|
||||
background-color: #eee;
|
||||
}
|
||||
@import "theme-2022/main";
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
.p_article {
|
||||
font-size: 14px;
|
||||
border: 1px solid #000;
|
||||
padding: 20px;
|
||||
}
|
||||
59
src/css/theme-2022/components/contact-information.less
Normal file
59
src/css/theme-2022/components/contact-information.less
Normal file
@ -0,0 +1,59 @@
|
||||
.contact-information {
|
||||
margin-top: -120px;
|
||||
min-height: 1060px;
|
||||
background: url("../css/theme-2022/components/img/union.svg") top no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
& > .container {
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.appointmentOfficeHour {
|
||||
@media (max-width: 768px) {
|
||||
font-size: 0.87em;
|
||||
margin-bottom: @space-sm;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.meeting-information {
|
||||
margin-top: @space-xl;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 40px;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
line-height: 30px;
|
||||
padding-left: 0px;
|
||||
font-weight: 400;
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: url("../css/theme-2022/components/img/check-bold.svg");
|
||||
font-weight: 400;
|
||||
top: 1px;
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
padding-bottom: 10rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
}
|
||||
23
src/css/theme-2022/components/footer.less
Normal file
23
src/css/theme-2022/components/footer.less
Normal file
@ -0,0 +1,23 @@
|
||||
footer {
|
||||
min-height: 70px;
|
||||
margin-top: @space-md;
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
margin: @space-md 0;
|
||||
}
|
||||
|
||||
nav.footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: @space-md;
|
||||
|
||||
a {
|
||||
color: @on-background;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
139
src/css/theme-2022/components/forms.less
Normal file
139
src/css/theme-2022/components/forms.less
Normal file
@ -0,0 +1,139 @@
|
||||
form {
|
||||
background: @surface;
|
||||
color: @on-surface;
|
||||
padding: @space-md;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
strong {
|
||||
color: @secondary;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.titles {
|
||||
flex-grow: 1;
|
||||
|
||||
.title,
|
||||
.subTitle {
|
||||
text-align: left;
|
||||
color: @on-surface;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: 100%;
|
||||
|
||||
&.contact {
|
||||
background-color: @secondary-light-green;
|
||||
}
|
||||
&.recipe {
|
||||
background-color: @secondary-light;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
transition: @transition-default;
|
||||
}
|
||||
|
||||
&.collapsed svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
.checkbox {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
background: @surface;
|
||||
color: @on-background;
|
||||
padding: @space-sm @space-md;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
outline: none;
|
||||
|
||||
::placeholder {
|
||||
color: @on-surface;
|
||||
font-weight: 400;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: @on-surface;
|
||||
font-weight: 400;
|
||||
}
|
||||
::-ms-input-placeholder {
|
||||
color: @on-surface;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid @secondary;
|
||||
color: @primary;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding: 0;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: @secondary;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 10px 0 @secondary;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
background: @secondary;
|
||||
color: @on-secondary;
|
||||
padding: @space-xs @space-md;
|
||||
border-radius: 10px;
|
||||
border: 1px solid transparent;
|
||||
transition: @transition-default;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: @on-secondary;
|
||||
background-color: @primary;
|
||||
color: @on-primary;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: @error;
|
||||
color: @on-error;
|
||||
padding: @space-md;
|
||||
}
|
||||
}
|
||||
108
src/css/theme-2022/components/general.less
Executable file
108
src/css/theme-2022/components/general.less
Executable file
@ -0,0 +1,108 @@
|
||||
html,
|
||||
body {
|
||||
background: @background;
|
||||
color: @on-background;
|
||||
font-size: @font-size-default;
|
||||
font-weight: @font-weight-default;
|
||||
line-height: @font-line-height-default;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
padding: @header-height + 60px 0 0 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: @header-height-max-768 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Body Images
|
||||
|
||||
.body-image-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 80rem;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
top: 90rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Lists
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 15px;
|
||||
|
||||
li {
|
||||
line-height: 30px;
|
||||
padding-left: 0;
|
||||
font-weight: 700;
|
||||
|
||||
&:before {
|
||||
content: "\203A";
|
||||
font-weight: 700;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll To Top
|
||||
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
right: 5rem;
|
||||
bottom: 5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
right: 4rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.circle-top,
|
||||
.circle-email,
|
||||
.circle-contact {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100%;
|
||||
background-color: @secondary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.circle-email {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: @secondary-light;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -39px;
|
||||
}
|
||||
|
||||
.circle-contact {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: @secondary-light-green;
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: -53px;
|
||||
}
|
||||
}
|
||||
|
||||
// Promotion
|
||||
|
||||
.promotion-image-wave-top {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.promotion-image-wave-bottom {
|
||||
height: 137px;
|
||||
}
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
@container_width: 1200px;
|
||||
@columns: 12;
|
||||
@main_padding: 15px;
|
||||
@main_padding: 20px;
|
||||
|
||||
// Grid
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
@media (min-width: 992px) {
|
||||
width: 960px;
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
width: 1140px;
|
||||
@media (min-width: 1240px) {
|
||||
width: 1200px;
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
width: 1320px;
|
||||
@ -67,6 +67,10 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .row:not(.nospace) {
|
||||
margin-top: @space-lg;
|
||||
}
|
||||
}
|
||||
|
||||
each(range(@columns), {
|
||||
162
src/css/theme-2022/components/header.less
Executable file
162
src/css/theme-2022/components/header.less
Executable file
@ -0,0 +1,162 @@
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: all 1s ease-in-out;
|
||||
height: @header-height;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
z-index: 9999;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
background-color: @surface;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: @header-height-max-768;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.header-content-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: block;
|
||||
margin: @space-md 0;
|
||||
|
||||
@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;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: @space-md;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > * {
|
||||
text-decoration: none;
|
||||
color: @primary;
|
||||
transition: @transition-default;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: @on-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/css/theme-2022/components/history.less
Normal file
50
src/css/theme-2022/components/history.less
Normal file
@ -0,0 +1,50 @@
|
||||
.history {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
|
||||
.history-item {
|
||||
min-height: 80px;
|
||||
|
||||
.date {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 100%;
|
||||
background-color: @secondary;
|
||||
color: @on-secondary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
top: -21px;
|
||||
left: calc(50% - 40px);
|
||||
}
|
||||
.text {
|
||||
width: 41%;
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
.text {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& ~ .history-item {
|
||||
margin-top: @space-md;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.date {
|
||||
left: 0;
|
||||
}
|
||||
&:nth-child(odd),
|
||||
&:nth-child(even) {
|
||||
.text {
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
9
src/css/theme-2022/components/iframes.less
Normal file
9
src/css/theme-2022/components/iframes.less
Normal file
@ -0,0 +1,9 @@
|
||||
iframe {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
|
||||
&#googleMaps {
|
||||
height: 720px;
|
||||
}
|
||||
}
|
||||
3
src/css/theme-2022/components/img/check-bold.svg
Normal file
3
src/css/theme-2022/components/img/check-bold.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m9 20.92-6.21-6.21 2.83-2.83L9 15.27l9.88-9.89 2.83 2.83L9 20.92z" fill="#72EFDD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
|
Before Width: | Height: | Size: 358 B After Width: | Height: | Size: 358 B |
39
src/css/theme-2022/components/img/top-bg.svg
Normal file
39
src/css/theme-2022/components/img/top-bg.svg
Normal file
@ -0,0 +1,39 @@
|
||||
<svg width="1920" height="1003" viewBox="0 0 1920 1003" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity=".5" clip-rule="evenodd">
|
||||
<path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#s8guwl92ja)"/>
|
||||
<path fill-rule="evenodd" d="M0 631.5s14.5 8.71 80 18.5 240 9.424 400-9.79 320-45.531 480-16.71c160 28.821 320 88.786 480 108s320-88.465 400-136.5l80-72.432V28H0v603.5z" fill="url(#d44dn5xirb)"/>
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#dzvpq96n6c)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#qmmqrfmedd)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#m8la3ielte)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="m0 553.568 80 19.214c80 19.214 240 57.642 400 38.428 160-19.214 320-28.821 480 0s320 36.07 480 55.284 320-76.856 400-124.891l80-48.035V-1H0v554.568z" fill="url(#eyw4yzjlhf)"/>
|
||||
<g opacity=".7" stroke="#72EFDD" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.3 0.3">
|
||||
<path opacity=".7" d="m1135.97 730.546 423.2-439.715M1139.36 766.411l449.79-468.108M1152.96 791.375l462.52-481.691M1172.07 810.457l472.86-492.746M1186.97 834.023l487.67-508.552M1204.48 854.829l501.7-523.534M1221.84 875.77l508.48-530.757M1239.24 896.672l520.62-543.709M1257.19 917l526.69-550.204M1273.01 939.569l530.9-554.668M1290.99 959.877l535.48-559.572M1310.07 978.979l538.63-562.925M1326.14 1001.32l519.61-542.638"/>
|
||||
</g>
|
||||
<defs>
|
||||
<radialGradient id="s8guwl92ja" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 495)">
|
||||
<stop stop-color="#FFFEFF"/>
|
||||
<stop offset="1" stop-color="#D7FFFE"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="d44dn5xirb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 550.678 196.962) scale(675.018 3192.21)">
|
||||
<stop stop-color="#BCFFFD"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="dzvpq96n6c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 203 960 466)">
|
||||
<stop stop-color="#FFFEFF"/>
|
||||
<stop offset="1" stop-color="#D7FFFE"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="qmmqrfmedd" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-165.326 548.81 182.462) scale(675.018 3192.21)">
|
||||
<stop stop-color="#BCFFFD"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="m8la3ielte" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.00191 594.50235 -1703.6414 2338.38377 494.5 132)">
|
||||
<stop stop-color="#fff"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="eyw4yzjlhf" x1="960" y1="-1" x2="960" y2="669" gradientUnits="userSpaceOnUse">
|
||||
<stop offset=".083" stop-color="#fff"/>
|
||||
<stop offset=".333" stop-color="#fff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
19
src/css/theme-2022/components/img/union.svg
Normal file
19
src/css/theme-2022/components/img/union.svg
Normal file
@ -0,0 +1,19 @@
|
||||
<svg viewBox="0 0 1920 1060" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#9fz5hy4h1a)"/>
|
||||
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#e1z5hwatsb)"/>
|
||||
<path d="M80 20.91 0 0v1017.38h80c80 0 240 0 400-6.97 53.333-2.32 106.667-5.42 160-8.52 106.667-6.195 213.333-12.39 320-12.39 160 0 320 13.94 480 27.88l480 41.82V62.728l-80 6.97c-80 6.97-240 20.909-400 13.94-64-2.789-128-8.922-192-15.055-96-9.2-192-18.4-288-16.31-72 1.569-144 9.488-216 17.407-88 9.68-176 19.359-264 17.442C320 83.637 160 41.82 80 20.91z" fill="url(#nign7co5vc)"/>
|
||||
<defs>
|
||||
<radialGradient id="9fz5hy4h1a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(960 0 0 212.392 960 488.607)">
|
||||
<stop stop-color="#FFFEFF"/>
|
||||
<stop offset="1" stop-color="#D7FFFE"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="e1z5hwatsb" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-653.00038 -178.91022 879.8803 -3211.45532 1033.5 522.084)">
|
||||
<stop stop-color="#BCFFFD"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="nign7co5vc" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(816.0031 622.01048 -1805.66361 2368.81393 494.5 139.154)">
|
||||
<stop stop-color="#fff"/>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -1,8 +1,8 @@
|
||||
@space-xs: 0.25rem;
|
||||
@space-sm: 0.5rem;
|
||||
@space-md: 1rem;
|
||||
@space-lg: 2rem;
|
||||
@space-xl: 3rem;
|
||||
@space-xs: 0.6rem;
|
||||
@space-sm: 1rem;
|
||||
@space-md: 1.6rem;
|
||||
@space-lg: 2.5rem;
|
||||
@space-xl: 4rem;
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
19
src/css/theme-2022/components/news.less
Normal file
19
src/css/theme-2022/components/news.less
Normal file
@ -0,0 +1,19 @@
|
||||
.news {
|
||||
article {
|
||||
background: @surface;
|
||||
color: @on-surface;
|
||||
padding: @space-sm @space-md;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: @space-lg;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
margin-bottom: @space-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
src/css/theme-2022/components/promotion-image.less
Normal file
12
src/css/theme-2022/components/promotion-image.less
Normal file
@ -0,0 +1,12 @@
|
||||
.promotion-image-wave-top,
|
||||
.promotion-image-wave-bottom {
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.promotion-image {
|
||||
z-index: 0;
|
||||
margin-top: -56px;
|
||||
margin-bottom: -68px;
|
||||
width: 100%;
|
||||
}
|
||||
7
src/css/theme-2022/components/section.less
Normal file
7
src/css/theme-2022/components/section.less
Normal file
@ -0,0 +1,7 @@
|
||||
section,
|
||||
.section {
|
||||
& ~ section,
|
||||
& ~ .section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
}
|
||||
52
src/css/theme-2022/components/services.less
Normal file
52
src/css/theme-2022/components/services.less
Normal file
@ -0,0 +1,52 @@
|
||||
.services {
|
||||
article {
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: @space-sm;
|
||||
margin-bottom: @space-xs;
|
||||
padding: @space-sm @space-md;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: @surface;
|
||||
color: @on-surface;
|
||||
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
background-color: @secondary-light;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/css/theme-2022/components/specials.less
Normal file
79
src/css/theme-2022/components/specials.less
Normal file
@ -0,0 +1,79 @@
|
||||
.specials {
|
||||
article {
|
||||
background: @surface;
|
||||
color: @on-surface;
|
||||
padding: @space-md;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: @space-lg;
|
||||
font-weight: 700;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: @space-md;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: @space-xs;
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hovered {
|
||||
display: none;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
z-index: 999;
|
||||
box-shadow: inset 0 0 2px 1px white, 0 10px 40px 0 rgba(0, 0, 0, 0.1), 0 10px 40px 0 rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(238, 254, 255, 1) 0%,
|
||||
rgba(255, 254, 255, 1) 35%,
|
||||
rgba(215, 255, 254, 1) 100%
|
||||
),
|
||||
radial-gradient(88.73% 230.98% at 25.76% 13.14%, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
|
||||
radial-gradient(50% 20.05% at 50% 46.13%, #fffeff 0%, #d7fffe 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row:nth-child(2) > *:nth-child(2) > article:first-child {
|
||||
margin-top: @space-xl;
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/css/theme-2022/components/top-section.less
Normal file
50
src/css/theme-2022/components/top-section.less
Normal file
@ -0,0 +1,50 @@
|
||||
.top-section {
|
||||
height: 1003px;
|
||||
margin-bottom: -28rem;
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: @space-xl;
|
||||
|
||||
strong {
|
||||
color: @secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.top-section-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 64rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.circles {
|
||||
position: absolute;
|
||||
top: -151px;
|
||||
left: -97px;
|
||||
min-width: 986px;
|
||||
|
||||
@media (max-width: 1049px) {
|
||||
top: -151px;
|
||||
left: -97px;
|
||||
}
|
||||
}
|
||||
.circles-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 70px;
|
||||
min-width: 550px;
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
min-width: 652px;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
src/css/theme-2022/components/typo.less
Normal file
51
src/css/theme-2022/components/typo.less
Normal file
@ -0,0 +1,51 @@
|
||||
// Headlines
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: @primary;
|
||||
font-weight: 700;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 48px;
|
||||
margin-bottom: @space-md;
|
||||
line-height: @space-xl;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 48px;
|
||||
margin-bottom: @space-md;
|
||||
line-height: @space-xl;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
margin-bottom: @space-sm;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @on-background;
|
||||
}
|
||||
57
src/css/theme-2022/main.less
Normal file
57
src/css/theme-2022/main.less
Normal file
@ -0,0 +1,57 @@
|
||||
// Variables
|
||||
|
||||
@background: #fff;
|
||||
@on-background: #575756;
|
||||
|
||||
@primary: #2d8e91;
|
||||
@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;
|
||||
|
||||
@surface: #fff;
|
||||
@on-surface: #575756;
|
||||
|
||||
@error: #fff0e9;
|
||||
@on-error: #eb5757;
|
||||
|
||||
@font-size-default: 16px;
|
||||
@font-weight-default: 400;
|
||||
@font-line-height-default: 1.6;
|
||||
|
||||
@radius-default: 50px;
|
||||
|
||||
@transition-default: all 0.2s ease-in-out;
|
||||
|
||||
// Header
|
||||
|
||||
@header-height: 140px;
|
||||
@header-height-max-768: 100px;
|
||||
|
||||
// CSS Definitions
|
||||
|
||||
@import "fonts";
|
||||
@import "reset";
|
||||
|
||||
@import "components/general";
|
||||
@import "components/grid";
|
||||
@import "components/typo";
|
||||
@import "components/layout";
|
||||
@import "components/section";
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
@import "components/news";
|
||||
@import "components/services";
|
||||
@import "components/specials";
|
||||
@import "components/iframes";
|
||||
@import "components/contact-information";
|
||||
@import "components/promotion-image";
|
||||
@import "components/history";
|
||||
@import "components/top-section";
|
||||
@import "components/forms";
|
||||
|
||||
@import "components/cc-bar";
|
||||
@ -1,8 +0,0 @@
|
||||
.appointment {
|
||||
background: @secondary;
|
||||
color: @on-secondary;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
padding: @space-xs @space-sm;
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
footer {
|
||||
padding: 20px 0;
|
||||
color: @secondary;
|
||||
|
||||
a {
|
||||
color: @secondary;
|
||||
}
|
||||
|
||||
.wave {
|
||||
height: 54px;
|
||||
background-repeat: repeat-x;
|
||||
background-image: url("../css/theme/components/img/wave_footer_top.png");
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
form {
|
||||
input,
|
||||
textarea {
|
||||
border: 1px solid @secondary;
|
||||
background: #fff;
|
||||
color: @on-background;
|
||||
padding: @space-md;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: @space-sm;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&[readonly] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: @primary;
|
||||
color: @on-primary;
|
||||
padding: @space-md @space-lg;
|
||||
border: 1px solid @primary;
|
||||
border-radius: @space-sm;
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.error {
|
||||
background: @error;
|
||||
color: @on-error;
|
||||
padding: @space-md;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
background: @background;
|
||||
color: @on-background;
|
||||
font-size: @font-size-default;
|
||||
font-weight: @font-weight-default;
|
||||
font-family: "Nunito", sans-serif;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
&.rounded {
|
||||
border-radius: @radius-half;
|
||||
}
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
header {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
.brand {
|
||||
margin-top: -@space-md;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: block;
|
||||
height: 100px;
|
||||
margin: @space-md 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: block;
|
||||
height: 60px;
|
||||
margin: @space-md 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.service-bar {
|
||||
background-color: @primary;
|
||||
color: @on-primary;
|
||||
border-bottom-left-radius: @radius-default;
|
||||
border-bottom-right-radius: @radius-default;
|
||||
height: 29px;
|
||||
line-height: 29px;
|
||||
padding: 0 20px;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
ul {
|
||||
padding: 0 20px;
|
||||
margin-top: 50px;
|
||||
list-style: none;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
li {
|
||||
a {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @primary;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.scroll {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
padding-bottom: @space-lg;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.top-article {
|
||||
.wave-bottom {
|
||||
height: 200px;
|
||||
margin-top: -33px;
|
||||
background-image: url("../css/theme/components/img/wave_header_bottom.png");
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
& > .articles {
|
||||
z-index: 1;
|
||||
margin-right: 120px;
|
||||
margin-left: 120px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
gap: @space-lg;
|
||||
margin-top: -80px;
|
||||
margin-bottom: -120px;
|
||||
|
||||
article {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
flex-direction: column;
|
||||
margin-right: @space-xl;
|
||||
margin-left: @space-xl;
|
||||
|
||||
article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*[class^="col"] {
|
||||
margin-top: @space-md;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@ -1,46 +0,0 @@
|
||||
a {
|
||||
color: @on-background;
|
||||
text-decoration: none;
|
||||
transition: @transition-default;
|
||||
|
||||
&:hover {
|
||||
color: @primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: @primary;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
color: @primary;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
// Variables
|
||||
|
||||
@background: #f1ebe4;
|
||||
@on-background: #352a1c;
|
||||
|
||||
@primary: #c4253e;
|
||||
@on-primary: #fff;
|
||||
|
||||
@secondary: #bda082;
|
||||
@on-secondary: #fff;
|
||||
|
||||
@surface: #fff;
|
||||
@on-surface: #352a1c;
|
||||
|
||||
@error: @primary;
|
||||
@on-error: #fff;
|
||||
|
||||
@font-size-default: 14px;
|
||||
@font-weight-default: 400;
|
||||
|
||||
@radius-default: 25px;
|
||||
@radius-half: 12px;
|
||||
|
||||
@transition-default: all 0.2s ease-in-out;
|
||||
|
||||
// CSS Definitions
|
||||
|
||||
@import "fonts";
|
||||
@import "reset";
|
||||
|
||||
@import "components/general";
|
||||
@import "components/typo";
|
||||
@import "components/layout";
|
||||
@import "components/grid";
|
||||
@import "components/content";
|
||||
@import "components/sidebar";
|
||||
@import "components/article";
|
||||
@import "components/event";
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
@import "components/carousel";
|
||||
@import "components/navigation";
|
||||
@import "components/appointment";
|
||||
@import "components/cc-bar";
|
||||
@import "components/audio";
|
||||
@import "components/forms";
|
||||
31
src/store.ts
31
src/store.ts
@ -1,5 +1,5 @@
|
||||
import { writable, get } from "svelte/store"
|
||||
import { getGeneralInformation, getArticles } from "./api"
|
||||
import { getGeneralInformation, getArticles, getNavigations } from "./api"
|
||||
|
||||
const initLoc = {
|
||||
path: (typeof window !== "undefined" && window.location?.pathname) || "/",
|
||||
@ -10,25 +10,40 @@ const initLoc = {
|
||||
|
||||
export const location = writable(initLoc)
|
||||
|
||||
const locale = {
|
||||
key: "de",
|
||||
title: "Deutsch",
|
||||
}
|
||||
export const currentLocale = writable(locale)
|
||||
|
||||
// General Information
|
||||
|
||||
export const generalInformation = writable<GeneralInformation>()
|
||||
export const generalInfo = writable<GeneralInfo>()
|
||||
const getGeneralProjectInformation = async () => {
|
||||
const infos = await getGeneralInformation()
|
||||
if (infos && infos.length) {
|
||||
generalInformation.set(infos[0])
|
||||
generalInfo.set(infos[0])
|
||||
}
|
||||
}
|
||||
getGeneralProjectInformation()
|
||||
|
||||
// Articles
|
||||
|
||||
export const articles = writable<TibiArticle[]>()
|
||||
const getAllArticles = async () => {
|
||||
const list = await getArticles()
|
||||
articles.set(list)
|
||||
// export const articles = writable<TibiArticle[]>()
|
||||
// const getAllArticles = async () => {
|
||||
// const list = await getArticles()
|
||||
// articles.set(list)
|
||||
// }
|
||||
// getAllArticles()
|
||||
|
||||
// Navigations
|
||||
|
||||
export const navigations = writable<Navigation[]>([])
|
||||
const getAllNavigations = async (locale: Locale) => {
|
||||
const list = await getNavigations(locale)
|
||||
navigations.set(list)
|
||||
}
|
||||
getAllArticles()
|
||||
getAllNavigations(locale)
|
||||
|
||||
// Cookies - Webmakers Cookie Bar
|
||||
|
||||
|
||||
104
types/global.d.ts
vendored
104
types/global.d.ts
vendored
@ -1,3 +1,12 @@
|
||||
interface APIParams {
|
||||
offset?: number
|
||||
limit?: number
|
||||
sort?: string | "ASC" | "DESC"
|
||||
filter?: {
|
||||
[key: string]: any
|
||||
}
|
||||
count?: 1
|
||||
}
|
||||
interface ContentBlock {
|
||||
layout: 1 | 2 | 3 | 4
|
||||
title?: string
|
||||
@ -10,31 +19,46 @@ interface ContentBlock {
|
||||
|
||||
interface Content {
|
||||
id: string
|
||||
name: string
|
||||
path: string
|
||||
blocks: ContentBlock[]
|
||||
}
|
||||
|
||||
interface GeneralInformation {
|
||||
interface GeneralInfo {
|
||||
id: string
|
||||
active: boolean
|
||||
firstname: string
|
||||
lastname: string
|
||||
street: string
|
||||
postcode: number
|
||||
city: string
|
||||
tel: string
|
||||
mobile: string
|
||||
email: string
|
||||
images: GeneralImage[]
|
||||
public: boolean
|
||||
meta: {
|
||||
metaTitle: string
|
||||
metaDescription: string
|
||||
metaTagRobots: string
|
||||
metaKeywords: string
|
||||
}
|
||||
person: {
|
||||
salutation: string
|
||||
firstname: string
|
||||
lastname: string
|
||||
additional: string
|
||||
street: string
|
||||
postcode: number
|
||||
city: string
|
||||
tel: string
|
||||
fax: string
|
||||
mobile: string
|
||||
email: string
|
||||
}
|
||||
media: {
|
||||
favicon: File
|
||||
brand: File
|
||||
mediaFiles: {
|
||||
title: string
|
||||
alternateText: string
|
||||
id: string
|
||||
file: File
|
||||
}[]
|
||||
}
|
||||
copyrightText: string
|
||||
insertTime: string
|
||||
updateTime: string
|
||||
lastPageUpdate: string
|
||||
}
|
||||
|
||||
interface GeneralImage {
|
||||
file: File[]
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
interface TibiArticle {
|
||||
@ -57,3 +81,47 @@ interface File {
|
||||
src: string
|
||||
type: string
|
||||
}
|
||||
|
||||
interface Gallery {
|
||||
id: string
|
||||
title: string
|
||||
variant: string
|
||||
items: {
|
||||
file: File
|
||||
title: string
|
||||
descrition: string
|
||||
alt: string
|
||||
}[]
|
||||
}
|
||||
|
||||
interface Navigation {
|
||||
id: string
|
||||
ident: string
|
||||
locale: string
|
||||
items: NavigationItem[]
|
||||
insertTime: string
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
interface NavigationItem {
|
||||
settings: {
|
||||
title: string
|
||||
page: string
|
||||
items: NavigationItem[]
|
||||
url: {
|
||||
url: string
|
||||
target: string
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
interface Locale {
|
||||
key: string
|
||||
title: string
|
||||
}
|
||||
|
||||
interface GeneralImage {
|
||||
file: File[]
|
||||
id: string
|
||||
label: string
|
||||
}
|
||||
|
||||
16
yarn.lock
16
yarn.lock
@ -2621,6 +2621,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@mdi/js@npm:^6.7.96":
|
||||
version: 6.7.96
|
||||
resolution: "@mdi/js@npm:6.7.96"
|
||||
checksum: 8c8f6acb8fd3f856a92ffe2405e258ee5aa84cf541fda1c0a564c9c8bbf935cf2b6a6100cf97d41e9ada1ccb59e4b138d4c712e075f759d7595e21ef1cff84b5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3":
|
||||
version: 2.1.8-no-fsevents.3
|
||||
resolution: "@nicolo-ribaudo/chokidar-2@npm:2.1.8-no-fsevents.3"
|
||||
@ -7650,6 +7657,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"mdi-svelte@npm:^1.1.2":
|
||||
version: 1.1.2
|
||||
resolution: "mdi-svelte@npm:1.1.2"
|
||||
checksum: ee86a87e31cd8f7f376e79f5ea40cb9382ff79a2aa57540133d3da96ad8b876258ab30fee27645cc9e3220e53de0d087c65278cc453d09455c3eb03fb79a4a8b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"memory-pager@npm:^1.0.2":
|
||||
version: 1.5.0
|
||||
resolution: "memory-pager@npm:1.5.0"
|
||||
@ -10324,6 +10338,7 @@ send@latest:
|
||||
"@babel/plugin-transform-spread": ^7.16.7
|
||||
"@babel/preset-env": ^7.16.11
|
||||
"@cypress/code-coverage": ^3.9.12
|
||||
"@mdi/js": ^6.7.96
|
||||
"@sentry/browser": ^6.19.6
|
||||
"@sentry/tracing": ^6.19.6
|
||||
"@tsconfig/svelte": ^3.0.0
|
||||
@ -10341,6 +10356,7 @@ send@latest:
|
||||
http-proxy-middleware: ^2.0.6
|
||||
less: ^4.1.2
|
||||
live-server: ^1.2.1
|
||||
mdi-svelte: ^1.1.2
|
||||
mongodb: ^4.5.0
|
||||
morgan: ^1.10.0
|
||||
postcss: ^8.4.12
|
||||
|
||||
Loading…
Reference in New Issue
Block a user