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 1m22s
Details

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-10-06 10:18:31 +00:00
parent 1ec2cc3ef1
commit 3da5d3aa71
15 changed files with 270 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { navigate } from "svelte-routing"
import { serviceNavigation, sites, darkMode } from "../stores"
import { serviceNavigation, sites, darkMode, refresh } from "../stores"
</script>
<div class="footer">
@@ -14,7 +14,7 @@
</div>
<div class="lower">
<p>Tel.: <a href="tel:+491784124555">0178 4124555</a></p>
<p>Email: <a href="mailto:kiro0206@icloud.com">kiro0206@icloud.com</a></p>
<p>Email: <a href="allkids.erfurt@gmail.com">allkids.erfurt@gmail.com</a></p>
</div>
</div>
<div class="social">
@@ -48,6 +48,7 @@
<button
on:click="{() => {
navigate(`${$sites[service.seite || '']?.path}`)
$refresh = !$refresh
}}">{service?.name}</button
>
{/each}

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

@@ -1,12 +1,52 @@
<script lang="ts">
import { onMount } from "svelte"
import DesktopHeader from "./desktop.svelte"
import MobileHeader from "./mobile.svelte"
let background: boolean
let isHomePage: boolean
let scrolled: boolean = false
// Initial background state
function updateBackground() {
background = !isHomePage || scrolled
}
// Update isHomePage based on current path
function checkHomePage() {
isHomePage = window.location.pathname === "/"
updateBackground()
}
// Scroll event listener to check if scrolled 100vh
function checkScroll() {
const scrollHeight = window.innerHeight // 100vh in pixels
scrolled = window.scrollY >= scrollHeight
checkHomePage()
}
onMount(() => {
// Initial check
checkHomePage()
checkScroll()
// Listen for changes
window.addEventListener("scroll", checkScroll)
window.addEventListener("popstate", checkHomePage)
return () => {
// Cleanup event listeners
window.removeEventListener("scroll", checkScroll)
window.removeEventListener("popstate", checkHomePage)
}
})
let show = false
</script>
<main class="headercontainer">
<nav>
<nav class="trans" class:bg="{background || show}">
<div class="mobile-header">
<MobileHeader />
<MobileHeader bind:show="{show}" />
</div>
<div class="desktop-header">
<DesktopHeader />
@@ -18,6 +58,13 @@
<style global lang="less">
@import "../../assets/css/main.less";
@import "../../assets/css/variables.less";
.trans {
background-color: transparent;
transition: background-color 0.5s ease-in-out;
}
.bg {
background-color: var(--background-color);
}
@desktop: ~"only screen and (min-width: 1440px)";
.HP {
@@ -37,7 +84,6 @@
position: relative;
height: 100%;
width: 100%;
}
.placeholder {
height: 105px;
@@ -51,7 +97,6 @@
width: 100%;
color: var(--normal-font-color);
height: 105px;
}
@media @desktop {
.headercontainer,

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { darkMode, navigation, sites } from "../../stores"
import { darkMode, navigation, refresh, sites } from "../../stores"
import { apiBaseURL } from "../../../config"
import { navigate } from "svelte-routing"
@@ -58,15 +58,20 @@
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate('/')
$refresh = !$refresh
}}"
>
<button class="img-logo-container">
<img src="/media/logo.svg" alt="logo" />
<img src="/media/Radfahrer.svg" alt="logo" />
</button>
<div class="logo-text">
<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" />
</button>
</button>
<ul class="menuitem-container">
{#if $navigation?.elemente}
@@ -82,6 +87,7 @@
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate(`${$sites[site.seite || ''].path}`)
$refresh = !$refresh
}
}
}}"
@@ -162,6 +168,7 @@
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate(`${$sites[submenu_point.seite || '']?.path}`)
$refresh = !$refresh
}}">{submenu_point?.name}</button
>
</li>
@@ -199,15 +206,18 @@
display: flex;
align-items: center;
.logo-text {
padding: 0px 10px;
p {
white-space: nowrap;
text-align: left;
}
& > #upper {
span {
font-family: "Orbitron" !important;
font-size: 31px;
font-family: "Grandstander" !important;
font-size: 42px;
font-weight: 700;
word-spacing: 5px;
letter-spacing: 4px;
&.red {
color: red;
}
@@ -218,8 +228,10 @@
}
& > #lower {
font-size: 13px;
letter-spacing: 0.4px;
font-weight: bold;
color: orange;
font-family: "Grandstander" !important;
}
font-weight: bold;
font-size: 1.2rem;
@@ -235,7 +247,6 @@
}
}
div {
margin-right: 10%;
}
.menuitem-container {
display: flex;

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

@@ -1,13 +1,14 @@
<script lang="ts">
import { navigation, sites } from "../../stores"
import { navigation, refresh, sites } from "../../stores"
import { onMount } from "svelte"
import { apiBaseURL } from "../../../config"
import { navigate } from "svelte-routing"
export let show = false
let images: HTMLImageElement[] = []
function changeStateOfSite(menuOn: boolean) {
let element = document.getElementById("menu") as HTMLElement
element.classList.toggle("show-menu")
show = !show
let body = document.body
if (menuOn) {
body.style.overflow = "initial"
@@ -56,15 +57,19 @@
class="logo-container"
on:click="{() => {
navigate('/')
$refresh = !$refresh
}}"
>
<button class="img-logo-container">
<img src="/media/logo.svg" alt="logo" />
<img src="/media/Radfahrer.svg" alt="logo" />
</button>
<div class="logo-text">
<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" />
</button>
</button>
<button
class="button-three"
@@ -100,6 +105,7 @@
navigate(`${$sites[link.seite ?? '']?.path}`)
let element = document.getElementById('menu')
if (element) changeStateOfSite(element.classList.contains('show-menu'))
$refresh = !$refresh
return
}
let element = e.currentTarget
@@ -132,6 +138,7 @@
let element = document.getElementById('menu')
if (element)
changeStateOfSite(element.classList.contains('show-menu'))
$refresh = !$refresh
}}">{submenu.name}</button
>
</li>
@@ -198,7 +205,6 @@
position: relative;
width: 100%;
height: 100vh;
background-color: var(--background-color);
ul {
.header {
@@ -208,7 +214,7 @@
justify-content: space-between;
height: 105px;
.button-three {
--button-color: var(--normal-font-color);
--button-color: var(--hover-color);
overflow: hidden;
background: transparent;
}
@@ -237,15 +243,18 @@
display: flex;
align-items: center;
.logo-text {
padding: 0px 10px;
p {
white-space: nowrap;
text-align: left;
}
& > #upper {
span {
font-family: "Orbitron" !important;
font-size: 31px;
font-family: "Grandstander" !important;
font-size: 30px;
font-weight: 700;
word-spacing: 5px;
letter-spacing: 4px;
&.red {
color: red;
}
@@ -255,9 +264,11 @@
}
}
& > #lower {
font-size: 13px;
font-size: 10px;
letter-spacing: 0.4px;
font-weight: bold;
color: orange;
font-family: "Grandstander" !important;
}
font-weight: bold;
font-size: 1.2rem;

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

@@ -48,6 +48,8 @@
let teaser = teasers[0]
</script>
<!-- svelte-ignore a11y-img-redundant-alt -->
<div class="background-img"><img src="media/HP.webp" alt="bg-image" /></div>
{#if teaser}
<div class="container" id="HP">
<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -121,7 +123,37 @@
@import "swiper/modules/navigation/navigation";
@import "swiper/modules/pagination/pagination";
@import "../../assets/css/SwiperStylesHP.less";
.background-img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.background-img {
position: absolute;
}
.background-img img {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: 1;
}
.background-img::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(48, 47, 47, 0.242);
z-index: 2; /* Higher than the image */
}
.container#HP {
padding: 20px 0px 150px 0px;
min-height: 100vh;
@@ -135,6 +167,9 @@
}
.inner-container {
display: flex;
padding: 15px;
border-radius: 10px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
@@ -175,6 +210,7 @@
.description {
display: flex;
flex-direction: row;
color: var(--opposite-font-color);
& > div {
flex: 0 0 5%;
min-width: 0px;

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

@@ -42,8 +42,8 @@
justify-content: center;
bottom: 10px;
right: 10px;
height: 2rem;
width: 2rem;
height: 36px;
width: 36px;
border-radius: 50%;
z-index: 1000;
background-color: var(--link-font-color);