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.

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

@ -3,7 +3,9 @@
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="container">
<div class="infos"> <div class="infos">
<h3>AllKids Erfurt</h3> <h3>AllKids Erfurt</h3>
<div class="infos-inner"> <div class="infos-inner">
@ -15,6 +17,7 @@
<div class="lower"> <div class="lower">
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p> <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>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
<p>Erstellt von: Webmakers GmbH</p>
</div> </div>
</div> </div>
<div class="social"> <div class="social">
@ -54,6 +57,7 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
<style lang="less"> <style lang="less">
@import "../assets/css/variables.less"; @import "../assets/css/variables.less";
@ -70,13 +74,18 @@
} }
} }
.footer { .footer {
margin-top: 60px; .container {
width: 100vw; max-width: calc(@body-maxwidth - min(9vw, 200px));
font-size: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
max-width: calc(@body-maxwidth - min(9vw, 200px)); width: 100%;
}
padding-top: 60px;
width: 100vw;
font-size: 16px;
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 {

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

@ -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>
{#if !isHomePage}
<div class="placeholder"></div> <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;

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

@ -49,9 +49,11 @@
</script> </script>
<!-- svelte-ignore a11y-img-redundant-alt --> <!-- svelte-ignore a11y-img-redundant-alt -->
<div class="homepage">
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div> <div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
{#if teaser} {#if teaser}
<div class="container" id="HP"> <div class="container" id="HP">
<div style="height: 105px;"></div>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<swiper-container <swiper-container
bind:this="{swiper}" bind:this="{swiper}"
@ -115,6 +117,8 @@
</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;
} }

41
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}
<div class="row-wrapper" on:click|stopPropagation>
<div class="middle-wrapper">
<Pagebuilder rowNr="{i}" row="{row}" rows="{site?.row}" siteId="{site?.id}" /> <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}
<div class="row-wrapper" on:click|stopPropagation>
<div class="middle-wrapper">
<Teaser site="{site}" index="{i}" /> <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>