zwischenstand
This commit is contained in:
@@ -1,30 +0,0 @@
|
||||
<script lang="ts">
|
||||
import ColumnsColumn from "./ColumnsColumn.svelte"
|
||||
export let block: ContentBlock<"columns">
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
{#each block.columns || [] as column}
|
||||
<ColumnsColumn column={column} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../../lib/assets/css/variables.less";
|
||||
.container {
|
||||
display: flex;
|
||||
gap: 1.1rem;
|
||||
max-width: var(--normal-max-width);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@media @mobile {
|
||||
flex-direction: column-reverse;
|
||||
:global & > section {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,72 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { apiBaseOverride } from "../../../store"
|
||||
import DefaultImage from "../DefaultImage.svelte"
|
||||
import ChapterDescription from "./columns/ChapterDescription.svelte"
|
||||
import Cta from "./columns/CTA.svelte"
|
||||
import Text from "./columns/Text.svelte"
|
||||
|
||||
export let column: BlockColumn
|
||||
|
||||
export let apiBase: string = null
|
||||
if (apiBase) $apiBaseOverride = apiBase
|
||||
</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'}
|
||||
>
|
||||
{#if column.type == "text"}
|
||||
<Text column={column} />
|
||||
{:else if column.type == "image"}
|
||||
<DefaultImage
|
||||
images={column.images}
|
||||
imageHoverEffect={column.imageHoverEffect}
|
||||
forceFullHeight={column.forceFullHeight}
|
||||
/>
|
||||
{:else if column.type == "cta"}
|
||||
<Cta column={column} />
|
||||
{:else if column.type == "chapterDescription"}
|
||||
<ChapterDescription
|
||||
title={column.chapterDescription.title}
|
||||
type={column.chapterDescription.type}
|
||||
description={column.chapterDescription.description}
|
||||
/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../../lib/assets/css/variables.less";
|
||||
section {
|
||||
width: 0px;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@media @mobile {
|
||||
&.imageMobileBackground {
|
||||
position: absolute;
|
||||
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&.align-self-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
&.align-self-center {
|
||||
justify-content: center;
|
||||
}
|
||||
&.align-self-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
import CookieSet from "../../widgets/CookieSet.svelte"
|
||||
const setHeight = (element: HTMLElement) => {
|
||||
element.style.height = (element.offsetWidth / 16) * 9 + "px"
|
||||
}
|
||||
</script>
|
||||
|
||||
<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}
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"></iframe>
|
||||
</CookieSet>
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +0,0 @@
|
||||
<script lang="ts">
|
||||
import MedialibImage from "../../widgets/MedialibImage.svelte"
|
||||
import Cta from "./columns/CTA.svelte"
|
||||
|
||||
export let block: ContentBlock<"homepage">
|
||||
const hp = block.mainHomepage
|
||||
</script>
|
||||
|
||||
<section class="homepage">
|
||||
<div class="placeholder"></div>
|
||||
<div class="left">
|
||||
<Cta
|
||||
column={{
|
||||
type: 'cta',
|
||||
cta: hp.cta,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="hp-media">
|
||||
<MedialibImage
|
||||
id={hp.image}
|
||||
filter={typeof window !== 'undefined' && window.innerWidth > 500 ? 'xl' : 'm'}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style
|
||||
lang="less"
|
||||
global
|
||||
>
|
||||
@import "../../../assets/css/variables.less";
|
||||
|
||||
.homepage {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: --color 1s ease;
|
||||
margin: -96px 0;
|
||||
|
||||
.placeholder {
|
||||
}
|
||||
.left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transform: translateY(96px);
|
||||
width: 100%;
|
||||
@media @mobile {
|
||||
padding: 0px var(--horizontal-default-margin);
|
||||
}
|
||||
@media @mobile {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
.hp-media {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: flex-end;
|
||||
flex-grow: 1;
|
||||
@media @mobile {
|
||||
&::before {
|
||||
//shadow
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
|
||||
}
|
||||
}
|
||||
img {
|
||||
height: calc(100%);
|
||||
object-fit: contain;
|
||||
}
|
||||
@media @mobile {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,184 +0,0 @@
|
||||
<script lang="ts">
|
||||
import MedialibImage from "../../widgets/MedialibImage.svelte"
|
||||
|
||||
export let block: ContentBlock<"improveYourselfDescription">
|
||||
const des = block.improveYourselfDescription
|
||||
</script>
|
||||
|
||||
<section class="improveYourselfDescription">
|
||||
<div class="img">
|
||||
<MedialibImage
|
||||
id={des.image}
|
||||
filter="xxl"
|
||||
/>
|
||||
<div class="shadow"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2 class="h1">Improve Yourself</h2>
|
||||
<p>{@html des.upperDescription}</p>
|
||||
<ul>
|
||||
<li>
|
||||
<span
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="32"
|
||||
viewBox="0 0 44 32"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M42.5934 9.61759L21.9008 31.2762L1.20832 9.61759L10.829 0.5H32.9727L42.5934 9.61759Z"
|
||||
stroke="#EB5757"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span style="color: #EB5757;">Fitness</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="32"
|
||||
viewBox="0 0 44 32"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M23.0956 25.0301C25.4532 25.0301 27.6755 24.4466 29.625 23.4161C26.9937 28.2334 21.8812 31.5 16.0069 31.5C7.44266 31.5 0.5 24.5574 0.5 15.9931C0.5 8.2062 6.23975 1.75968 13.719 0.653784C10.8856 3.21373 9.10412 6.9181 9.10412 11.0386C9.10412 18.7659 15.3684 25.0301 23.0956 25.0301Z"
|
||||
stroke="#56F2B0"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span style="color: #56F2B0;">Entspannung</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="32"
|
||||
viewBox="0 0 44 32"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M18.4213 6.89342L18.8989 8.42622L19.3761 6.89329C20.5237 3.20667 23.8663 0.5 27.7914 0.5C32.6671 0.5 36.6326 4.44843 36.6326 9.48563C36.6326 11.9912 35.6486 13.7553 33.9735 15.7311L18.9071 31.2817L3.82337 15.7311C2.15062 13.7562 1.16675 11.9768 1.16675 9.4684C1.16675 4.43715 5.12025 0.599827 10.0049 0.599827C13.9382 0.599827 17.2753 3.21536 18.4213 6.89342Z"
|
||||
stroke="#C0F256"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span style="color: #C0F256;">Ernährung</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="44"
|
||||
height="32"
|
||||
viewBox="0 0 44 32"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M16 1.16101L20.157 9.87264L20.2738 10.1176L20.5429 10.153L30.1127 11.4145L23.112 18.0601L22.9152 18.2469L22.9646 18.5137L24.7221 28.005L16.2385 23.4006L16 23.2711L15.7615 23.4006L7.27786 28.005L9.03536 18.5137L9.08477 18.2469L8.88795 18.0601L1.88728 11.4145L11.4571 10.153L11.7262 10.1176L11.843 9.87264L16 1.16101Z"
|
||||
stroke="#56F2F2"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span style="color: #56F2F2;">Weiterbildung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<p>{@html des.lowerDescription}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style
|
||||
lang="less"
|
||||
global
|
||||
>
|
||||
@import "../../../assets/css/variables.less";
|
||||
.improveYourselfDescription {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 2.4rem;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.img {
|
||||
width: 400px;
|
||||
min-width: 400px;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.shadow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 2.4rem;
|
||||
z-index: 99;
|
||||
p {
|
||||
color: var(--text-100);
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
span {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
flex-direction: column;
|
||||
padding: 0px;
|
||||
.content {
|
||||
ul {
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
li {
|
||||
flex-direction: row;
|
||||
span:first-child {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.img {
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
.shadow {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(13, 12, 12, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: var(--primary-200);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,12 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Content from "../../../../routes/Content.svelte"
|
||||
|
||||
export let block: ContentBlock<"predefinedBlock">
|
||||
</script>
|
||||
|
||||
{#if block.predefinedBlock?.id}
|
||||
<Content
|
||||
id={block.predefinedBlock.id}
|
||||
allwaysInView
|
||||
/>
|
||||
{/if}
|
||||
@@ -1,203 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte"
|
||||
import { getDBEntries } from "../../../../api"
|
||||
import { getVariableNameForChapter } from "../../../utils"
|
||||
|
||||
export let block: ContentBlock<"splittedHomepage">
|
||||
let selfImprovementChapters: SelfImprovementChapter[] = []
|
||||
let interval: NodeJS.Timeout
|
||||
let selectedChapter = -1
|
||||
let currentColor = "#741e20" // Initial color
|
||||
|
||||
getDBEntries("selfImprovementChapter").then((res) => {
|
||||
selfImprovementChapters = res
|
||||
if (selfImprovementChapters.length > 0) {
|
||||
selectedChapter = -1
|
||||
|
||||
setTimeout(() => {
|
||||
// set width and height of placeholder to elements width and height
|
||||
const placeholder = document.querySelector(".placeholder")
|
||||
const elements = document.querySelector(".elements")
|
||||
if (placeholder && elements) {
|
||||
const { width, height } = elements.getBoundingClientRect()
|
||||
placeholder.style.width = `${width}px`
|
||||
placeholder.style.height = `${height}px`
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
})
|
||||
|
||||
function startInterval() {
|
||||
interval = setInterval(() => {
|
||||
selectedChapter = (selectedChapter + 1) % selfImprovementChapters.length
|
||||
updateShadowColor(selfImprovementChapters[selectedChapter]?.color || "#000")
|
||||
}, 3000)
|
||||
}
|
||||
|
||||
function stopInterval() {
|
||||
clearInterval(interval)
|
||||
}
|
||||
|
||||
function updateShadowColor(newColor: string) {
|
||||
const filter = document.getElementById("redShadow")
|
||||
const feDropShadow = filter?.querySelector("feDropShadow")
|
||||
if (feDropShadow) {
|
||||
feDropShadow.style.transition = "flood-color 1s ease"
|
||||
feDropShadow.setAttribute("flood-color", newColor)
|
||||
currentColor = newColor
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
startInterval()
|
||||
return () => clearInterval(interval)
|
||||
})
|
||||
</script>
|
||||
|
||||
<section
|
||||
class="splittedHomepage"
|
||||
style="--color: {currentColor}
|
||||
>
|
||||
<div class="placeholder"></div>
|
||||
<ul class="elements">
|
||||
{#each selfImprovementChapters as chapter, i}
|
||||
<li
|
||||
class:selected={i == selectedChapter}
|
||||
on:mouseenter={() => {
|
||||
stopInterval()
|
||||
selectedChapter = i
|
||||
updateShadowColor(chapter.color)
|
||||
}}
|
||||
on:mouseleave={startInterval}
|
||||
>
|
||||
{#if i == selectedChapter}
|
||||
<h2
|
||||
class={i % 2 ? '' : 'transparent-heading'}
|
||||
style={i % 2
|
||||
? `color: 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>
|
||||
{/if}
|
||||
|
||||
<p style="color: var({getVariableNameForChapter(chapter.type)} !important;">
|
||||
{@html chapter.shortDescription}
|
||||
</p>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<div class="media">
|
||||
<svg
|
||||
viewBox="-100 -100 1200 1275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<filter
|
||||
id="redShadow"
|
||||
x="-50%"
|
||||
y="-50%"
|
||||
width="200%"
|
||||
height="200%"
|
||||
>
|
||||
<feDropShadow
|
||||
dx="-10"
|
||||
dy="0"
|
||||
stdDeviation="20"
|
||||
flood-color={currentColor}></feDropShadow>
|
||||
</filter>
|
||||
</defs>
|
||||
<path
|
||||
d="M877.847 697.627H631.968L582.45 612.133H1000L904.042 446.139H481.362L605.704 231.311L680.46 360.44H854.319L685.658 69.1471L565.762 0L0 977.156L168.593 1074.55H738.253L794.132 977.772L728.062 863.552H973.941L877.847 697.627ZM204.637 924.082L396.895 592.025L589.153 924.082H204.637Z"
|
||||
fill="black"
|
||||
filter="url(#redShadow)"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang="less">
|
||||
@import "../../../assets/css/variables.less";
|
||||
|
||||
.splittedHomepage {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: --color 1s ease;
|
||||
.placeholder {
|
||||
}
|
||||
.elements {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@media @mobile {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
li {
|
||||
transition: max-height 1.5s ease;
|
||||
|
||||
max-height: 5rem;
|
||||
max-width: 900px;
|
||||
h2 {
|
||||
font-size: 4.5rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
line-height: 4.5rem;
|
||||
font-family: sans-serif;
|
||||
@media @mobile {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
&.transparent-heading {
|
||||
@media @mobile {
|
||||
font-size: 3rem;
|
||||
}
|
||||
font-weight: 700;
|
||||
color: transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
-webkit-text-stroke: 1px white;
|
||||
}
|
||||
}
|
||||
height: fit-content;
|
||||
max-height: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
p {
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
&.selected {
|
||||
p {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.media {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
@media @mobile {
|
||||
width: 100%;
|
||||
}
|
||||
svg {
|
||||
width: 100%;
|
||||
transition: fill 1s ease;
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<script lang="ts">
|
||||
import MedialibImage from "../../widgets/MedialibImage.svelte"
|
||||
|
||||
export let item: {
|
||||
image: string
|
||||
title: string
|
||||
descriptions: string[]
|
||||
}
|
||||
export let i: number
|
||||
export let isMobile: boolean
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<div class="image-wrapper">
|
||||
<MedialibImage id={item.image} />
|
||||
<h3>
|
||||
{i + 1}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="title-row">
|
||||
<h4>
|
||||
{item.title}
|
||||
</h4>
|
||||
|
||||
<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}
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M0 {isMobile ? 58 : 72}V0L{isMobile ? 58 : 72} {isMobile ? 58 : 72}H0Z"
|
||||
fill="#EB5757"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="descriptions">
|
||||
<ul>
|
||||
{#each item.descriptions as description}
|
||||
<li>
|
||||
{description}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -1,172 +0,0 @@
|
||||
<script
|
||||
lang="ts"
|
||||
context="module"
|
||||
>
|
||||
import "simplebar"
|
||||
import "simplebar/dist/simplebar.css"
|
||||
import ResizeObserver from "resize-observer-polyfill"
|
||||
if (typeof window !== "undefined") window.ResizeObserver = ResizeObserver
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import MedialibImage from "../../widgets/MedialibImage.svelte"
|
||||
import Step from "./Step.svelte"
|
||||
|
||||
export let block: ContentBlock<"steps">
|
||||
console.log("block", block)
|
||||
let innerWidth = 0
|
||||
$: isMobile = innerWidth < 968
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={innerWidth} />
|
||||
|
||||
{#if block.steps?.horizontal}
|
||||
<div
|
||||
class=" product-preview-list verticalScrollbar"
|
||||
data-simplebar
|
||||
>
|
||||
<ul class="step-blocks horizontal">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="step-blocks">
|
||||
{#each block.steps.items as item, i}
|
||||
<Step
|
||||
item={item}
|
||||
i={i}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style
|
||||
lang="less"
|
||||
global
|
||||
>
|
||||
@import "../../../assets/css/variables.less";
|
||||
.step-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
|
||||
@media @mobile {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
&.horizontal {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
gap: 2.4rem;
|
||||
padding-bottom: 2.4rem;
|
||||
|
||||
& > li {
|
||||
min-width: 500px;
|
||||
flex-grow: 1;
|
||||
height: unset !important;
|
||||
@media @mobile {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
@media @mobile {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
gap: 2.4rem;
|
||||
& > li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
aspect-ratio: 1 / 1;
|
||||
h3 {
|
||||
position: absolute;
|
||||
right: 3.6rem;
|
||||
text-align: center;
|
||||
font-size: 5.5rem;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
line-height: 100%; /* 128px */
|
||||
text-transform: uppercase;
|
||||
font-family: sans-serif;
|
||||
z-index: 4;
|
||||
bottom: 2.4rem;
|
||||
|
||||
@media @mobile {
|
||||
font-size: 3rem;
|
||||
bottom: 2rem;
|
||||
right: 2.4rem;
|
||||
}
|
||||
font-weight: 700;
|
||||
color: transparent;
|
||||
|
||||
display: inline-block;
|
||||
-webkit-text-stroke: 2px #eb5757;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
margin-top: -3.6rem;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 3;
|
||||
.title-row {
|
||||
height: 3.6rem;
|
||||
max-height: 3.6rem;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
h4 {
|
||||
background-color: #eb5757;
|
||||
padding: 1.2rem 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
max-height: 100%;
|
||||
width: calc(100% - 3 * 3.6rem - 2rem);
|
||||
color: var(--bg-100);
|
||||
@media @mobile {
|
||||
font-size: 1.2rem;
|
||||
width: calc(100% - 3 * 2.4rem - 2rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
.descriptions {
|
||||
background-color: #eb5757;
|
||||
padding: 0px;
|
||||
flex-grow: 1;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
li {
|
||||
padding: 2.4rem;
|
||||
|
||||
width: 100%;
|
||||
color: var(--bg-100);
|
||||
border-bottom: 2px solid var(--bg-100);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Button from "../../../widgets/Button.svelte"
|
||||
|
||||
export let column: BlockColumn<"cta">
|
||||
const cta = column.cta
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="cta"
|
||||
id="cta"
|
||||
>
|
||||
{#if cta.upperHeadline}
|
||||
<small>
|
||||
{cta.upperHeadline}
|
||||
</small>
|
||||
{/if}
|
||||
|
||||
<h1>
|
||||
{cta.whiteHeadline}
|
||||
{#if cta.headlineArrangement !== "row"} <br />{/if} <em class="red">{cta.redHeadline}</em>
|
||||
</h1>
|
||||
|
||||
<p>{cta.description}</p>
|
||||
<div class="buttons">
|
||||
{#each cta.callToActionButtons as button}
|
||||
<Button button={button} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
#cta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
|
||||
small {
|
||||
font-weight: 700;
|
||||
font-family: Outfit-Bold, sans-serif;
|
||||
color: var(--text-100);
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-100);
|
||||
}
|
||||
.buttons {
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { getVariableNameForChapter } from "../../../../utils"
|
||||
|
||||
export let title: string, type: number, description: string
|
||||
|
||||
//
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h1 style="color: var({getVariableNameForChapter(type)});">
|
||||
{title}
|
||||
</h1>
|
||||
<p style="color: var({getVariableNameForChapter(type)});">
|
||||
{@html description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
h1 {
|
||||
font-size: 4.8rem;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +0,0 @@
|
||||
<script lang="ts">
|
||||
import LinkList from "../../../widgets/LinkList.svelte"
|
||||
|
||||
export let column: BlockColumn<"text">
|
||||
</script>
|
||||
|
||||
{@html column.text}
|
||||
{#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} />
|
||||
</div>
|
||||
{/if}
|
||||
@@ -1,193 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte"
|
||||
import Icon from "../../../widgets/Icon.svelte"
|
||||
|
||||
import { mdiCalendarAccount, mdiCalendarRemove } from "@mdi/js"
|
||||
|
||||
export let dateValue: Date,
|
||||
placeholder: string,
|
||||
id: string,
|
||||
editMode = true
|
||||
let Datepicker: any
|
||||
onMount(() => {
|
||||
if (typeof window !== "undefined" && typeof document !== "undefined") {
|
||||
import("vanillajs-datepicker")
|
||||
.then((module) => {
|
||||
Datepicker = module.Datepicker
|
||||
})
|
||||
.catch((err) => console.error("Failed to load datepicker:", err))
|
||||
}
|
||||
})
|
||||
let datepicker: any
|
||||
let wrapper: HTMLLabelElement
|
||||
function getElementPosition(
|
||||
element: HTMLElement,
|
||||
options: {
|
||||
minSpace: number
|
||||
offsetAbove: number
|
||||
} ={ minSpace: 150, offsetAbove: 75 }
|
||||
): {
|
||||
x: string
|
||||
y: string
|
||||
} {
|
||||
const rect = element.getBoundingClientRect()
|
||||
const scrollTop = window.scrollY || window.pageYOffset
|
||||
const windowHeight = window.innerHeight
|
||||
const topBody = Number(document.body.style.top.split("px")[0])
|
||||
let top = rect.bottom + scrollTop + 5 - topBody
|
||||
|
||||
// Check if there's the specified minimum visible space below the element
|
||||
if (windowHeight - rect.bottom < options.minSpace) {
|
||||
// Place the element above the current element with the specified offset
|
||||
top = rect.top + scrollTop - element.offsetHeight - options.offsetAbove - topBody + 100
|
||||
}
|
||||
return {
|
||||
y: top + "px",
|
||||
x: window.innerWidth - rect.right - 20 + "px",
|
||||
}
|
||||
}
|
||||
|
||||
function respawnElement(element: HTMLElement, deepCopy: boolean = true) {
|
||||
var newElement = element.cloneNode(deepCopy)
|
||||
element.parentNode.replaceChild(newElement, element)
|
||||
return newElement
|
||||
}
|
||||
|
||||
function hideAllModals() {
|
||||
const dateModal = document.getElementById("dateModal")
|
||||
dateModal.style.display = "none"
|
||||
respawnElement(dateModal, false)
|
||||
}
|
||||
|
||||
function outSideDateModalClickListener(e: MouseEvent) {
|
||||
const dateModal = document.getElementById("dateModal")
|
||||
if (
|
||||
!dateModal.contains(e.target as Node) &&
|
||||
e.target !== document &&
|
||||
!(e.target as Element).classList.contains("datepicker-cell")
|
||||
) {
|
||||
hideDatepicker()
|
||||
}
|
||||
}
|
||||
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}]`)
|
||||
if (el) {
|
||||
el.remove()
|
||||
}
|
||||
hideDatepicker()
|
||||
}
|
||||
|
||||
function hideDatepicker() {
|
||||
const dateModal = document.getElementById("dateModal")
|
||||
dateModal.style.display = "none"
|
||||
datepicker?.destroy()
|
||||
|
||||
dateModal.removeEventListener("changeDate", dateChangeListener)
|
||||
document.removeEventListener("click", outSideDateModalClickListener)
|
||||
}
|
||||
|
||||
function showDatepicker() {
|
||||
let dateModal = document.getElementById("dateModal")
|
||||
hideAllModals()
|
||||
if (datepicker) hideDatepicker()
|
||||
dateModal = document.getElementById("dateModal")
|
||||
dateModal.style.display = "block"
|
||||
dateModal.style.top = getElementPosition(wrapper, { minSpace: 300, offsetAbove: 300 }).y
|
||||
dateModal.style.right = getElementPosition(wrapper, { minSpace: 300, offsetAbove: 300 }).x
|
||||
datepicker = new Datepicker(dateModal, {})
|
||||
if (dateValue) datepicker.setDate(dateValue)
|
||||
dateModal.addEventListener("changeDate", dateChangeListener)
|
||||
document.addEventListener("click", outSideDateModalClickListener)
|
||||
}
|
||||
</script>
|
||||
|
||||
<label
|
||||
bind:this={wrapper}
|
||||
id={id}
|
||||
class="custom-date-picker"
|
||||
>
|
||||
<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}
|
||||
>
|
||||
{new Date(dateValue).toLocaleDateString("de-DE")}
|
||||
</button>
|
||||
{:else}
|
||||
<div style="opacity: 0.75;">{placeholder}</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
data-cy="custom-date-picker-icon"
|
||||
aria-label="Toggle datepicker"
|
||||
class="btn transparent icon"
|
||||
on:click|preventDefault|stopPropagation={() => {
|
||||
hideAllModals()
|
||||
if (dateValue) dateValue = null
|
||||
else showDatepicker()
|
||||
}}
|
||||
>
|
||||
{#if !dateValue}
|
||||
<Icon
|
||||
path={mdiCalendarAccount}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
{:else}
|
||||
<Icon
|
||||
path={mdiCalendarRemove}
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
{/if}
|
||||
</button>
|
||||
</div>{:else if !editMode}
|
||||
{#if dateValue}
|
||||
<div class="no-input">
|
||||
{new Date(dateValue).toLocaleDateString("de-DE")}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="no-input">-</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style lang="less">
|
||||
@import "vanillajs-datepicker/css/datepicker.css";
|
||||
:global .hiddenscript {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.custom-date-picker:global {
|
||||
min-height: 60px;
|
||||
flex-grow: 1;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.btn.icon,
|
||||
.btn.text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-invers-100);
|
||||
|
||||
&.text {
|
||||
color: var(--text-invers-100);
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,342 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { mdiCameraOutline, mdiInformationOutline, mdiMovieOpenOutline } from "@mdi/js"
|
||||
import { apiBaseURL } from "../../../../../config"
|
||||
import Icon from "../../../widgets/Icon.svelte"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
import { newNotification } from "../../../../store"
|
||||
import MedialibImage from "../../../widgets/MedialibImage.svelte"
|
||||
import MedialibFile from "../../../widgets/MedialibFile.svelte"
|
||||
import Modal from "../../../Modal.svelte"
|
||||
import { tooltip } from "../../../../functions/utils"
|
||||
const dispatch = createEventDispatcher()
|
||||
export let id,
|
||||
classList: string = "",
|
||||
placeholder: string = "",
|
||||
disabled: boolean = false,
|
||||
helperText: string = "",
|
||||
value: FileField = null,
|
||||
collectionName: string,
|
||||
entryId: string,
|
||||
type: "image" | "video" = "image",
|
||||
noDelete: boolean = false,
|
||||
imgIsData = false
|
||||
let file: File, fileInput: HTMLInputElement
|
||||
let showApproveModal = false
|
||||
function onChange(forceUpload = false) {
|
||||
file = fileInput?.files[0]
|
||||
const maxFileSize = 150 * 1024 * 1024 // 150 MB in Bytes
|
||||
const supportedMimeTypes = [
|
||||
// Images
|
||||
"image/jpeg",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/webp",
|
||||
"image/bmp",
|
||||
"image/tiff",
|
||||
"image/svg+xml",
|
||||
"video/mp4",
|
||||
"video/webm",
|
||||
"video/ogg",
|
||||
"video/quicktime",
|
||||
]
|
||||
|
||||
const supportedFormats = `
|
||||
Unterstützte Bildformate: JPEG, PNG, GIF, WebP, BMP, TIFF, SVG.
|
||||
Unterstützte Videoformate: MP4, WebM, Ogg.
|
||||
`
|
||||
|
||||
const excludedMimeTypes = ["video/quicktime"]
|
||||
const excludedExtensions = ["mov"]
|
||||
|
||||
if (file) {
|
||||
const fileExtension = file?.name?.split(".")?.pop()?.toLowerCase()
|
||||
|
||||
if (
|
||||
(excludedMimeTypes.includes(file.type) || excludedExtensions.includes(fileExtension)) &&
|
||||
forceUpload !== true
|
||||
) {
|
||||
showApproveModal = true
|
||||
return
|
||||
}
|
||||
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}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const isSupported = supportedMimeTypes.includes(file.type)
|
||||
|
||||
if (!isSupported) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: `Der Dateityp "${file.type} wird nicht unterstützt. Bitte wähle eine unterstützte Datei aus. ${supportedFormats}`,
|
||||
})
|
||||
return
|
||||
}
|
||||
const reader = new FileReader()
|
||||
if (file.size > maxFileSize) {
|
||||
newNotification({
|
||||
class: "error",
|
||||
html: "Die Datei ist zu groß. Bitte wähle eine Datei unter 150 MB aus bzw. komprimiere die ausgewählte Datei.",
|
||||
})
|
||||
return
|
||||
}
|
||||
reader.addEventListener("load", function () {
|
||||
imgIsData = true
|
||||
const objectURL = URL.createObjectURL(file)
|
||||
value ={
|
||||
path: file.name,
|
||||
type: file.type,
|
||||
size: file.size,
|
||||
src: objectURL,
|
||||
}
|
||||
rerender = !rerender
|
||||
dispatch("change")
|
||||
})
|
||||
// @ts-ignore
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
let highlight = false
|
||||
let focused = false
|
||||
let rerender = false
|
||||
</script>
|
||||
|
||||
<label class="file file-input-label">
|
||||
<div class="headline">
|
||||
<span class:hasValue={true}>
|
||||
{placeholder}
|
||||
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<Icon
|
||||
path={type == 'image' ? mdiCameraOutline : mdiMovieOpenOutline}
|
||||
size="24px"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="file-input"
|
||||
class:focused={focused}
|
||||
class:highlight-container={highlight}
|
||||
role="button"
|
||||
aria-label="File upload"
|
||||
tabindex={0}
|
||||
on:dragenter|preventDefault={() => {
|
||||
highlight = true
|
||||
}}
|
||||
on:dragover|preventDefault={() => {
|
||||
highlight = true
|
||||
}}
|
||||
on:dragleave|preventDefault={() => {
|
||||
highlight = false
|
||||
}}
|
||||
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/*'}
|
||||
on:click|stopPropagation
|
||||
/>
|
||||
|
||||
<div
|
||||
class="filePreview"
|
||||
class:hasChildElement={!!value}
|
||||
>
|
||||
{#key rerender}
|
||||
{#if value}
|
||||
{#if type == "image"}
|
||||
{#if typeof value === "string"}
|
||||
<MedialibImage
|
||||
id={value}
|
||||
filter="l"
|
||||
/>
|
||||
{:else if imgIsData}
|
||||
<img
|
||||
src={value.src}
|
||||
alt={value.path}
|
||||
/>
|
||||
{:else if typeof value.src === "string" && value.src.includes(";base64,")}
|
||||
<img
|
||||
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}
|
||||
/>
|
||||
{/if}
|
||||
{:else if type == "video"}
|
||||
{#if typeof value == "string"}
|
||||
<MedialibFile
|
||||
id={value}
|
||||
let:entry
|
||||
let:src
|
||||
>
|
||||
<video>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src={src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</MedialibFile>
|
||||
{:else}
|
||||
<video
|
||||
controls
|
||||
preload="metadata"
|
||||
>
|
||||
<track kind="captions" />
|
||||
<source
|
||||
src={value.src}#t=0.1"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</video>
|
||||
{/if}
|
||||
{/if}
|
||||
<div>
|
||||
{#if noDelete}
|
||||
<button
|
||||
aria-label="Datei hochladen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
// change file by clicking input
|
||||
fileInput.click()
|
||||
}}
|
||||
>
|
||||
Austauschen
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
aria-label="Datei löschen"
|
||||
class="delete cta primary"
|
||||
on:click|stopPropagation|preventDefault={() => {
|
||||
value = null
|
||||
dispatch('change')
|
||||
}}
|
||||
>
|
||||
Löschen
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
{#if showApproveModal}
|
||||
<Modal
|
||||
show={true}
|
||||
on:close={() => {
|
||||
showApproveModal = false
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="title">Dateiformat Warnung</svelte:fragment>
|
||||
<p>
|
||||
Deine Datei wird von einigen Browsern, insbesondere von Google Chrome, nur eingeschränkt unterstützt. Wenn
|
||||
du die Datei dennoch hochladen möchtest, klicke auf "Fortfahren". Andernfalls empfehlen wir, das Video
|
||||
zunächst in eine MP4-Datei zu konvertieren. Dafür stehen zahlreiche kostenlose Online-Dienste zur Verfügung.
|
||||
</p>
|
||||
<div
|
||||
slot="footer"
|
||||
class="file-warning-footer"
|
||||
>
|
||||
<button
|
||||
class="btn cta primary"
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
}}
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
<button
|
||||
class="btn cta secondary"
|
||||
on:click={() => {
|
||||
showApproveModal = false
|
||||
onChange(true)
|
||||
}}>Fortfahren</button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
|
||||
<style
|
||||
lang="less"
|
||||
global
|
||||
>
|
||||
.file-input-label {
|
||||
.headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
span {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0px !important;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
.helperText {
|
||||
color: var(--bg-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fileContainer {
|
||||
height: fit-content;
|
||||
padding: 0.6rem 0px !important;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.filePreview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
min-height: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.hasChildElement {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
img,
|
||||
video {
|
||||
height: 180px;
|
||||
max-height: 180px;
|
||||
width: 100% !important;
|
||||
background-color: var(--bg-100);
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,143 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { mdiInformationOutline } from "@mdi/js"
|
||||
import { tooltip } from "../../../../functions/utils"
|
||||
import Icon from "../../../widgets/Icon.svelte"
|
||||
|
||||
export let value: any,
|
||||
id,
|
||||
classList: string = "",
|
||||
onChange: (e: Event) => void,
|
||||
type: "password" | "text" | "number" | "checkbox" | "noInput" | "textarea" | "select" = "text",
|
||||
placeholder: string = "",
|
||||
disabled: boolean = false,
|
||||
name = "",
|
||||
options: { name: string; value: string }[] = [],
|
||||
selectedOptionIndex = 0,
|
||||
helperText = ""
|
||||
|
||||
$: hasValue = Boolean(value)
|
||||
|
||||
const attributes ={
|
||||
id,
|
||||
class: classList,
|
||||
placeholder,
|
||||
name: name || id,
|
||||
disabled: !!disabled,
|
||||
}
|
||||
</script>
|
||||
|
||||
<label
|
||||
style=""
|
||||
class:textarea={type == 'textarea'}
|
||||
class:checkbox={type == 'checkbox'}
|
||||
>
|
||||
{#if type !== "checkbox"}
|
||||
<span class:hasValue={hasValue || type === 'noInput'}>{placeholder}</span>
|
||||
{/if}
|
||||
{#if type == "checkbox"}
|
||||
<input
|
||||
type="checkbox"
|
||||
{...attributes}
|
||||
on:change={onChange}
|
||||
bind:checked={value}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="checkit-span"
|
||||
aria-label="Toggle checkbox"
|
||||
tabindex={0}
|
||||
on:click={() => {
|
||||
value = !value
|
||||
setTimeout(() => {
|
||||
const event = new Event('change', { bubbles: true })
|
||||
document.getElementById(id)?.dispatchEvent(event)
|
||||
}, 10)
|
||||
}}
|
||||
on:keydown={(e) => {}}></button>
|
||||
{/if}
|
||||
{#if type == "password"}
|
||||
<input
|
||||
{...attributes}
|
||||
on:blur={onChange}
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
type="password"
|
||||
class="sentry-mask"
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "text"}
|
||||
<input
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "textarea"}
|
||||
<textarea
|
||||
on:blur={onChange}
|
||||
{...attributes}
|
||||
bind:value={value}
|
||||
on:change={onChange}></textarea>
|
||||
{/if}
|
||||
{#if type == "number"}
|
||||
<input
|
||||
on:blur={onChange}
|
||||
type="number"
|
||||
{...attributes}
|
||||
bind:value={value}
|
||||
on:change={onChange}
|
||||
/>
|
||||
{/if}
|
||||
{#if type == "noInput"}
|
||||
<div class="no-input">
|
||||
{#if id.includes("pass")}
|
||||
************
|
||||
{:else}
|
||||
{Boolean(value) ? value : "-"}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if type == "select"}
|
||||
<select
|
||||
on:change={onChange}
|
||||
{...attributes}
|
||||
bind:value={value}
|
||||
>
|
||||
{#each options as option, index}
|
||||
<option
|
||||
value={option.value}
|
||||
selected={index === selectedOptionIndex}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
{#if type !== "checkbox"}
|
||||
<span class="underline"></span>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
use:tooltip={{
|
||||
content: helperText,
|
||||
}}
|
||||
class="helperText"
|
||||
>
|
||||
<Icon path={mdiInformationOutline} />
|
||||
</div>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style lang="less">
|
||||
.checkbox {
|
||||
width: 1.2rem !important;
|
||||
}
|
||||
.helperText {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
color: var(--bg-100);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
@@ -1,102 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Select from "svelte-select/Select.svelte"
|
||||
export let options: { label: string; value: string }[] = [],
|
||||
selectedOption: { label: string; value: string } = null,
|
||||
value = "",
|
||||
placeholder: string,
|
||||
clearable = false,
|
||||
editMode = true
|
||||
|
||||
$: value = selectedOption?.value
|
||||
$: hasValue = Boolean(value)
|
||||
let focused = false
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click|stopPropagation={() => {
|
||||
focused = true
|
||||
}}
|
||||
>
|
||||
<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)}
|
||||
/>
|
||||
{:else if !editMode}
|
||||
<div class="no-input">{selectedOption?.label || "-"}</div>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<style lang="less">
|
||||
:global .svelte-select {
|
||||
background-color: var(--neutral-white) !important;
|
||||
resize: none !important;
|
||||
.value-container {
|
||||
input {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.selected-item {
|
||||
padding-top: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-item {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.selected-item {
|
||||
margin-left: 3px;
|
||||
height: auto;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
font-size: 1rem !important;
|
||||
border: 0px solid black !important;
|
||||
}
|
||||
* {
|
||||
border-left: 0px solid black !important;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
.item {
|
||||
&.active {
|
||||
background-color: transparent !important;
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.indicators {
|
||||
color: #ccc;
|
||||
|
||||
& > * {
|
||||
border-left: 1px solid #ccc !important;
|
||||
height: 40px !important;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.clear-select {
|
||||
color: var(--primary-200) !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
import type { SvelteComponent } from "svelte"
|
||||
import PredefinedBlock from "./PredefinedBlock.svelte"
|
||||
import Columns from "./Columns.svelte"
|
||||
import ProductListPreviewWidget from "../product/ProductListPreviewWidget.svelte"
|
||||
import NewsletterRow from "./NewsletterRow.svelte"
|
||||
import SplittedHomepage from "./SplittedHomepage.svelte"
|
||||
import ImproveYourselfDescription from "./ImproveYourselfDescription.svelte"
|
||||
import HomepageRow from "./HomepageRow.svelte"
|
||||
import ChapterPreview from "./ChapterPreview/ChapterPreview.svelte"
|
||||
import PreviewCard from "./RatingPreview/PreviewCard.svelte"
|
||||
import Steps from "./Steps.svelte"
|
||||
|
||||
const blocks: {
|
||||
[key: string]: {
|
||||
sectionClass: string
|
||||
component: typeof SvelteComponent<{ block?: ContentBlock }>
|
||||
}
|
||||
} = {
|
||||
default: {
|
||||
sectionClass: "",
|
||||
component: Columns,
|
||||
},
|
||||
columns: {
|
||||
sectionClass: "",
|
||||
component: Columns,
|
||||
},
|
||||
|
||||
predefinedBlock: {
|
||||
sectionClass: "predefined-block",
|
||||
component: PredefinedBlock,
|
||||
},
|
||||
productSlider: {
|
||||
sectionClass: "",
|
||||
component: ProductListPreviewWidget,
|
||||
},
|
||||
NewsletterRow: {
|
||||
sectionClass: "newsletter-row",
|
||||
component: NewsletterRow,
|
||||
},
|
||||
splittedHomepage: {
|
||||
sectionClass: "",
|
||||
component: SplittedHomepage,
|
||||
},
|
||||
improveYourselfDescription: {
|
||||
sectionClass: "ImproveYourselfDescription",
|
||||
component: ImproveYourselfDescription,
|
||||
},
|
||||
homepage: {
|
||||
sectionClass: "homepageRow",
|
||||
component: HomepageRow,
|
||||
},
|
||||
selfImprovementChapterPreview: {
|
||||
sectionClass: "chapterPreview",
|
||||
component: ChapterPreview,
|
||||
},
|
||||
ratingPreview: {
|
||||
sectionClass: "ratingPreview",
|
||||
component: PreviewCard,
|
||||
},
|
||||
stepNr: {
|
||||
sectionClass: "stepNr",
|
||||
component: Steps,
|
||||
},
|
||||
}
|
||||
|
||||
export default blocks
|
||||
Reference in New Issue
Block a user