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

22
frontend/src/App.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { location, navigation, sites, banner, serviceNavigation } from "./lib/stores"
import { location, navigation, sites, banner, serviceNavigation, refresh } from "./lib/stores"
import Header from "./lib/components/header/Header.svelte"
import "fluent-svelte/theme.css"
@@ -92,6 +92,8 @@
<svelte:head>
{#if cookiesAllowed}
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
<!-- Google tag (gtag.js) -->
@@ -116,7 +118,7 @@
<HomePage />
</Route>
<Route path="/*path" let:params>
{#key $sites}
{#key $sites && $refresh}
<SiteComp path="{params.path}" />{/key}
</Route>
<Route>
@@ -165,6 +167,22 @@
font-weight: 900;
src: url("./lib/assets/fonts/orbitron-v31-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: "Orbitron";
font-style: normal;
font-weight: 900;
src: url("./lib/assets/fonts/orbitron-v31-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* grandstander-700italic - 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: "Grandstander";
font-style: italic;
font-weight: 700;
src: url("./lib/assets/fonts/logo-font.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.socialMedia {
display: none;

8
frontend/src/lib/assets/css/main.less
View File

@@ -6,22 +6,22 @@
--normal-font-color-80: rgba(51, 51, 51, 0.8);
--normal-font-color-50: rgba(51, 51, 51, 0.5);
--normal-font-color-30: rgba(51, 51, 51, 0.3);
--hover-color: rgb(197, 173, 173);
--opposite-font-color: rgb(235, 221, 221);
--hover-color: rgb(171, 137, 137);
--heading-font-color: #ff0000;
--top-heading-font-color: rgb(255, 165, 0);
--top-heading-font-color: rgb(198, 129, 0);
--link-font-color: rgb(255, 165, 0);
--banner-color: #ff0000;
--opposite-bg-color: #000;
--opposite-bg-color-80: rgba(24, 24, 24, 0.8);
--opposite-bg-color-5: rgba(24, 24, 24, 0.05);
--opposite-bg-color-10: rgba(24, 24, 24, 0.1);
}
body.darkTheme {
--background-color: #1a1a1a; /* softer than #121212 */
--background-color-90: rgba(26, 26, 26, 0.9);
--normal-font-color: #d1d1d1; /* off-white, less harsh */
--normal-font-color-80: rgba(209, 209, 209, 0.8);
--normal-font-color-50: rgba(209, 209, 209, 0.5);
--normal-font-color-30: rgba(209, 209, 209, 0.3);

BIN
frontend/src/lib/assets/fonts/logo-font.woff2 Normal file
View File

Binary file not shown.

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);

1
frontend/src/lib/stores.ts
View File

@@ -15,3 +15,4 @@ export let sites = writable<Sites>({})
export let serviceNavigation = writable<Navigation>()
export let banner = writable<Banner[]>([])
export let darkMode = writable<boolean>(false)
export let refresh = writable<boolean>(false)

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

@@ -15,7 +15,13 @@
Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht
verfügbar.
</p>
<button on:click="{() => navigate('/')}" class="back-home">Zurück zur Startseite</button>
<button
on:click="{() => {
navigate('/')
$refresh = !$refresh
}}"
class="back-home">Zurück zur Startseite</button
>
</div>
</div>