Grit-Grenzdoerfer/wm-AllKids-tibi2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes
All checks were successful
deploy to production / deploy (push) Successful in 54s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer 2023-10-08 17:23:18 +00:00
parent 3da5d3aa71
commit 5d79bdd415
15 changed files with 249 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/media/balloons.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

11
frontend/src/App.svelte
View File

@ -97,6 +97,8 @@
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F384Z2JF20"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-F384Z2JF20"></script>
<script> <script>
window.dataLayer = window.dataLayer || [] window.dataLayer = window.dataLayer || []
@ -183,6 +185,14 @@
font-weight: 700; font-weight: 700;
src: url("./lib/assets/fonts/logo-font.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ src: url("./lib/assets/fonts/logo-font.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
} }
/* dekko-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Dekko";
font-style: normal;
font-weight: 400;
src: url("./lib/assets/fonts/dekko-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.socialMedia { .socialMedia {
display: none; display: none;
@ -203,7 +213,6 @@
main { main {
font-family: "Roboto Condensed", sans-serif; font-family: "Roboto Condensed", sans-serif;
overflow: hidden; overflow: hidden;
max-width: @body-maxwidth;
width: 100vw; width: 100vw;
overflow-x: hidden; overflow-x: hidden;
display: flex; display: flex;

BIN
frontend/src/lib/assets/fonts/dekko-v21-latin-regular.woff2 Normal file
View File

Binary file not shown.

105
frontend/src/lib/components/Footer.svelte
View File

@ -3,56 +3,60 @@
import { serviceNavigation, sites, darkMode, refresh } from "../stores" import { serviceNavigation, sites, darkMode, refresh } from "../stores"
</script> </script>
<div style="background-color: var(--background-color); height: 50px;width: 100%; z-index: 10"></div>
<div class="footer"> <div class="footer">
<div class="infos"> <div class="container">
<h3>AllKids Erfurt</h3> <div class="infos">
<div class="infos-inner"> <h3>AllKids Erfurt</h3>
<div class="upper"> <div class="infos-inner">
<p>Inh. Grit Grenzdörfer</p> <div class="upper">
<p>Eichenstraße 8</p> <p>Inh. Grit Grenzdörfer</p>
<p>99084 Erfurt</p> <p>Eichenstraße 8</p>
<p>99084 Erfurt</p>
</div>
<div class="lower">
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
<p>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
<p>Erstellt von: Webmakers GmbH</p>
</div>
</div> </div>
<div class="lower"> <div class="social">
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p> <a href="https://www.facebook.com/allkids.erfurt/">
<p>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p> <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z"
fill="var(--normal-font-color)"></path>
</svg>
</a>
<button
class="darklight"
on:click="{() => {
const body = document.querySelector('body')
if (body) {
body.classList.toggle('darkTheme')
}
$darkMode = !$darkMode
}}"
>
{#if !$darkMode}
<img src="/media/dark.svg" alt="darkmode" />
{:else}
<img src="/media/light.svg" alt="lightmode" />
{/if}
</button>
</div> </div>
</div> </div>
<div class="social"> <div class="services">
<a href="https://www.facebook.com/allkids.erfurt/"> {#each $serviceNavigation?.elemente || [] as service, i (i)}
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"> <button
<path on:click="{() => {
d="M18 3.06c-8.25 0-15 6.735-15 15.03 0 7.5 5.49 13.725 12.66 14.85v-10.5h-3.81v-4.35h3.81v-3.315c0-3.765 2.235-5.835 5.67-5.835 1.635 0 3.345.285 3.345.285v3.705h-1.89c-1.86 0-2.445 1.155-2.445 2.34v2.82h4.17l-.675 4.35H20.34v10.5A15 15 0 0 0 33 18.09c0-8.295-6.75-15.03-15-15.03z" navigate(`${$sites[service.seite || '']?.path}`)
fill="var(--normal-font-color)"></path> $refresh = !$refresh
</svg> }}">{service?.name}</button
</a> >
<button {/each}
class="darklight"
on:click="{() => {
const body = document.querySelector('body')
if (body) {
body.classList.toggle('darkTheme')
}
$darkMode = !$darkMode
}}"
>
{#if !$darkMode}
<img src="/media/dark.svg" alt="darkmode" />
{:else}
<img src="/media/light.svg" alt="lightmode" />
{/if}
</button>
</div> </div>
</div> </div>
<div class="services">
{#each $serviceNavigation?.elemente || [] as service, i (i)}
<button
on:click="{() => {
navigate(`${$sites[service.seite || '']?.path}`)
$refresh = !$refresh
}}">{service?.name}</button
>
{/each}
</div>
</div> </div>
<style lang="less"> <style lang="less">
@ -70,13 +74,18 @@
} }
} }
.footer { .footer {
margin-top: 60px; .container {
max-width: calc(@body-maxwidth - min(9vw, 200px));
display: flex;
justify-content: space-between;
width: 100%;
}
padding-top: 60px;
width: 100vw; width: 100vw;
font-size: 16px; font-size: 16px;
display: flex;
justify-content: space-between;
max-width: calc(@body-maxwidth - min(9vw, 200px));
background-color: var(--hover-color); background-color: var(--hover-color);
z-index: 10;
padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px); padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
} }
.infos { .infos {

9
frontend/src/lib/components/header/Header.svelte
View File

@ -2,7 +2,7 @@
import { onMount } from "svelte" import { onMount } from "svelte"
import DesktopHeader from "./desktop.svelte" import DesktopHeader from "./desktop.svelte"
import MobileHeader from "./mobile.svelte" import MobileHeader from "./mobile.svelte"
let background: boolean let background: boolean
let isHomePage: boolean let isHomePage: boolean
let scrolled: boolean = false let scrolled: boolean = false
@ -41,6 +41,7 @@
} }
}) })
let show = false let show = false
$: console.log(show)
</script> </script>
<main class="headercontainer"> <main class="headercontainer">
@ -49,11 +50,13 @@
<MobileHeader bind:show="{show}" /> <MobileHeader bind:show="{show}" />
</div> </div>
<div class="desktop-header"> <div class="desktop-header">
<DesktopHeader /> <DesktopHeader bind:show="{show}" />
</div> </div>
</nav> </nav>
</main> </main>
<div class="placeholder"></div> {#if !isHomePage}
<div class="placeholder"></div>
{/if}
<style global lang="less"> <style global lang="less">
@import "../../assets/css/main.less"; @import "../../assets/css/main.less";

24
frontend/src/lib/components/header/desktop.svelte
View File

@ -3,9 +3,11 @@
import { apiBaseURL } from "../../../config" import { apiBaseURL } from "../../../config"
import { navigate } from "svelte-routing" import { navigate } from "svelte-routing"
export let show = false
function changeStateOfSite(menuOn: boolean) { function changeStateOfSite(menuOn: boolean) {
let siteContainer = document.body let siteContainer = document.body
show = menuOn
console.log("TEST")
if (menuOn) siteContainer.style.overflow = "hidden" if (menuOn) siteContainer.style.overflow = "hidden"
else siteContainer.style.overflow = "initial" else siteContainer.style.overflow = "initial"
} }
@ -63,14 +65,14 @@
}}" }}"
> >
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/Radfahrer.svg" alt="logo" /> <img src="/media/MädchenmitBlume.svg" alt="logo" />
</button> </button>
<div class="logo-text"> <div class="logo-text">
<p id="upper"><span class="yellow">ALL</span> <span class="red">KIDS</span></p> <p id="upper"><span class="yellow">all</span> <span class="red">kids</span></p>
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p> <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
</div> </div>
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/MädchenmitBlume.svg" alt="logo" /> <img src="/media/Radfahrer.svg" alt="logo" />
</button> </button>
</button> </button>
<ul class="menuitem-container"> <ul class="menuitem-container">
@ -205,6 +207,7 @@
height: 60px; height: 60px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: -15px;
.logo-text { .logo-text {
padding: 0px 10px; padding: 0px 10px;
p { p {
@ -213,23 +216,24 @@
} }
& > #upper { & > #upper {
span { span {
font-family: "Grandstander" !important; font-family: "Dekko" !important;
font-size: 42px; font-size: 60px;
font-weight: 700; font-weight: 700;
word-spacing: 5px; word-spacing: 5px;
letter-spacing: 4px; letter-spacing: 4px;
&.red { &.red {
color: red; color: rgb(184, 16, 16);
} }
&.yellow { &.yellow {
color: yellow; color: rgb(184, 16, 16);
} }
} }
} }
& > #lower { & > #lower {
font-size: 13px; font-size: 14px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
font-weight: bold; font-weight: bold;
margin-top: -17px;
color: orange; color: orange;
font-family: "Grandstander" !important; font-family: "Grandstander" !important;
} }
@ -239,6 +243,8 @@
} }
.img-logo-container { .img-logo-container {
height: 100%; height: 100%;
position: relative;
top: 20px;
img { img {
height: 100%; height: 100%;
width: auto; width: auto;

20
frontend/src/lib/components/header/mobile.svelte
View File

@ -61,14 +61,14 @@
}}" }}"
> >
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/Radfahrer.svg" alt="logo" /> <img src="/media/MädchenmitBlume.svg" alt="logo" />
</button> </button>
<div class="logo-text"> <div class="logo-text">
<p id="upper"><span class="yellow">ALL</span> <span class="red">KIDS</span></p> <p id="upper"><span class="yellow">all</span> <span class="red">kids</span></p>
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p> <p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
</div> </div>
<button class="img-logo-container"> <button class="img-logo-container">
<img src="/media/MädchenmitBlume.svg" alt="logo" /> <img src="/media/Radfahrer.svg" alt="logo" />
</button> </button>
</button> </button>
<button <button
@ -242,6 +242,7 @@
height: 38px; height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: -15px;
.logo-text { .logo-text {
padding: 0px 10px; padding: 0px 10px;
p { p {
@ -250,22 +251,23 @@
} }
& > #upper { & > #upper {
span { span {
font-family: "Grandstander" !important; font-family: "Dekko" !important;
font-size: 30px; font-size: 45px;
font-weight: 700; font-weight: 700;
word-spacing: 5px; word-spacing: 5px;
letter-spacing: 4px; letter-spacing: 4px;
&.red { &.red {
color: red; color: rgb(184, 16, 16);
} }
&.yellow { &.yellow {
color: yellow; color: rgb(184, 16, 16);
} }
} }
} }
& > #lower { & > #lower {
font-size: 10px; font-size: 11px;
letter-spacing: 0.4px; letter-spacing: 0.4px;
margin-top: -15px;
font-weight: bold; font-weight: bold;
color: orange; color: orange;
font-family: "Grandstander" !important; font-family: "Grandstander" !important;
@ -276,6 +278,8 @@
} }
.img-logo-container { .img-logo-container {
height: 100%; height: 100%;
position: relative;
top: 15px;
img { img {
height: 100%; height: 100%;
width: auto; width: auto;

134
frontend/src/lib/components/pagebuilder/Homepage.svelte
View File

@ -49,72 +49,76 @@
</script> </script>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div> <div class="homepage">
{#if teaser} <div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
<div class="container" id="HP"> {#if teaser}
<!-- svelte-ignore a11y-no-static-element-interactions --> <div class="container" id="HP">
<swiper-container <div style="height: 105px;"></div>
bind:this="{swiper}" <!-- svelte-ignore a11y-no-static-element-interactions -->
slides-per-view="1" <swiper-container
loop="{true}" bind:this="{swiper}"
direction="horizontal" slides-per-view="1"
effect="slide" loop="{true}"
navigation="{true}" direction="horizontal"
init="{false}" effect="slide"
autoplay="{{ navigation="{true}"
delay: 4000, // 5000ms = 5s init="{false}"
pauseOnMouseEnter: true, autoplay="{{
}}" delay: 4000, // 5000ms = 5s
speed="600" pauseOnMouseEnter: true,
on:focus }}"
on:blur speed="600"
on:slidechange="{() => handleSlideChange()}" on:focus
on:mouseenter="{() => handleMouseOver()}" on:blur
on:mouseleave="{() => handleMouseOut()}" on:slidechange="{() => handleSlideChange()}"
class="relative" on:mouseenter="{() => handleMouseOver()}"
> on:mouseleave="{() => handleMouseOut()}"
{#each teasers as teaser} class="relative"
{#if teaser?.teaser?.showTeaser} >
<swiper-slide class="relative"> {#each teasers as teaser}
<div class="inner-container"> {#if teaser?.teaser?.showTeaser}
<div class="titles"> <swiper-slide class="relative">
<h2>{teaser?.teaser?.subTitle}</h2> <div class="inner-container">
<h1> <div class="titles">
{teaser?.teaser?.teaserTitle} <h2>{teaser?.teaser?.subTitle}</h2>
<div class="underline"></div> <h1>
</h1> {teaser?.teaser?.teaserTitle}
</div> <div class="underline"></div>
<div class="description"> </h1>
<div class="placeholder"></div> </div>
<div <div class="description">
style=" display: flex; <div class="placeholder"></div>
<div
style=" display: flex;
flex-direction: column; flex-direction: column;
align-items: start; align-items: start;
gap: 20px;" gap: 20px;"
> >
<div style="text-align: left;"> <div style="text-align: left;">
<p>{@html teaser?.teaser?.teaserDescription}</p> <p>{@html teaser?.teaser?.teaserDescription}</p>
</div> </div>
<button <button
on:click="{() => navigate(teaser.path)}" on:click="{() => navigate(teaser.path)}"
style=" style="
font-weight: bold; font-weight: bold;
color: var(--link-font-color); color: var(--link-font-color);
width: fit-content; width: fit-content;
border-top: 3px solid var(--link-font-color); border-top: 3px solid var(--link-font-color);
margin-top: 3rem; margin-top: 3rem;
">MEHR</button ">MEHR</button
> >
</div>
<div class="placeholder"></div>
</div> </div>
<div class="placeholder"></div>
</div> </div>
</div> </swiper-slide>
</swiper-slide> {/if}
{/if} {/each}
{/each} </swiper-container>
</swiper-container> </div>
</div> {/if}
{/if} </div>
<div class="homepage-placeholder"></div>
<style lang="less" global> <style lang="less" global>
@import "../../assets/css/variables.less"; @import "../../assets/css/variables.less";
@ -123,6 +127,24 @@
@import "swiper/modules/navigation/navigation"; @import "swiper/modules/navigation/navigation";
@import "swiper/modules/pagination/pagination"; @import "swiper/modules/pagination/pagination";
@import "../../assets/css/SwiperStylesHP.less"; @import "../../assets/css/SwiperStylesHP.less";
.homepage-placeholder {
position: relative;
width: 100vw;
background-color: transparent;
height: calc(100vh + 105px);
}
.homepage {
height: 100vh;
left: 0px;
right: 0px;
position: fixed;
z-index: 1;
display: flex;
justify-content: center;
width: 100vw !important;
align-items: center;
}
.background-img { .background-img {
position: absolute; position: absolute;
top: 0; top: 0;
@ -151,7 +173,7 @@
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: rgba(48, 47, 47, 0.242); background: rgba(48, 47, 47, 0.612);
z-index: 2; /* Higher than the image */ z-index: 2; /* Higher than the image */
} }
.container#HP { .container#HP {

