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) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F384Z2JF20"></script>
<script>
window.dataLayer = window.dataLayer || []
@ -183,6 +185,14 @@
font-weight: 700;
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 {
display: none;
@ -203,7 +213,6 @@
main {
font-family: "Roboto Condensed", sans-serif;
overflow: hidden;
max-width: @body-maxwidth;
width: 100vw;
overflow-x: hidden;
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"
</script>
<div style="background-color: var(--background-color); height: 50px;width: 100%; z-index: 10"></div>
<div class="footer">
<div class="container">
<div class="infos">
<h3>AllKids Erfurt</h3>
<div class="infos-inner">
@ -15,6 +17,7 @@
<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 class="social">
@ -53,6 +56,7 @@
>
{/each}
</div>
</div>
</div>
<style lang="less">
@ -70,13 +74,18 @@
}
}
.footer {
margin-top: 60px;
width: 100vw;
font-size: 16px;
.container {
max-width: calc(@body-maxwidth - min(9vw, 200px));
display: flex;
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);
z-index: 10;
padding: min(4.5vw, 100px) min(4.5vw, 100px) 0px min(4.5vw, 100px);
}
.infos {

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

@ -41,6 +41,7 @@
}
})
let show = false
$: console.log(show)
</script>
<main class="headercontainer">
@ -49,11 +50,13 @@
<MobileHeader bind:show="{show}" />
</div>
<div class="desktop-header">
<DesktopHeader />
<DesktopHeader bind:show="{show}" />
</div>
</nav>
</main>
<div class="placeholder"></div>
{#if !isHomePage}
<div class="placeholder"></div>
{/if}
<style global lang="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 { navigate } from "svelte-routing"
export let show = false
function changeStateOfSite(menuOn: boolean) {
let siteContainer = document.body
show = menuOn
console.log("TEST")
if (menuOn) siteContainer.style.overflow = "hidden"
else siteContainer.style.overflow = "initial"
}
@ -63,14 +65,14 @@
}}"
>
<button class="img-logo-container">
<img src="/media/Radfahrer.svg" alt="logo" />
<img src="/media/MädchenmitBlume.svg" alt="logo" />
</button>
<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>
</div>
<button class="img-logo-container">
<img src="/media/MädchenmitBlume.svg" alt="logo" />
<img src="/media/Radfahrer.svg" alt="logo" />
</button>
</button>
<ul class="menuitem-container">
@ -205,6 +207,7 @@
height: 60px;
display: flex;
align-items: center;
margin-top: -15px;
.logo-text {
padding: 0px 10px;
p {
@ -213,23 +216,24 @@
}
& > #upper {
span {
font-family: "Grandstander" !important;
font-size: 42px;
font-family: "Dekko" !important;
font-size: 60px;
font-weight: 700;
word-spacing: 5px;
letter-spacing: 4px;
&.red {
color: red;
color: rgb(184, 16, 16);
}
&.yellow {
color: yellow;
color: rgb(184, 16, 16);
}
}
}
& > #lower {
font-size: 13px;
font-size: 14px;
letter-spacing: 0.4px;
font-weight: bold;
margin-top: -17px;
color: orange;
font-family: "Grandstander" !important;
}
@ -239,6 +243,8 @@
}
.img-logo-container {
height: 100%;
position: relative;
top: 20px;
img {
height: 100%;
width: auto;

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

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

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

@ -49,9 +49,11 @@
</script>
<!-- svelte-ignore a11y-img-redundant-alt -->
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
{#if teaser}
<div class="homepage">
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
{#if teaser}
<div class="container" id="HP">
<div style="height: 105px;"></div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<swiper-container
bind:this="{swiper}"
@ -114,7 +116,9 @@
{/each}
</swiper-container>
</div>
{/if}
{/if}
</div>
<div class="homepage-placeholder"></div>
<style lang="less" global>
@import "../../assets/css/variables.less";
@ -123,6 +127,24 @@
@import "swiper/modules/navigation/navigation";
@import "swiper/modules/pagination/pagination";
@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 {
position: absolute;
top: 0;
@ -151,7 +173,7 @@
left: 0;
width: 100vw;
height: 100vh;
background: rgba(48, 47, 47, 0.242);
background: rgba(48, 47, 47, 0.612);
z-index: 2; /* Higher than the image */
}
.container#HP {

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

@ -13,7 +13,6 @@
}
onMount(() => {
isExpanded = true
interval = setInterval(() => {
currentIndex = (currentIndex + 1) % $banner.length
}, 7000)
@ -73,9 +72,9 @@
.toggle {
position: absolute;
left: 50%;
left: 0%;
background-color: var(--banner-color);
transform: translate(-50%, -100%);
transform: translate(2%, -100%);
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}" />
{/if}
{/each}
<div class="row additional">
<div class="row additional" style="padding: 0px;">
<div class="data-protection">
<label bind:this="{$formValues[`agreement_label`]}">
<input

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

@ -23,6 +23,9 @@
}
</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}">
{#if row.title}
<h3 class="row-title" class:no-margin="{rowNr == 0}">{row?.title || ""}</h3>
@ -80,12 +83,14 @@
.row {
width: 100%;
padding: 0px 0px 15px 0;
padding: 15px min(4.5vw, 100px) 0px min(4.5vw, 100px);
display: flex;
flex-direction: column;
align-items: center;
max-width: @body-small-maxwidth;
background-color: var(--background-color);
ul {
list-style-type: none; /* Remove default bullet points */
padding: 0;

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

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

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

@ -20,12 +20,29 @@
<main>
{#if site != undefined}
<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}
<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 Object.values($sites) as site, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if site.showTeaser}
<div class="row-wrapper" on:click|stopPropagation>
<div class="middle-wrapper">
<Teaser site="{site}" index="{i}" />
</div>
</div>
{/if}
{/each}
{/if}
@ -35,10 +52,30 @@
main {
min-height: 80vh;
width: 100%;
padding: 0px min(4.5vw, 100px);
display: flex;
flex-direction: column;
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>

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

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

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

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