zwischenstand
This commit is contained in:
@@ -10,18 +10,18 @@
|
||||
{#if activated}
|
||||
<section
|
||||
id="crinkled-section"
|
||||
class="{brightBackground ? 'bright' : 'dark'}"
|
||||
class={brightBackground ? 'bright' : 'dark'}
|
||||
>
|
||||
<div class="upper-row">
|
||||
<div
|
||||
class="bar"
|
||||
class:border="{border}"
|
||||
class:border={border}
|
||||
></div>
|
||||
<TopRightCrinkle
|
||||
edges="{border}"
|
||||
brightColor="{!brightBackground}"
|
||||
icon="{icon}"
|
||||
bigVersion="{bigVersion}"
|
||||
edges={border}
|
||||
brightColor={!brightBackground}
|
||||
icon={icon}
|
||||
bigVersion={bigVersion}
|
||||
/>
|
||||
</div>
|
||||
<slot />
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</script>
|
||||
|
||||
<CrinkledSection>
|
||||
<footer class="{'footer ' + className}">
|
||||
<footer class={'footer ' + className}>
|
||||
<section id="content-section">
|
||||
<section id="content-link-section">
|
||||
{#each sections as section}
|
||||
@@ -55,7 +55,7 @@
|
||||
<a
|
||||
class="footer-nav-point"
|
||||
use:spaLink
|
||||
href="{link.page}"><small>{link.name}</small></a
|
||||
href={link.page}><small>{link.name}</small></a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -69,11 +69,11 @@
|
||||
<section id="newsletter-section">
|
||||
<h4>Newsletter</h4>
|
||||
<form
|
||||
on:submit|preventDefault|stopPropagation="{() => {
|
||||
on:submit|preventDefault|stopPropagation={() => {
|
||||
submitNewsletter(email, dataProt).then(() => {
|
||||
emailIsSubscribed = true
|
||||
})
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{#if emailIsSubscribed}
|
||||
<p>Du hast dich zum Newsletter angemeldet!</p>
|
||||
@@ -81,16 +81,16 @@
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="E-Mail"
|
||||
bind:value="{email}"
|
||||
bind:value={email}
|
||||
id="email"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
<div class="data-protection">
|
||||
<Input
|
||||
type="checkbox"
|
||||
bind:value="{dataProt}"
|
||||
bind:value={dataProt}
|
||||
id="dataprot"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
<p>
|
||||
<a
|
||||
@@ -123,14 +123,14 @@
|
||||
{#each Object.keys(socialIcons) as icon}
|
||||
<li>
|
||||
<a
|
||||
href="{socialIcons[icon]}"
|
||||
href={socialIcons[icon]}
|
||||
use:spaLink
|
||||
target="_blank"
|
||||
aria-label="{icon}"
|
||||
aria-label={icon}
|
||||
>
|
||||
<figure class="footer-icon">
|
||||
<img
|
||||
alt="{icon}"
|
||||
alt={icon}
|
||||
src="../../../media/{icon}.svg"
|
||||
/>
|
||||
</figure></a
|
||||
@@ -149,7 +149,7 @@
|
||||
<a
|
||||
class="footer-nav-point-bottom"
|
||||
use:spaLink
|
||||
href="{link.page}"><small>{link.name}</small></a
|
||||
href={link.page}><small>{link.name}</small></a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
</script>
|
||||
|
||||
{#each Object.entries(renderQueryObject) as queryObject}
|
||||
<MediaQuery query="{queryObject[0]}">
|
||||
<MediaQuery query={queryObject[0]}>
|
||||
<svelte:component
|
||||
this="{queryObject[1][0]}"
|
||||
this={queryObject[1][0]}
|
||||
{...queryObject[1][1]}
|
||||
/>
|
||||
</MediaQuery>
|
||||
|
||||
@@ -49,10 +49,10 @@
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<dialog
|
||||
class="modal {size ? 'modal-' + size : ''} {cssClass}"
|
||||
bind:this="{dialog}"
|
||||
on:cancel="{onCancel}"
|
||||
on:click|stopPropagation="{onDialogClick}"
|
||||
class="modal {size ? 'modal-' + size : ''} {cssClass}
|
||||
bind:this={dialog}
|
||||
on:cancel={onCancel}
|
||||
on:click|stopPropagation={onDialogClick}
|
||||
on:keypress
|
||||
data-cy="modal"
|
||||
>
|
||||
@@ -78,14 +78,14 @@
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="modal-close"
|
||||
on:click|stopPropagation|preventDefault="{() => {
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
dispatch('close')
|
||||
}}"
|
||||
}}
|
||||
on:keydown
|
||||
>
|
||||
<Icon
|
||||
path="{mdiCloseCircleOutline}"
|
||||
size="{$isMobile ? 24 : 32}px"
|
||||
path={mdiCloseCircleOutline}
|
||||
size={$isMobile ? 24 : 32}px"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
@@ -104,7 +104,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Notifications force="{true}" />
|
||||
<Notifications force={true} />
|
||||
</dialog>
|
||||
|
||||
<style
|
||||
|
||||
@@ -47,21 +47,21 @@
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div
|
||||
class:visible="{$overlays.length}"
|
||||
class:visible={$overlays.length}
|
||||
class="sidebarOverlay"
|
||||
id="overlay"
|
||||
role="dialog"
|
||||
aria-labelledby="overlayTitle"
|
||||
aria-label="Overlay"
|
||||
aria-modal="true"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
closeModal(0)
|
||||
}}"
|
||||
on:keydown="{(event) => {
|
||||
}}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
closeModal(0)
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<section class="dark-side"></section>
|
||||
|
||||
@@ -73,33 +73,33 @@
|
||||
{#each $overlays as overlay, i}
|
||||
<li
|
||||
class="content-block"
|
||||
class:active="{overlay.active}"
|
||||
class:dark="{(i + 1) % 2 == 0}"
|
||||
class:hideTillDispatch="{overlay.hideTillDispatch}"
|
||||
class:hideIt="{!dispatched[i]}"
|
||||
class:active={overlay.active}
|
||||
class:dark={(i + 1) % 2 == 0}
|
||||
class:hideTillDispatch={overlay.hideTillDispatch}
|
||||
class:hideIt={!dispatched[i]}
|
||||
>
|
||||
<header
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
$overlays = $overlays.map((o, index) => {
|
||||
o.active = index === i
|
||||
return o
|
||||
})
|
||||
}}"
|
||||
on:keydown="{(event) => {
|
||||
}}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
$overlays = $overlays.map((o, index) => {
|
||||
o.active = index === i
|
||||
return o
|
||||
})
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
class="upper-bar"
|
||||
class:noBg="{i === $overlays.length - 1 ||
|
||||
$overlays.filter((o) => o.hideTillDispatch).length > dispatched.filter(Boolean).length}"
|
||||
class:noBg={i === $overlays.length - 1 ||
|
||||
$overlays.filter((o) => o.hideTillDispatch).length > dispatched.filter(Boolean).length}
|
||||
>
|
||||
<div class="crinkle desktop-crinkle">
|
||||
<img
|
||||
@@ -118,18 +118,18 @@
|
||||
{overlay.title}
|
||||
</h2>
|
||||
{:else}
|
||||
<svelte:component this="{overlay.title}" />
|
||||
<svelte:component this={overlay.title} />
|
||||
{/if}
|
||||
<div class="close">
|
||||
<button
|
||||
aria-label="Close"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
closeModal(i)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
path="{mdiCloseCircleOutline}"
|
||||
size="{$isMobile ? '24px' : '32px'}"
|
||||
path={mdiCloseCircleOutline}
|
||||
size={$isMobile ? '24px' : '32px'}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
@@ -139,20 +139,20 @@
|
||||
</header>
|
||||
<div
|
||||
class="scroll-container"
|
||||
class:active="{overlay.active}"
|
||||
class:active={overlay.active}
|
||||
data-simplebar
|
||||
>
|
||||
<div class="content-listing">
|
||||
{#key overlay.reload}
|
||||
<svelte:component
|
||||
this="{overlay.content}"
|
||||
on:showOverlay="{(e) => {
|
||||
this={overlay.content}
|
||||
on:showOverlay={(e) => {
|
||||
dispatched[i] = true
|
||||
}}"
|
||||
on:removeOverlay="{() => {
|
||||
}}
|
||||
on:removeOverlay={() => {
|
||||
closeModal(i)
|
||||
}}"
|
||||
darkBg="{(i + 1) % 2 == 0}"
|
||||
}}
|
||||
darkBg={(i + 1) % 2 == 0}
|
||||
{...overlay.properties}
|
||||
/>
|
||||
{/key}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
lang="ts"
|
||||
>
|
||||
import { enableScrolling, stopScrolling } from "../../functions/utils"
|
||||
let scrollPosition = { top: 0, left: 0 }
|
||||
let scrollPosition ={ top: 0, left: 0 }
|
||||
let whiteHeader = false
|
||||
export function changeStateOfSite(menuOn: boolean) {
|
||||
if (typeof window !== "undefined") {
|
||||
@@ -83,19 +83,19 @@
|
||||
|
||||
<nav
|
||||
class="menu"
|
||||
class:scrolled="{scrolled || whiteHeader}"
|
||||
class:not-scrolled="{!scrolled && !whiteHeader}"
|
||||
class:active="{activeSubmenu !== -1}"
|
||||
on:mouseover="{() => (isHoveringMenu = true)}"
|
||||
on:focus="{() => (isHoveringMenu = true)}"
|
||||
on:mouseleave="{() => (isHoveringMenu = false)}"
|
||||
class:scrolled={scrolled || whiteHeader}
|
||||
class:not-scrolled={!scrolled && !whiteHeader}
|
||||
class:active={activeSubmenu !== -1}
|
||||
on:mouseover={() => (isHoveringMenu = true)}
|
||||
on:focus={() => (isHoveringMenu = true)}
|
||||
on:mouseleave={() => (isHoveringMenu = false)}
|
||||
>
|
||||
<button
|
||||
aria-label="Open menu"
|
||||
id="burger-menu"
|
||||
class="mobile-burger"
|
||||
on:click="{() => {
|
||||
const overlay = {
|
||||
on:click={() => {
|
||||
const overlay ={
|
||||
id: 'mobile-menu',
|
||||
title: 'Menu',
|
||||
active: true,
|
||||
@@ -107,19 +107,19 @@
|
||||
},
|
||||
}
|
||||
$overlays = [overlay]
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
path="{mdiMenu}"
|
||||
path={mdiMenu}
|
||||
size="24px"
|
||||
color="{'#F3EED9'}"
|
||||
color={'#F3EED9'}
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
use:spaLink
|
||||
class="logo-container"
|
||||
on:click="{closeSubmenu}"
|
||||
on:click={closeSubmenu}
|
||||
aria-label="Go to homepage"
|
||||
>
|
||||
<img
|
||||
@@ -131,10 +131,10 @@
|
||||
{#each elements as page, i (i)}
|
||||
<li
|
||||
class="menu-item"
|
||||
class:active="{i == activeSubmenu}"
|
||||
on:mouseenter|stopPropagation="{() => openMenu(i, page)}"
|
||||
on:focus|stopPropagation="{() => openMenu(i, page)}"
|
||||
on:mouseleave|stopPropagation="{(e) => clearTimeout(hoverTimeout)}"
|
||||
class:active={i == activeSubmenu}
|
||||
on:mouseenter|stopPropagation={() => openMenu(i, page)}
|
||||
on:focus|stopPropagation={() => openMenu(i, page)}
|
||||
on:mouseleave|stopPropagation={(e) => clearTimeout(hoverTimeout)}
|
||||
>
|
||||
<div class="bar">
|
||||
<span></span>
|
||||
@@ -144,20 +144,20 @@
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
aria-label="{page.name}"
|
||||
href="{page.page}"
|
||||
aria-label={page.name}
|
||||
href={page.page}
|
||||
style="display: flex; flex-direction: column; align-items: center"
|
||||
use:spaLink
|
||||
on:mousedown="{closeSubmenu}"
|
||||
on:mousedown={closeSubmenu}
|
||||
><div style="padding: 0px; line-height: 100%;">{page.name}</div>
|
||||
{#if page.elements?.length}
|
||||
<Icon
|
||||
path="{icons.chevronDown}"
|
||||
color="{'#F3EED9'}"
|
||||
props="{{
|
||||
path={icons.chevronDown}
|
||||
color={'#F3EED9'}
|
||||
props={{
|
||||
'fill-rule': 'evenodd',
|
||||
'clip-rule': 'evenodd',
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</a>
|
||||
@@ -168,12 +168,12 @@
|
||||
<ul class="icons-container">
|
||||
<li class="menu-item">
|
||||
<button
|
||||
on:click="{showFavoriteOverlay}"
|
||||
on:click={showFavoriteOverlay}
|
||||
aria-label="Open favorites"
|
||||
><Icon
|
||||
color="{'#F3EED9'}"
|
||||
color={'#F3EED9'}
|
||||
size="24px"
|
||||
path="{mdiHeartOutline}"
|
||||
path={mdiHeartOutline}
|
||||
/></button
|
||||
>
|
||||
</li>
|
||||
@@ -185,10 +185,10 @@
|
||||
<section
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
on:mouseleave="{() => !isHoveringMenu && closeSubmenuWithTimeout()}"
|
||||
on:mouseleave={() => !isHoveringMenu && closeSubmenuWithTimeout()}
|
||||
on:focus|stopPropagation
|
||||
class="submenu-container"
|
||||
id="{`submenu-${i}`}"
|
||||
id={`submenu-${i}`}
|
||||
style="top: 86px"
|
||||
>
|
||||
<ul class="sub-menu-columns">
|
||||
@@ -196,10 +196,10 @@
|
||||
<li class="column">
|
||||
<a
|
||||
use:spaLink
|
||||
href="{submenu_title.page}"
|
||||
href={submenu_title.page}
|
||||
class="submenu-title"
|
||||
class:bold="{submenu_title?.elements?.length}"
|
||||
on:click="{closeSubmenu}">{submenu_title?.name}</a
|
||||
class:bold={submenu_title?.elements?.length}
|
||||
on:click={closeSubmenu}>{submenu_title?.name}</a
|
||||
>
|
||||
{#if submenu_title?.elements?.length}
|
||||
<ul class="sub-menu-rows">
|
||||
@@ -207,9 +207,9 @@
|
||||
<li>
|
||||
<a
|
||||
use:spaLink
|
||||
href="{submenu_point.page}"
|
||||
href={submenu_point.page}
|
||||
class="submenu-endpoint"
|
||||
on:click="{closeSubmenu}">{submenu_point?.name}</a
|
||||
on:click={closeSubmenu}>{submenu_point?.name}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -224,10 +224,10 @@
|
||||
<li>
|
||||
<a
|
||||
use:spaLink
|
||||
href="{submenu_title.page}"
|
||||
href={submenu_title.page}
|
||||
class="submenu-title"
|
||||
class:bold="{submenu_title?.elements?.length}"
|
||||
on:click="{closeSubmenu}">{submenu_title?.name}</a
|
||||
class:bold={submenu_title?.elements?.length}
|
||||
on:click={closeSubmenu}>{submenu_title?.name}</a
|
||||
>
|
||||
{#if submenu_title?.elements?.length}
|
||||
<ul class="sub-menu-rows">
|
||||
@@ -235,9 +235,9 @@
|
||||
<li>
|
||||
<a
|
||||
use:spaLink
|
||||
href="{submenu_point.page}"
|
||||
href={submenu_point.page}
|
||||
class="submenu-endpoint"
|
||||
on:click="{closeSubmenu}">{submenu_point?.name}</a
|
||||
on:click={closeSubmenu}>{submenu_point?.name}</a
|
||||
>
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
let navigationElements: NavigationElement[] = [],
|
||||
navOpen = false,
|
||||
subNavOpen: { [key: number]: boolean } = {},
|
||||
subNavOpen: { [key: number]: boolean } ={},
|
||||
windowWidth: number
|
||||
|
||||
function elementsToCache(elements: NavigationElement[]) {
|
||||
@@ -30,7 +30,7 @@
|
||||
navigationElements = navigationElements
|
||||
})
|
||||
|
||||
$: if (!navOpen) subNavOpen = {}
|
||||
$: if (!navOpen) subNavOpen ={}
|
||||
$: if ($location) navOpen = false
|
||||
|
||||
let scrolled: boolean = false,
|
||||
@@ -61,15 +61,15 @@
|
||||
$: darkBG = isHomepage ? (scrolled ? true : activeSubmenu >= 0 || $overlays?.length) : false
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth="{windowWidth}" />
|
||||
<svelte:window bind:innerWidth={windowWidth} />
|
||||
|
||||
<Banner bind:isVisible="{bannerVisible}" />
|
||||
<Banner bind:isVisible={bannerVisible} />
|
||||
<header
|
||||
class="headercontainer"
|
||||
id="{'header-container'}"
|
||||
class:scrolled="{darkBG}"
|
||||
class:homepageHeader="{isHomepage}"
|
||||
class:bannerVisible="{bannerVisible}"
|
||||
id={'header-container'}
|
||||
class:scrolled={darkBG}
|
||||
class:homepageHeader={isHomepage}
|
||||
class:bannerVisible={bannerVisible}
|
||||
role="dialog"
|
||||
aria-label="Hauptnavigation"
|
||||
on:focus
|
||||
@@ -77,10 +77,10 @@
|
||||
<div class="padding">
|
||||
{#key [bannerVisible]}
|
||||
<DesktopHeader
|
||||
bind:activeSubmenu="{activeSubmenu}"
|
||||
elements="{navigationElements}"
|
||||
bannerVisible="{bannerVisible}"
|
||||
scrolled="{darkBG}"
|
||||
bind:activeSubmenu={activeSubmenu}
|
||||
elements={navigationElements}
|
||||
bannerVisible={bannerVisible}
|
||||
scrolled={darkBG}
|
||||
/>
|
||||
{/key}
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
return overlay
|
||||
})
|
||||
overlays.splice(openedAtLvl + 1, overlays.length - openedAtLvl - 1)
|
||||
const subMenuOverlay: Overlay = {
|
||||
const subMenuOverlay: Overlay ={
|
||||
id: element.name,
|
||||
title: element.name,
|
||||
active: true,
|
||||
@@ -49,10 +49,10 @@
|
||||
<li>
|
||||
<button
|
||||
class="cta"
|
||||
class:active="{selectedCategory.name === mainCategory.name}"
|
||||
on:click="{() => {
|
||||
class:active={selectedCategory.name === mainCategory.name}
|
||||
on:click={() => {
|
||||
selectedCategory = mainCategory
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{mainCategory.name}
|
||||
</button>
|
||||
@@ -65,12 +65,12 @@
|
||||
<li>
|
||||
<button
|
||||
class="cta"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
openSubmodule(subCategory)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<p>{subCategory.name}</p>
|
||||
<Icon path="{mdiChevronRight}" />
|
||||
<Icon path={mdiChevronRight} />
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -85,10 +85,10 @@
|
||||
<li>
|
||||
<button
|
||||
class="cta"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
if (contentCategory.elements?.length) openSubmodule(contentCategory)
|
||||
else spaNavigate(contentCategory.page)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<p>{contentCategory.name}</p>
|
||||
</button>
|
||||
@@ -118,14 +118,14 @@
|
||||
{#each Object.keys(socialIcons) as icon}
|
||||
<li>
|
||||
<a
|
||||
href="{socialIcons[icon]}"
|
||||
href={socialIcons[icon]}
|
||||
use:spaLink
|
||||
target="_blank"
|
||||
aria-label="{icon}"
|
||||
aria-label={icon}
|
||||
>
|
||||
<figure class="footer-icon">
|
||||
<img
|
||||
alt="{icon}"
|
||||
alt={icon}
|
||||
src="../../../media/{icon}.svg"
|
||||
/>
|
||||
</figure></a
|
||||
|
||||
@@ -9,23 +9,23 @@
|
||||
|
||||
<ul
|
||||
class="subCategory"
|
||||
class:darkBg="{darkBg}"
|
||||
class:darkBg={darkBg}
|
||||
>
|
||||
{#each element.elements as subCategory}
|
||||
<li>
|
||||
<button
|
||||
class="cta"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
if (subCategory.elements?.length) openSubmodule(subCategory)
|
||||
else {
|
||||
$overlays = []
|
||||
spaNavigate(subCategory.page)
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<p>{subCategory.name}</p>
|
||||
{#if subCategory.elements?.length}
|
||||
<Icon path="{mdiChevronRight}" />
|
||||
<Icon path={mdiChevronRight} />
|
||||
{/if}
|
||||
</button>
|
||||
</li>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
<ol>
|
||||
{#each paths as path}
|
||||
{#if $navigationCache[path]}
|
||||
<li><a use:spaLink href="{path}">{$navigationCache[path].name}</a></li>
|
||||
<li><a use:spaLink href={path}>{$navigationCache[path].name}</a></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ol>
|
||||
|
||||
@@ -30,29 +30,29 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<CrinkledSection activated="{block.crinkledSection || false}">
|
||||
<CrinkledSection activated={block.crinkledSection || false}>
|
||||
{#if block.anchorId}
|
||||
<!-- position 100px above -->
|
||||
<div style="position:relative;">
|
||||
<div
|
||||
bind:this="{scrollTargetContainer}"
|
||||
bind:this={scrollTargetContainer}
|
||||
style="position: absolute; top: -100px"
|
||||
></div>
|
||||
</div>
|
||||
{/if}
|
||||
<section
|
||||
class:additionalHeightAtBottom="{block.additionalHeightBottom}"
|
||||
class:headerHeightUp="{block?.background?.headerHeightUp}"
|
||||
data-type="{block.type}"
|
||||
class:additionalHeightAtBottom={block.additionalHeightBottom}
|
||||
class:headerHeightUp={block?.background?.headerHeightUp}
|
||||
data-type={block.type}
|
||||
class="content-section minheight-{block?.background?.minHeight} {blockComponent.sectionClass} {block.background
|
||||
?.color
|
||||
? block?.background?.color + '-bg'
|
||||
: ''}"
|
||||
: ''}
|
||||
>
|
||||
{#if block.background?.image}
|
||||
<div class="background-image">
|
||||
<figure>
|
||||
<MedialibImage id="{block?.background?.image}" />
|
||||
<MedialibImage id={block?.background?.image} />
|
||||
{#if block?.background?.overlay}
|
||||
<div class="overlay"></div>
|
||||
{/if}
|
||||
@@ -61,28 +61,28 @@
|
||||
{/if}
|
||||
<section
|
||||
class="content"
|
||||
class:narrowWidth="{block.contentWidth == 1}"
|
||||
class:normalWidth="{block.contentWidth == 2}"
|
||||
class:fullWidth="{block.contentWidth == 0}"
|
||||
class:narrowWidth={block.contentWidth == 1}
|
||||
class:normalWidth={block.contentWidth == 2}
|
||||
class:fullWidth={block.contentWidth == 0}
|
||||
>
|
||||
<div
|
||||
class="wrapper"
|
||||
class:noHorizontalMargin="{noHorizontalMargin}"
|
||||
class:noMobileHorizontalMargin="{block?.background?.noHorizontalMargin}"
|
||||
class:verticalPadding="{verticalPadding && !block?.background?.noVerticalPadding}"
|
||||
class:noHorizontalMargin={noHorizontalMargin}
|
||||
class:noMobileHorizontalMargin={block?.background?.noHorizontalMargin}
|
||||
class:verticalPadding={verticalPadding && !block?.background?.noVerticalPadding}
|
||||
>
|
||||
{#if block.headline || block.subline}
|
||||
<div class="headline-row">
|
||||
<div
|
||||
class="container bp-xl"
|
||||
class:darkColor="{!block?.background?.image && block?.background?.color === 'white'}"
|
||||
class:darkColor={!block?.background?.image && block?.background?.color === 'white'}
|
||||
>
|
||||
<!-- Überschrift Element -->
|
||||
{#if block.headline}
|
||||
{#if block.headlineH1}
|
||||
<h1 class="h2">{block.headline}</h1>
|
||||
{:else}
|
||||
<h2 class:doublyLined="{block.doublyLined}">{block.headline}</h2>
|
||||
<h2 class:doublyLined={block.doublyLined}>{block.headline}</h2>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if block.subline}
|
||||
@@ -92,7 +92,7 @@
|
||||
{#if block?.headlineLink}
|
||||
<button class="">
|
||||
<a
|
||||
href="{block.headlineLink}"
|
||||
href={block.headlineLink}
|
||||
class="headline-link"
|
||||
>
|
||||
{block.headlineLinkText}
|
||||
@@ -103,12 +103,12 @@
|
||||
{/if}
|
||||
|
||||
<svelte:component
|
||||
this="{blockComponent.component}"
|
||||
block="{block}"
|
||||
this={blockComponent.component}
|
||||
block={block}
|
||||
/>
|
||||
<div class="buttons">
|
||||
{#each block.callToActionButtons || [] as button}
|
||||
<Button button="{button}" />
|
||||
<Button button={button} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
if (swiper !== undefined) {
|
||||
const response = await fetch("/dist/index.css"),
|
||||
cssText = await response.text(),
|
||||
params = {
|
||||
params ={
|
||||
injectStyles: [cssText],
|
||||
}
|
||||
Object.assign(swiper, params)
|
||||
@@ -23,27 +23,27 @@
|
||||
{#if images.length > 1}
|
||||
<div class="default-swiper">
|
||||
<swiper-container
|
||||
bind:this="{swiper}"
|
||||
bind:this={swiper}
|
||||
slides-per-view="1"
|
||||
loop="{true}"
|
||||
loop={true}
|
||||
direction="horizontal"
|
||||
effect="slide"
|
||||
autoplay-delay="2500"
|
||||
mousewheel="{true}"
|
||||
navigation="{true}"
|
||||
init="{false}"
|
||||
mousewheel={true}
|
||||
navigation={true}
|
||||
init={false}
|
||||
speed="600"
|
||||
class="relative"
|
||||
>
|
||||
{#each images as image (image)}
|
||||
<swiper-slide class="relative">
|
||||
<div
|
||||
class:imageHoverEffect="{imageHoverEffect}"
|
||||
class:imageHoverEffect={imageHoverEffect}
|
||||
class="image-container"
|
||||
>
|
||||
<MedialibImage
|
||||
id="{image}"
|
||||
filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
|
||||
id={image}
|
||||
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
||||
/>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@@ -53,12 +53,12 @@
|
||||
{:else if images[0]}
|
||||
<div
|
||||
class="image-container single flex"
|
||||
class:forceFullHeight="{forceFullHeight}"
|
||||
class:imageHoverEffect="{imageHoverEffect}"
|
||||
class:forceFullHeight={forceFullHeight}
|
||||
class:imageHoverEffect={imageHoverEffect}
|
||||
>
|
||||
<MedialibImage
|
||||
id="{images[0]}"
|
||||
filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
|
||||
id={images[0]}
|
||||
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
type: "bar" | "circle" = "circle"
|
||||
</script>
|
||||
|
||||
<div class="{type}">
|
||||
<div class={type}>
|
||||
{#if type == "bar"}
|
||||
<BarLoader
|
||||
size="{size}"
|
||||
size={size}
|
||||
color="#741e20"
|
||||
unit="rem"
|
||||
/>
|
||||
{:else}
|
||||
<Circle
|
||||
size="{size}"
|
||||
size={size}
|
||||
color="#741e20"
|
||||
unit="rem"
|
||||
/>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
if (title) pageTitle = `${title} - ${websiteName}`
|
||||
else pageTitle = `${websiteName}`
|
||||
|
||||
const openGraphProps = {
|
||||
const openGraphProps ={
|
||||
article,
|
||||
datePublished: createdAt,
|
||||
lastUpdated: updatedAt,
|
||||
@@ -33,7 +33,7 @@
|
||||
pageTitle,
|
||||
product,
|
||||
}
|
||||
const schemaOrgProps = {
|
||||
const schemaOrgProps ={
|
||||
createdAt,
|
||||
updatedAt,
|
||||
article,
|
||||
@@ -50,17 +50,17 @@
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="{metaDescription}"
|
||||
content={metaDescription}
|
||||
/>
|
||||
|
||||
<meta
|
||||
name="keywords"
|
||||
content="{keywords}"
|
||||
content={keywords}
|
||||
/>
|
||||
|
||||
<meta
|
||||
property="og:site_name"
|
||||
content="{websiteName}"
|
||||
content={websiteName}
|
||||
/>
|
||||
|
||||
{#if noIndex || active === false}
|
||||
@@ -77,7 +77,7 @@
|
||||
</svelte:head>
|
||||
|
||||
{#if product}
|
||||
<Product product="{product}" />
|
||||
<Product product={product} />
|
||||
{/if}
|
||||
<OpenGraph {...openGraphProps} />
|
||||
|
||||
|
||||
@@ -12,40 +12,40 @@
|
||||
<svelte:head>
|
||||
<meta
|
||||
property="og:locale"
|
||||
content="{'de_DE'}"
|
||||
content={'de_DE'}
|
||||
/>
|
||||
<meta
|
||||
property="og:url"
|
||||
content="{$location.url}"
|
||||
content={$location.url}
|
||||
/>
|
||||
<meta
|
||||
property="og:type"
|
||||
content="{article ? 'article' : 'website'}"
|
||||
content={article ? 'article' : 'website'}
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="{pageTitle}"
|
||||
content={pageTitle}
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="{metaDescription}"
|
||||
content={metaDescription}
|
||||
/>
|
||||
{#if product}
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{product.featuredImage?.url}"
|
||||
content={product.featuredImage?.url}
|
||||
/>
|
||||
<meta
|
||||
property="og:image:width"
|
||||
content="{String(product.featuredImage?.width)}"
|
||||
content={String(product.featuredImage?.width)}
|
||||
/>
|
||||
<meta
|
||||
property="og:image:height"
|
||||
content="{String(product.featuredImage?.height)}"
|
||||
content={String(product.featuredImage?.height)}
|
||||
/>
|
||||
<meta
|
||||
property="og:image:alt"
|
||||
content="{product.title}"
|
||||
content={product.title}
|
||||
/>
|
||||
<!-- Twitter Card Tags for Product -->
|
||||
<meta
|
||||
@@ -54,24 +54,24 @@
|
||||
/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="{pageTitle}"
|
||||
content={pageTitle}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{metaDescription}"
|
||||
content={metaDescription}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="{product.featuredImage?.url}"
|
||||
content={product.featuredImage?.url}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image:alt"
|
||||
content="{product.title}"
|
||||
content={product.title}
|
||||
/>
|
||||
{:else}
|
||||
<meta
|
||||
property="og:image"
|
||||
content="{baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
content={baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
/>
|
||||
<meta
|
||||
property="og:image:width"
|
||||
@@ -93,15 +93,15 @@
|
||||
/>
|
||||
<meta
|
||||
name="twitter:title"
|
||||
content="{pageTitle}"
|
||||
content={pageTitle}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="{metaDescription}"
|
||||
content={metaDescription}
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content="{baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
content={baseURL}/api/_/assets/logo/logo-blue.svg"
|
||||
/>
|
||||
<meta
|
||||
name="twitter:image:alt"
|
||||
@@ -112,19 +112,19 @@
|
||||
{#if article}
|
||||
<meta
|
||||
property="article:publisher"
|
||||
content="{companyName}"
|
||||
content={companyName}
|
||||
/>
|
||||
<meta
|
||||
property="article:author"
|
||||
content="{companyName}"
|
||||
content={companyName}
|
||||
/>
|
||||
<meta
|
||||
property="article:published_time"
|
||||
content="{datePublished?.toISOString()}"
|
||||
content={datePublished?.toISOString()}
|
||||
/>
|
||||
<meta
|
||||
property="article:modified_time"
|
||||
content="{lastUpdated?.toISOString()}"
|
||||
content={lastUpdated?.toISOString()}
|
||||
/>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="canonical" href="{$location.url}" />
|
||||
<link rel="canonical" href={$location.url} />
|
||||
|
||||
<meta property="product:brand" content="BinKrassDuFass" />
|
||||
|
||||
<meta property="product:name" content="{product.title}" />
|
||||
<meta property="product:name" content={product.title} />
|
||||
|
||||
<meta property="product:price:amount" content="{String(product.priceRange.minVariantPrice.amount)}" />
|
||||
<meta property="product:price:amount" content={String(product.priceRange.minVariantPrice.amount)} />
|
||||
|
||||
<meta property="product:price:currency" content="{product.priceRange.minVariantPrice.currencyCode}" />
|
||||
<meta property="product:price:currency" content={product.priceRange.minVariantPrice.currencyCode} />
|
||||
</svelte:head>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
day: "2-digit",
|
||||
})
|
||||
|
||||
const defaultProps = {
|
||||
const defaultProps ={
|
||||
author: {
|
||||
"@id": `${baseURL}/#company`,
|
||||
},
|
||||
@@ -53,7 +53,7 @@
|
||||
},
|
||||
}
|
||||
|
||||
const schemaOrgEntity = {
|
||||
const schemaOrgEntity ={
|
||||
"@type": ["Store", "Organization"],
|
||||
"@id": `${baseURL}/#company`,
|
||||
name: websiteName,
|
||||
@@ -97,7 +97,7 @@
|
||||
sameAs: [Object.values(socialIcons)],
|
||||
}
|
||||
|
||||
const schemaOrgWebsite = {
|
||||
const schemaOrgWebsite ={
|
||||
"@type": "WebSite",
|
||||
"@id": `${baseURL}/#website`,
|
||||
url: baseURL,
|
||||
@@ -106,7 +106,7 @@
|
||||
...defaultProps,
|
||||
}
|
||||
|
||||
const schemaOrgWebPage = {
|
||||
const schemaOrgWebPage ={
|
||||
"@type": "WebPage",
|
||||
"@id": `${$location.url}#webpage`,
|
||||
url: $location.url,
|
||||
@@ -124,7 +124,7 @@
|
||||
|
||||
let schemaOrgArticle = null
|
||||
if (article || blog) {
|
||||
schemaOrgArticle = {
|
||||
schemaOrgArticle ={
|
||||
"@type": "Article",
|
||||
"@id": `${$location.url}#article`,
|
||||
headline: title,
|
||||
@@ -136,7 +136,7 @@
|
||||
|
||||
let schemaOrgBlog = null
|
||||
if (blog) {
|
||||
schemaOrgBlog = {
|
||||
schemaOrgBlog ={
|
||||
"@type": "BlogPosting",
|
||||
"@id": `${$location.url}#blog`,
|
||||
headline: title,
|
||||
@@ -147,7 +147,7 @@
|
||||
|
||||
let schemaOrgFAQ = null
|
||||
if (FAQ) {
|
||||
schemaOrgFAQ = {
|
||||
schemaOrgFAQ ={
|
||||
"@type": "FAQPage",
|
||||
"@id": `${$location.url}#faq`,
|
||||
...defaultProps,
|
||||
@@ -164,7 +164,7 @@
|
||||
|
||||
let schemaOrgProduct = null
|
||||
if (product)
|
||||
schemaOrgProduct = {
|
||||
schemaOrgProduct ={
|
||||
"@context": "http://schema.org/",
|
||||
"@type": "Product",
|
||||
"@id": `${$location.url}/#product`,
|
||||
@@ -207,7 +207,7 @@
|
||||
schemaOrgArticle,
|
||||
schemaOrgBlog,
|
||||
].filter(Boolean)
|
||||
const schemaOrgObject = {
|
||||
const schemaOrgObject ={
|
||||
"@context": "https://schema.org",
|
||||
"@graph": schemaOrgArray,
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div class="container">
|
||||
{#each block.columns || [] as column}
|
||||
<ColumnsColumn column="{column}" />
|
||||
<ColumnsColumn column={column} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,27 +12,27 @@
|
||||
</script>
|
||||
|
||||
<section
|
||||
class:imageMobileBackground="{column.imageMobileBackground}"
|
||||
class="{column.colWidth > 0 ? 'col-md-' + column.colWidth + ' col-12' : 'col-md-auto col-12'}"
|
||||
class:align-self-start="{column.verticalAlign == 'top'}"
|
||||
class:align-self-center="{column.verticalAlign == 'middle'}"
|
||||
class:align-self-end="{column.verticalAlign == 'bottom'}"
|
||||
class:imageMobileBackground={column.imageMobileBackground}
|
||||
class={column.colWidth > 0 ? 'col-md-' + column.colWidth + ' col-12' : 'col-md-auto col-12'}
|
||||
class:align-self-start={column.verticalAlign == 'top'}
|
||||
class:align-self-center={column.verticalAlign == 'middle'}
|
||||
class:align-self-end={column.verticalAlign == 'bottom'}
|
||||
>
|
||||
{#if column.type == "text"}
|
||||
<Text column="{column}" />
|
||||
<Text column={column} />
|
||||
{:else if column.type == "image"}
|
||||
<DefaultImage
|
||||
images="{column.images}"
|
||||
imageHoverEffect="{column.imageHoverEffect}"
|
||||
forceFullHeight="{column.forceFullHeight}"
|
||||
images={column.images}
|
||||
imageHoverEffect={column.imageHoverEffect}
|
||||
forceFullHeight={column.forceFullHeight}
|
||||
/>
|
||||
{:else if column.type == "cta"}
|
||||
<Cta column="{column}" />
|
||||
<Cta column={column} />
|
||||
{:else if column.type == "chapterDescription"}
|
||||
<ChapterDescription
|
||||
title="{column.chapterDescription.title}"
|
||||
type="{column.chapterDescription.type}"
|
||||
description="{column.chapterDescription.description}"
|
||||
title={column.chapterDescription.title}
|
||||
type={column.chapterDescription.type}
|
||||
description={column.chapterDescription.description}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<CookieSet cookieName="{'googleMaps'}" textPosition="{'unten'}" background="{'rgba(44, 44, 44, 0.4)'}">
|
||||
<CookieSet cookieName={'googleMaps'} textPosition={'unten'} background={'rgba(44, 44, 44, 0.4)'}>
|
||||
<iframe
|
||||
title="Google Maps"
|
||||
use:setHeight
|
||||
id="iframe"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2512.077224708092!2d11.023318016007138!3d50.97776317955154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a4729650047377%3A0xca0e03f621729448!2sWebmakers%20GmbH!5e0!3m2!1sde!2sde!4v1571866765252!5m2!1sde!2sde"
|
||||
style="border:0;"
|
||||
allowfullscreen="{true}"
|
||||
allowfullscreen={true}
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</CookieSet>
|
||||
|
||||
@@ -10,16 +10,16 @@
|
||||
<div class="placeholder"></div>
|
||||
<div class="left">
|
||||
<Cta
|
||||
column="{{
|
||||
column={{
|
||||
type: 'cta',
|
||||
cta: hp.cta,
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="hp-media">
|
||||
<MedialibImage
|
||||
id="{hp.image}"
|
||||
filter="{typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}"
|
||||
id={hp.image}
|
||||
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<section class="improveYourselfDescription">
|
||||
<div class="img">
|
||||
<MedialibImage
|
||||
id="{des.image}"
|
||||
id={des.image}
|
||||
filter="xxl"
|
||||
/>
|
||||
<div class="shadow"></div>
|
||||
|
||||
@@ -13,11 +13,11 @@
|
||||
const mobile = innerWidth < 600
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth="{innerWidth}" />
|
||||
<svelte:window bind:innerWidth={innerWidth} />
|
||||
<section class="newsletter">
|
||||
<div
|
||||
class="background-image"
|
||||
class:mobile="{mobile}"
|
||||
class:mobile={mobile}
|
||||
>
|
||||
{#if mobile}
|
||||
<img
|
||||
@@ -102,25 +102,25 @@
|
||||
{:else}
|
||||
<p>Wir informieren Dich über die neuesten Styles, wenn Du es willst!</p>
|
||||
<form
|
||||
on:submit|preventDefault|stopPropagation="{() => {
|
||||
on:submit|preventDefault|stopPropagation={() => {
|
||||
submitNewsletter(email, dataProt).then(() => (emailIsSubscribed = true))
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="E-Mail"
|
||||
bind:value="{email}"
|
||||
bind:value={email}
|
||||
id="email"
|
||||
class="specialInputStyle"
|
||||
on:focus="{(e) => {}}"
|
||||
on:focus={(e) => {}}
|
||||
/>
|
||||
<div class="data-protection">
|
||||
<Input
|
||||
type="checkbox"
|
||||
bind:value="{dataProt}"
|
||||
bind:value={dataProt}
|
||||
id="dataprot"
|
||||
classList="specialCheckStyle"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
<p>
|
||||
<a
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
{#if block.predefinedBlock?.id}
|
||||
<Content
|
||||
id="{block.predefinedBlock.id}"
|
||||
id={block.predefinedBlock.id}
|
||||
allwaysInView
|
||||
/>
|
||||
{/if}
|
||||
|
||||
@@ -56,31 +56,31 @@
|
||||
|
||||
<section
|
||||
class="splittedHomepage"
|
||||
style="--color: {currentColor}"
|
||||
style="--color: {currentColor}
|
||||
>
|
||||
<div class="placeholder"></div>
|
||||
<ul class="elements">
|
||||
{#each selfImprovementChapters as chapter, i}
|
||||
<li
|
||||
class:selected="{i == selectedChapter}"
|
||||
on:mouseenter="{() => {
|
||||
class:selected={i == selectedChapter}
|
||||
on:mouseenter={() => {
|
||||
stopInterval()
|
||||
selectedChapter = i
|
||||
updateShadowColor(chapter.color)
|
||||
}}"
|
||||
on:mouseleave="{startInterval}"
|
||||
}}
|
||||
on:mouseleave={startInterval}
|
||||
>
|
||||
{#if i == selectedChapter}
|
||||
<h2
|
||||
class="{i % 2 ? '' : 'transparent-heading'}"
|
||||
style="{i % 2
|
||||
class={i % 2 ? '' : 'transparent-heading'}
|
||||
style={i % 2
|
||||
? `color: var(${getVariableNameForChapter(chapter.type)})`
|
||||
: `-webkit-text-stroke: 1px var(${getVariableNameForChapter(chapter.type)})`}"
|
||||
: `-webkit-text-stroke: 1px var(${getVariableNameForChapter(chapter.type)})`}
|
||||
>
|
||||
{chapter.title}
|
||||
</h2>
|
||||
{:else}
|
||||
<h2 class="{i % 2 ? 'white-heading' : 'transparent-heading'}">{chapter.alias}</h2>
|
||||
<h2 class={i % 2 ? 'white-heading' : 'transparent-heading'}>{chapter.alias}</h2>
|
||||
{/if}
|
||||
|
||||
<p style="color: var({getVariableNameForChapter(chapter.type)} !important;">
|
||||
@@ -107,7 +107,7 @@
|
||||
dx="-10"
|
||||
dy="0"
|
||||
stdDeviation="20"
|
||||
flood-color="{currentColor}"></feDropShadow>
|
||||
flood-color={currentColor}></feDropShadow>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<li>
|
||||
<div class="image-wrapper">
|
||||
<MedialibImage id="{item.image}" />
|
||||
<MedialibImage id={item.image} />
|
||||
<h3>
|
||||
{i + 1}
|
||||
</h3>
|
||||
@@ -25,9 +25,9 @@
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="{isMobile ? 58 : 72}"
|
||||
height="{isMobile ? 58 : 72}"
|
||||
viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}"
|
||||
width={isMobile ? 58 : 72}
|
||||
height={isMobile ? 58 : 72}
|
||||
viewBox="0 0 {isMobile ? 58 : 72} {isMobile ? 58 : 72}
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
$: isMobile = innerWidth < 968
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth="{innerWidth}" />
|
||||
<svelte:window bind:innerWidth={innerWidth} />
|
||||
|
||||
{#if block.steps?.horizontal}
|
||||
<div
|
||||
@@ -28,9 +28,9 @@
|
||||
<ul class="step-blocks horizontal">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item="{item}"
|
||||
i="{i}"
|
||||
isMobile="{isMobile}"
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -39,9 +39,9 @@
|
||||
<ul class="step-blocks">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item="{item}"
|
||||
i="{i}"
|
||||
isMobile="{isMobile}"
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<p>{cta.description}</p>
|
||||
<div class="buttons">
|
||||
{#each cta.callToActionButtons as button}
|
||||
<Button button="{button}" />
|
||||
<Button button={button} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
{#if column.links?.length}
|
||||
<div class="button-wrap gap-m">
|
||||
<!-- Buttons sitzen im Wrapper, sollten vermutlich auch flexibel / repeatable sein, mal nur einen, mal zwei, mal keiner -->
|
||||
<LinkList links="{column.links}" />
|
||||
<LinkList links={column.links} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
options: {
|
||||
minSpace: number
|
||||
offsetAbove: number
|
||||
} = { minSpace: 150, offsetAbove: 75 }
|
||||
} ={ minSpace: 150, offsetAbove: 75 }
|
||||
): {
|
||||
x: string
|
||||
y: string
|
||||
@@ -72,7 +72,7 @@
|
||||
function dateChangeListener(e: any) {
|
||||
dateValue = new Date(e.detail.date)
|
||||
// element has data-for="error-message-birthday" attribute, get it by that
|
||||
const el = document.querySelector(`[data-for="error-message-${id}"]`)
|
||||
const el = document.querySelector(`[data-for="error-message-${id}]`)
|
||||
if (el) {
|
||||
el.remove()
|
||||
}
|
||||
@@ -104,18 +104,18 @@
|
||||
</script>
|
||||
|
||||
<label
|
||||
bind:this="{wrapper}"
|
||||
id="{id}"
|
||||
bind:this={wrapper}
|
||||
id={id}
|
||||
class="custom-date-picker"
|
||||
>
|
||||
<span class:hasValue="{!!dateValue || !editMode}">{placeholder}</span>
|
||||
<span class:hasValue={!!dateValue || !editMode}>{placeholder}</span>
|
||||
{#if editMode}
|
||||
<div class="wrapper">
|
||||
{#if dateValue}
|
||||
<button
|
||||
data-cy="custom-date-picker-text"
|
||||
class="btn text transparent"
|
||||
on:click|preventDefault|stopPropagation="{showDatepicker}"
|
||||
on:click|preventDefault|stopPropagation={showDatepicker}
|
||||
>
|
||||
{new Date(dateValue).toLocaleDateString("de-DE")}
|
||||
</button>
|
||||
@@ -127,21 +127,21 @@
|
||||
data-cy="custom-date-picker-icon"
|
||||
aria-label="Toggle datepicker"
|
||||
class="btn transparent icon"
|
||||
on:click|preventDefault|stopPropagation="{() => {
|
||||
on:click|preventDefault|stopPropagation={() => {
|
||||
hideAllModals()
|
||||
if (dateValue) dateValue = null
|
||||
else showDatepicker()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{#if !dateValue}
|
||||
<Icon
|
||||
path="{mdiCalendarAccount}"
|
||||
path={mdiCalendarAccount}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
path="{mdiCalendarRemove}"
|
||||
path={mdiCalendarRemove}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
if (!supportedMimeTypes.includes(file.type)) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Der Dateityp - "${file.type}" wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
html: `Der Dateityp - "${file.type} wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -71,7 +71,7 @@
|
||||
if (!isSupported) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Der Dateityp "${file.type}" wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
html: `Der Dateityp "${file.type} wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
@@ -86,7 +86,7 @@
|
||||
reader.addEventListener("load", function () {
|
||||
imgIsData = true
|
||||
const objectURL = URL.createObjectURL(file)
|
||||
value = {
|
||||
value ={
|
||||
path: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
@@ -107,98 +107,98 @@
|
||||
|
||||
<label class="file file-input-label">
|
||||
<div class="headline">
|
||||
<span class:hasValue="{true}">
|
||||
<span class:hasValue={true}>
|
||||
{placeholder}
|
||||
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip="{{
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}"
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path="{mdiInformationOutline}" />
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<Icon
|
||||
path="{type == 'image' ? mdiCameraOutline : mdiMovieOpenOutline}"
|
||||
path={type == 'image' ? mdiCameraOutline : mdiMovieOpenOutline}
|
||||
size="24px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="file-input"
|
||||
class:focused="{focused}"
|
||||
class:highlight-container="{highlight}"
|
||||
class:focused={focused}
|
||||
class:highlight-container={highlight}
|
||||
role="button"
|
||||
aria-label="File upload"
|
||||
tabindex="{0}"
|
||||
on:dragenter|preventDefault="{() => {
|
||||
tabindex={0}
|
||||
on:dragenter|preventDefault={() => {
|
||||
highlight = true
|
||||
}}"
|
||||
on:dragover|preventDefault="{() => {
|
||||
}}
|
||||
on:dragover|preventDefault={() => {
|
||||
highlight = true
|
||||
}}"
|
||||
on:dragleave|preventDefault="{() => {
|
||||
}}
|
||||
on:dragleave|preventDefault={() => {
|
||||
highlight = false
|
||||
}}"
|
||||
on:drop|preventDefault="{(e) => {
|
||||
}}
|
||||
on:drop|preventDefault={(e) => {
|
||||
highlight = false
|
||||
fileInput = e.dataTransfer
|
||||
onChange()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div class="fileContainer">
|
||||
<input
|
||||
type="file"
|
||||
bind:this="{fileInput}"
|
||||
on:change|stopPropagation="{onChange}"
|
||||
readonly="{disabled}"
|
||||
id="{id}"
|
||||
accept="{type === 'image' ? 'image/*' : 'video/*'}"
|
||||
bind:this={fileInput}
|
||||
on:change|stopPropagation={onChange}
|
||||
readonly={disabled}
|
||||
id={id}
|
||||
accept={type === 'image' ? 'image/*' : 'video/*'}
|
||||
on:click|stopPropagation
|
||||
/>
|
||||
|
||||
<div
|
||||
class="filePreview"
|
||||
class:hasChildElement="{!!value}"
|
||||
class:hasChildElement={!!value}
|
||||
>
|
||||
{#key rerender}
|
||||
{#if value}
|
||||
{#if type == "image"}
|
||||
{#if typeof value === "string"}
|
||||
<MedialibImage
|
||||
id="{value}"
|
||||
id={value}
|
||||
filter="l"
|
||||
/>
|
||||
{:else if imgIsData}
|
||||
<img
|
||||
src="{value.src}"
|
||||
alt="{value.path}"
|
||||
src={value.src}
|
||||
alt={value.path}
|
||||
/>
|
||||
{:else if typeof value.src === "string" && value.src.includes(";base64,")}
|
||||
<img
|
||||
src="{value.src}"
|
||||
alt="{value.path}"
|
||||
src={value.src}
|
||||
alt={value.path}
|
||||
/>
|
||||
{:else if typeof value.src === "string" && !value.src.match(/^https?:\/\//)}
|
||||
<img
|
||||
src="{`${apiBaseURL}${collectionName}/${entryId}/${value.src}`}"
|
||||
alt="{value.path}"
|
||||
src={`${apiBaseURL}${collectionName}/${entryId}/${value.src}`}
|
||||
alt={value.path}
|
||||
/>
|
||||
{/if}
|
||||
{:else if type == "video"}
|
||||
{#if typeof value == "string"}
|
||||
<MedialibFile
|
||||
id="{value}"
|
||||
id={value}
|
||||
let:entry
|
||||
let:src
|
||||
>
|
||||
<video>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src="{src}#t=0.1"
|
||||
src={src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
|
||||
@@ -212,7 +212,7 @@
|
||||
>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src="{value.src}#t=0.1"
|
||||
src={value.src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
@@ -223,10 +223,10 @@
|
||||
<button
|
||||
aria-label="Datei hochladen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault="{() => {
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
// change file by clicking input
|
||||
fileInput.click()
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Austauschen
|
||||
</button>
|
||||
@@ -234,10 +234,10 @@
|
||||
<button
|
||||
aria-label="Datei löschen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault="{() => {
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
value = null
|
||||
dispatch('change')
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
@@ -251,10 +251,10 @@
|
||||
</label>
|
||||
{#if showApproveModal}
|
||||
<Modal
|
||||
show="{true}"
|
||||
on:close="{() => {
|
||||
show={true}
|
||||
on:close={() => {
|
||||
showApproveModal = false
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="title">Dateiformat Warnung</svelte:fragment>
|
||||
<p>
|
||||
@@ -268,18 +268,18 @@
|
||||
>
|
||||
<button
|
||||
class="btn cta primary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
class="btn cta secondary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
onChange(true)
|
||||
}}">Fortfahren</button
|
||||
}}>Fortfahren</button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
$: hasValue = Boolean(value)
|
||||
|
||||
const attributes = {
|
||||
const attributes ={
|
||||
id,
|
||||
class: classList,
|
||||
placeholder,
|
||||
@@ -28,65 +28,65 @@
|
||||
|
||||
<label
|
||||
style=""
|
||||
class:textarea="{type == 'textarea'}"
|
||||
class:checkbox="{type == 'checkbox'}"
|
||||
class:textarea={type == 'textarea'}
|
||||
class:checkbox={type == 'checkbox'}
|
||||
>
|
||||
{#if type !== "checkbox"}
|
||||
<span class:hasValue="{hasValue || type === 'noInput'}">{placeholder}</span>
|
||||
<span class:hasValue={hasValue || type === 'noInput'}>{placeholder}</span>
|
||||
{/if}
|
||||
{#if type == "checkbox"}
|
||||
<input
|
||||
type="checkbox"
|
||||
{...attributes}
|
||||
on:change="{onChange}"
|
||||
bind:checked="{value}"
|
||||
on:change={onChange}
|
||||
bind:checked={value}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="checkit-span"
|
||||
aria-label="Toggle checkbox"
|
||||
tabindex="{0}"
|
||||
on:click="{() => {
|
||||
tabindex={0}
|
||||
on:click={() => {
|
||||
value = !value
|
||||
setTimeout(() => {
|
||||
const event = new Event('change', { bubbles: true })
|
||||
document.getElementById(id)?.dispatchEvent(event)
|
||||
}, 10)
|
||||
}}"
|
||||
on:keydown="{(e) => {}}"></button>
|
||||
}}
|
||||
on:keydown={(e) => {}}></button>
|
||||
{/if}
|
||||
{#if type == "password"}
|
||||
<input
|
||||
{...attributes}
|
||||
on:blur="{onChange}"
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
on:blur={onChange}
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
type="password"
|
||||
class="sentry-mask"
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "text"}
|
||||
<input
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "textarea"}
|
||||
<textarea
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"></textarea>
|
||||
bind:value={value}
|
||||
on:change={onChange}></textarea>
|
||||
{/if}
|
||||
{#if type == "number"}
|
||||
<input
|
||||
on:blur="{onChange}"
|
||||
on:blur={onChange}
|
||||
type="number"
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
on:change="{onChange}"
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "noInput"}
|
||||
@@ -100,14 +100,14 @@
|
||||
{/if}
|
||||
{#if type == "select"}
|
||||
<select
|
||||
on:change="{onChange}"
|
||||
on:change={onChange}
|
||||
{...attributes}
|
||||
bind:value="{value}"
|
||||
bind:value={value}
|
||||
>
|
||||
{#each options as option, index}
|
||||
<option
|
||||
value="{option.value}"
|
||||
selected="{index === selectedOptionIndex}"
|
||||
value={option.value}
|
||||
selected={index === selectedOptionIndex}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
@@ -119,12 +119,12 @@
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip="{{
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}"
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path="{mdiInformationOutline}" />
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
@@ -19,23 +19,23 @@
|
||||
<label
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click|stopPropagation="{() => {
|
||||
on:click|stopPropagation={() => {
|
||||
focused = true
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<span class:hasValue="{hasValue || !editMode}">{placeholder}</span>
|
||||
<span class:hasValue={hasValue || !editMode}>{placeholder}</span>
|
||||
{#if editMode}
|
||||
<Select
|
||||
bind:items="{options}"
|
||||
inputAttributes="{{ autocomplete: 'on' }}"
|
||||
placeholder="{placeholder}"
|
||||
showChevron="{true}"
|
||||
bind:focused="{focused}"
|
||||
clearable="{clearable}"
|
||||
hideEmptyState="{true}"
|
||||
searchable="{true}"
|
||||
bind:value="{selectedOption}"
|
||||
on:clear="{() => (selectedOption = null)}"
|
||||
bind:items={options}
|
||||
inputAttributes={{ autocomplete: 'on' }}
|
||||
placeholder={placeholder}
|
||||
showChevron={true}
|
||||
bind:focused={focused}
|
||||
clearable={clearable}
|
||||
hideEmptyState={true}
|
||||
searchable={true}
|
||||
bind:value={selectedOption}
|
||||
on:clear={() => (selectedOption = null)}
|
||||
/>
|
||||
{:else if !editMode}
|
||||
<div class="no-input">{selectedOption?.label || "-"}</div>
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
|
||||
{#if $actionApproval}
|
||||
<Modal
|
||||
show="{true}"
|
||||
show={true}
|
||||
size="sm"
|
||||
on:close="{(e) => {
|
||||
on:close={(e) => {
|
||||
actionApproval.set(null)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="title">{$actionApproval.modalTitle}</svelte:fragment>
|
||||
<p>
|
||||
@@ -22,18 +22,18 @@
|
||||
>
|
||||
<button
|
||||
class="btn cta primary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
actionApproval.set(null)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Nein
|
||||
</button>
|
||||
<button
|
||||
class="btn cta secondary"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
$actionApproval.callback()
|
||||
actionApproval.set(null)
|
||||
}}">Ja</button
|
||||
}}>Ja</button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
|
||||
<section
|
||||
class="banner"
|
||||
class:visible="{isVisible}"
|
||||
class:inVisible="{!isVisible}"
|
||||
class:visible={isVisible}
|
||||
class:inVisible={!isVisible}
|
||||
>
|
||||
{#if isVisible}
|
||||
<div class="text-slide">
|
||||
@@ -36,12 +36,12 @@
|
||||
{/key}
|
||||
</div>
|
||||
<button
|
||||
on:click="{closeBanner}"
|
||||
on:click={closeBanner}
|
||||
class="close-btn"
|
||||
aria-label="Close banner"
|
||||
>
|
||||
<Icon
|
||||
path="{mdiCloseCircleOutline}"
|
||||
path={mdiCloseCircleOutline}
|
||||
size="20px"
|
||||
color="#625755"
|
||||
/>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
<div class="tabs">
|
||||
{#each tabs as tab, i}
|
||||
<button
|
||||
class="{selectedTab === i ? 'selected' : ''}"
|
||||
on:click="{() => (selectedTab = i)}"
|
||||
class={selectedTab === i ? 'selected' : ''}
|
||||
on:click={() => (selectedTab = i)}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="cta {button.ctaType == 0 ? 'primary' : 'secondary'}"
|
||||
aria-label="{button.buttonText}"
|
||||
class="cta {button.ctaType == 0 ? 'primary' : 'secondary'}
|
||||
aria-label={button.buttonText}
|
||||
>
|
||||
<a
|
||||
use:spaLink
|
||||
href="{button.page}"
|
||||
target="{button.buttonTarget}"
|
||||
href={button.page}
|
||||
target={button.buttonTarget}
|
||||
>
|
||||
{button.buttonText}</a
|
||||
>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
export let textPosition = "center"
|
||||
export let background = ""
|
||||
let contentShown = false
|
||||
const positions = {
|
||||
const positions ={
|
||||
oben: "flex-start",
|
||||
mitte: "center",
|
||||
unten: "flex-end",
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
description = "",
|
||||
title = "Es sind noch Fragen offen?"
|
||||
let contactRequestSent = false
|
||||
const contactRequest = {
|
||||
const contactRequest ={
|
||||
email: email,
|
||||
name: name,
|
||||
description: description,
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
<form
|
||||
class="contactForm"
|
||||
on:submit|preventDefault|stopPropagation="{() => {
|
||||
on:submit|preventDefault|stopPropagation={() => {
|
||||
if (validateContactRequest()) {
|
||||
createContactRequest(contactRequest, $cryptchaSolutionId, $cryptchaSolution).then(() => {
|
||||
newNotification({
|
||||
@@ -75,7 +75,7 @@
|
||||
contactRequestSent = true
|
||||
})
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{#if contactRequestSent}
|
||||
<section class="row">
|
||||
@@ -89,9 +89,9 @@
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="E-Mail"
|
||||
bind:value="{contactRequest.email}"
|
||||
bind:value={contactRequest.email}
|
||||
id="email"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
helperText="Wir benötigen deine E-Mail Adresse, um dir antworten zu können."
|
||||
/>
|
||||
</section>
|
||||
@@ -99,18 +99,18 @@
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
bind:value="{contactRequest.name}"
|
||||
bind:value={contactRequest.name}
|
||||
id="name"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</section>
|
||||
<section class="row">
|
||||
<Input
|
||||
type="textarea"
|
||||
placeholder="Beschreibung"
|
||||
bind:value="{contactRequest.description}"
|
||||
bind:value={contactRequest.description}
|
||||
id="description"
|
||||
onChange="{onChange}"
|
||||
onChange={onChange}
|
||||
/>
|
||||
</section>
|
||||
<section
|
||||
@@ -119,8 +119,8 @@
|
||||
>
|
||||
<Input
|
||||
type="checkbox"
|
||||
bind:value="{contactRequest.usageTerms}"
|
||||
onChange="{onChange}"
|
||||
bind:value={contactRequest.usageTerms}
|
||||
onChange={onChange}
|
||||
id="usageTerms"
|
||||
/>
|
||||
<p>
|
||||
@@ -137,13 +137,13 @@
|
||||
<button
|
||||
class="cta primary"
|
||||
type="submit"
|
||||
disabled="{!$cryptchaSolution}"
|
||||
disabled={!$cryptchaSolution}
|
||||
>
|
||||
Absenden
|
||||
</button>
|
||||
</section>
|
||||
<section class="row">
|
||||
<div bind:this="{cryptchaEl}"></div>
|
||||
<div bind:this={cryptchaEl}></div>
|
||||
</section>
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
@@ -5,18 +5,18 @@
|
||||
export let color = "currentColor"
|
||||
export let viewBox = "0 0 24 24"
|
||||
export let path: string
|
||||
export let props: any = {}
|
||||
export let props: any ={}
|
||||
</script>
|
||||
|
||||
{#if path}
|
||||
<svg
|
||||
width="{width}"
|
||||
height="{height}"
|
||||
viewBox="{viewBox}"
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={viewBox}
|
||||
>
|
||||
<path
|
||||
{...props}
|
||||
d="{path}"
|
||||
fill="{color}"></path>
|
||||
d={path}
|
||||
fill={color}></path>
|
||||
</svg>
|
||||
{/if}
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
|
||||
{#each links || [] as link}
|
||||
{#if link.url || !link.file}
|
||||
<a use:spaLink href="{link.url}" class="cta btn-{link.style} {link.style}" target="{link.target || undefined}"
|
||||
<a use:spaLink href={link.url} class="cta btn-{link.style} {link.style} target={link.target || undefined}
|
||||
>{link.text}</a
|
||||
>
|
||||
{:else}
|
||||
<MedialibFile id="{link.file}" let:src>
|
||||
<a href="{src}" class="cta btn-{link.style} {link.style}" target="{link.target || undefined}">{link.text}</a
|
||||
<MedialibFile id={link.file} let:src>
|
||||
<a href={src} class="cta btn-{link.style} {link.style} target={link.target || undefined}>{link.text}</a
|
||||
>
|
||||
</MedialibFile>
|
||||
{/if}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<div
|
||||
class="loadingWrapper"
|
||||
class:active="{active}"
|
||||
class:active={active}
|
||||
>
|
||||
{#if active}
|
||||
<div class="spinner">
|
||||
@@ -26,7 +26,7 @@
|
||||
{/if}
|
||||
<div
|
||||
class="content"
|
||||
style="{styles}"
|
||||
style={styles}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
// TODO: check ssr
|
||||
|
||||
const medialibCache: { [id: string]: MedialibEntry } = {}
|
||||
const medialibCache: { [id: string]: MedialibEntry } ={}
|
||||
|
||||
let loadQueue: string[] = []
|
||||
export async function loadMedialibEntry(id: string): Promise<MedialibEntry> {
|
||||
@@ -64,14 +64,14 @@
|
||||
{#if !noPlaceholder}
|
||||
<slot
|
||||
name="loading"
|
||||
entry="{entry}"
|
||||
src="{fileSrc}"
|
||||
entry={entry}
|
||||
src={fileSrc}
|
||||
/>
|
||||
{/if}
|
||||
{:else if entry}
|
||||
<slot
|
||||
entry="{entry}"
|
||||
src="{fileSrc}"
|
||||
entry={entry}
|
||||
src={fileSrc}
|
||||
/>
|
||||
{:else if !noPlaceholder}
|
||||
<slot name="not-found" />
|
||||
|
||||
@@ -52,16 +52,16 @@
|
||||
|
||||
{#if id}
|
||||
<MedialibFile
|
||||
id="{id}"
|
||||
id={id}
|
||||
let:entry
|
||||
let:src
|
||||
noPlaceholder="{noPlaceholder}"
|
||||
noPlaceholder={noPlaceholder}
|
||||
>
|
||||
<img
|
||||
bind:this="{imgElement}"
|
||||
src="{getSrcWithFilter(imgElement, entry, src)}"
|
||||
alt="{entry.alt || 'icon'}"
|
||||
data-entry-id="{id}"
|
||||
bind:this={imgElement}
|
||||
src={getSrcWithFilter(imgElement, entry, src)}
|
||||
alt={entry.alt || 'icon'}
|
||||
data-entry-id={id}
|
||||
/>
|
||||
<img
|
||||
slot="loading"
|
||||
@@ -69,15 +69,15 @@
|
||||
let:src
|
||||
src="/assets/img/placeholder-image.png"
|
||||
alt="placeholder"
|
||||
data-entry-id="{id}"
|
||||
data-entry="{JSON.stringify(entry)}"
|
||||
data-entry-src="{src}"
|
||||
data-entry-id={id}
|
||||
data-entry={JSON.stringify(entry)}
|
||||
data-entry-src={src}
|
||||
/>
|
||||
<img
|
||||
slot="not-found"
|
||||
src="/assets/img/placeholder-image.png"
|
||||
alt="not found"
|
||||
data-entry-id="{id}"
|
||||
data-entry-id={id}
|
||||
/>
|
||||
</MedialibFile>
|
||||
{/if}
|
||||
|
||||
@@ -18,33 +18,33 @@
|
||||
|
||||
<ul
|
||||
class="container"
|
||||
class:inModal="{force}"
|
||||
class:inModal={force}
|
||||
>
|
||||
{#each $notifications as n, i (n)}
|
||||
{#if !$openModal || ($openModal && force)}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||
<li
|
||||
class="notification {n.class}"
|
||||
class="notification {n.class}
|
||||
use:animateIt
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
removeNotification(n)
|
||||
}}"
|
||||
}}
|
||||
role="button"
|
||||
tabindex="{0}"
|
||||
on:keydown="{(event) => {
|
||||
tabindex={0}
|
||||
on:keydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
removeNotification(n)
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<button
|
||||
class="close"
|
||||
aria-label="Close notification"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
removeNotification(n)
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<Icon path="{mdiWindowClose}" />
|
||||
<Icon path={mdiWindowClose} />
|
||||
</button>
|
||||
{@html n.html}
|
||||
</li>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<section id="pageHeadline">
|
||||
<div
|
||||
class="wrapper"
|
||||
class:marginBottom="{marginBottom}"
|
||||
class:marginBottom={marginBottom}
|
||||
>
|
||||
<slot name="above" />
|
||||
<h1>{title}</h1>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</script>
|
||||
|
||||
{#if showButton && force}
|
||||
<button on:click="{jumpDown}" class="jump-down"
|
||||
<button on:click={jumpDown} class="jump-down"
|
||||
><span> SCROLL </span>
|
||||
<img src="/media/chev-d.svg" alt="arrow" />
|
||||
</button>
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
|
||||
{#if showButton}
|
||||
<button
|
||||
transition:fade="{{}}"
|
||||
on:click="{scrollToTop}"
|
||||
transition:fade={{}}
|
||||
on:click={scrollToTop}
|
||||
class="scroll-to-top"
|
||||
aria-label="Scroll to top"
|
||||
><img
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
|
||||
<div
|
||||
id="crinkle"
|
||||
class:bigVersion="{bigVersion}"
|
||||
class:bigVersion={bigVersion}
|
||||
>
|
||||
<div
|
||||
class="crinkle-background"
|
||||
class:brightColor="{brightColor}"
|
||||
class:brightColor={brightColor}
|
||||
>
|
||||
{#if $$slots.icon}
|
||||
<slot name="icon" />
|
||||
|
||||
Reference in New Issue
Block a user