5
frontend/src/lib/components/pagebuilder/banner.svelte
View File

@ -13,7 +13,6 @@
} }
onMount(() => { onMount(() => {
isExpanded = true
interval = setInterval(() => { interval = setInterval(() => {
currentIndex = (currentIndex + 1) % $banner.length currentIndex = (currentIndex + 1) % $banner.length
}, 7000) }, 7000)
@ -73,9 +72,9 @@
.toggle { .toggle {
position: absolute; position: absolute;
left: 50%; left: 0%;
background-color: var(--banner-color); background-color: var(--banner-color);
transform: translate(-50%, -100%); transform: translate(2%, -100%);
border-radius: 10px; border-radius: 10px;
} }
} }

2
frontend/src/lib/components/pagebuilder/form/Formular.svelte
View File

@ -107,7 +107,7 @@
<Form formRow="{formRow}" formValues="{formValues}" index="{i}" /> <Form formRow="{formRow}" formValues="{formValues}" index="{i}" />
{/if} {/if}
{/each} {/each}
<div class="row additional"> <div class="row additional" style="padding: 0px;">
<div class="data-protection"> <div class="data-protection">
<label bind:this="{$formValues[`agreement_label`]}"> <label bind:this="{$formValues[`agreement_label`]}">
<input <input

7
frontend/src/lib/components/pagebuilder/pagebuilder.svelte
View File

@ -23,6 +23,9 @@
} }
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<main class="row" name="{row.title}" class:max-width="{getRowClass(row) === 'max-width'}" id="{`RowNr` + rowNr}"> <main class="row" name="{row.title}" class:max-width="{getRowClass(row) === 'max-width'}" id="{`RowNr` + rowNr}">
{#if row.title} {#if row.title}
<h3 class="row-title" class:no-margin="{rowNr == 0}">{row?.title || ""}</h3> <h3 class="row-title" class:no-margin="{rowNr == 0}">{row?.title || ""}</h3>
@ -80,12 +83,14 @@
.row { .row {
width: 100%; width: 100%;
padding: 0px 0px 15px 0; padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
max-width: @body-small-maxwidth; max-width: @body-small-maxwidth;
background-color: var(--background-color);
ul { ul {
list-style-type: none; /* Remove default bullet points */ list-style-type: none; /* Remove default bullet points */
padding: 0; padding: 0;

4
frontend/src/lib/components/pagebuilder/teaser.svelte
View File

@ -26,7 +26,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2vw; gap: 2vw;
width: 100%; padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
max-width: @body-small-maxwidth;
@media @desktop { @media @desktop {
flex-direction: row; flex-direction: row;
} }

45
frontend/src/routes/HomePage.svelte
View File

@ -20,12 +20,29 @@
<main> <main>
{#if site != undefined} {#if site != undefined}
<Homepage /> <Homepage />
<div class="balloons">
<div style=" background-color: var(--background-color)"></div>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#each site.row as row, i} {#each site.row as row, i}
<Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" /> <div class="row-wrapper" on:click|stopPropagation>
<div class="middle-wrapper">
<Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" />
</div>
</div>
{/each} {/each}
{#each Object.values($sites) as site, i} {#each Object.values($sites) as site, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if site.showTeaser} {#if site.showTeaser}
<Teaser site="{site}" index="{i}" /> <div class="row-wrapper" on:click|stopPropagation>
<div class="middle-wrapper">
<Teaser site="{site}" index="{i}" />
</div>
</div>
{/if} {/if}
{/each} {/each}
{/if} {/if}
@ -35,10 +52,30 @@
main { main {
min-height: 80vh; min-height: 80vh;
width: 100%; width: 100%;
padding: 0px min(4.5vw, 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: min(10vw, 60px); }
.balloons {
background-image: url("../../media/balloons.svg");
background-repeat: repeat-x; /* Horizontal repetition */
background-size: 150px 150px;
width: 100%;
z-index: 10;
height: 140px;
}
.row-wrapper {
background-color: var(--background-color);
position: relative;
height: 100%;
z-index: 2;
width: 100%;
padding-top: min(10vw, 60px);
& .middle-wrapper {
width: 100%;
display: flex;
justify-content: center;
}
} }
</style> </style>

1
frontend/src/routes/NotFound.svelte
View File

@ -18,7 +18,6 @@
<button <button
on:click="{() => { on:click="{() => {
navigate('/') navigate('/')
$refresh = !$refresh
}}" }}"
class="back-home">Zurück zur Startseite</button class="back-home">Zurück zur Startseite</button
> >

3
frontend/src/routes/Site.svelte
View File

@ -64,9 +64,10 @@
main { main {
min-height: 70vh; min-height: 70vh;
width: 100%; width: 100%;
padding: 0px min(4.5vw, 100px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: var(--background-color);
z-index: 2;
} }
</style> </style>