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

most of it

Browse Source
This commit is contained in:
Robin Grenzdörfer
2023-09-18 17:31:11 +00:00
parent 5f27fe0c5b
commit 481308522f
380 changed files with 3015 additions and 2480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
let images: HTMLImageElement[] = []
function changeStateOfSite(menuOn: boolean) {
let element = document.getElementById("menu")
let element = document.getElementById("menu") as HTMLElement
element.classList.toggle("show-menu")
let body = document.body
if (menuOn) {
@@ -26,7 +26,7 @@
}
}
function imageSlide(images) {
function imageSlide(images: HTMLImageElement[]) {
console.log(images)
let currentImage = 0
images[0].classList.add("show-img")
@@ -39,12 +39,15 @@
return () => clearInterval(interval)
}
function pushImages(node) {
function pushImages(node: HTMLImageElement) {
images[0] = node
}
$: {
if (images.length != 0) imageSlide(document.getElementsByClassName("img-menu"))
const images = Array.from(document.getElementsByClassName("img-menu")) as HTMLImageElement[]
if (images.length !== 0) {
imageSlide(images)
}
}
</script>
@@ -54,18 +57,19 @@
class="logo-container"
on:click="{() => {
navigate('/')
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
}}"
>
<button class="img-logo-container"><img src="media/logo.png" alt="logo" /></button>
<p class="logo-text">Wasserski-Erfurt</p>
<button class="img-logo-container"><img src="/media/logo.svg" alt="logo" /></button>
<div class="logo-text">
<p id="upper">ALL KIDS</p>
<p id="lower">SO GÜNSTIG WIE NACHHALTIG</p>
</div>
</button>
<button
class="button-three"
on:click="{(e) => {
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
if (element) changeStateOfSite(element.classList.contains('show-menu'))
}}"
aria-controls="primary-navigation"
aria-expanded="false"
@@ -87,22 +91,27 @@
<div class="inner-container">
<div class="higher-absolute">
{#each $navigation.elemente as link, i (i)}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class="menu"
on:mousedown|stopPropagation="{(e) => {
if (link.endpoint) {
navigate(`${$sites[link.seite]?.path}`)
navigate(`${$sites[link.seite ?? '']?.path}`)
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
if (element) changeStateOfSite(element.classList.contains('show-menu'))
return
}
let element = e.currentTarget
element.classList.toggle('active')
let chevronContainer = document.getElementById('chevron-' + i)
chevronContainer.src =
chevronContainer.src.split('/')?.pop() == 'chevron-down.png'
? 'media/chevron-up.png'
: 'media/chevron-down.png'
if (element) {
element.classList.toggle('active')
let chevronContainer = document.getElementById('chevron-' + i)
if (chevronContainer)
// @ts-ignore
chevronContainer.src = // @ts-ignore
chevronContainer.src.split('/')?.pop() == 'chevron-down.png'
? 'media/chevron-up.png'
: 'media/chevron-down.png'
}
}}"
>
<div class="menu-point">
@@ -114,13 +123,14 @@
</div>
{#if !link?.endpoint}
<ul class="submenu">
{#each link.elemente as submenu, i (i)}
{#each link.elemente ?? [] as submenu, i (i)}
<li>
<button
on:mousedown="{(e) => {
navigate(`${$sites[submenu.seite]?.path}`)
navigate(`${$sites[submenu.seite ?? '']?.path}`)
let element = document.getElementById('menu')
changeStateOfSite(element.classList.contains('show-menu'))
if (element)
changeStateOfSite(element.classList.contains('show-menu'))
}}">{submenu.name}</button
>
</li>
@@ -131,20 +141,7 @@
{/each}
<button class="socials">
<a target="_blank" href="https://www.instagram.com/wasserski_erfurt/">
<svg
width="36"
height="36"
viewBox="0 0 36 36"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.7 3h12.6c4.8 0 8.7 3.9 8.7 8.7v12.6a8.7 8.7 0 0 1-8.7 8.7H11.7C6.9 33 3 29.1 3 24.3V11.7A8.7 8.7 0 0 1 11.7 3zm-.3 3A5.4 5.4 0 0 0 6 11.4v13.2c0 2.985 2.415 5.4 5.4 5.4h13.2a5.4 5.4 0 0 0 5.4-5.4V11.4C30 8.415 27.585 6 24.6 6H11.4zm14.475 2.25a1.875 1.875 0 1 1 0 3.75 1.875 1.875 0 0 1 0-3.75zM18 10.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15zm0 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z"
fill="#fff"></path>
</svg>
</a>
<a target="_blank" href="https://www.facebook.com/wasserskierfurt/">
<a target="_blank" href="https://www.facebook.com/allkids.erfurt/">
<svg
width="36"
height="36"
@@ -200,7 +197,8 @@
position: relative;
width: 100%;
height: 100vh;
background-color: white;
background-color: var(--background-color);
ul {
.header {
padding: 0px min(4.5vw, 100px);
@@ -209,7 +207,7 @@
justify-content: space-between;
height: 105px;
.button-three {
--button-color: #333;
--button-color: var(--normal-font-color);
overflow: hidden;
background: transparent;
}
@@ -234,14 +232,25 @@
}
.logo-container {
height: 50px;
height: 38px;
display: flex;
align-items: center;
.logo-text {
p {
white-space: nowrap;
text-align: left;
}
& > #upper {
font-family: "Orbitron" !important;
font-size: 24px;
font-weight: 700;
}
& > #lower {
font-size: 10px;
}
font-weight: bold;
font-size: 1.2rem;
padding-left: 10px;
color: #333;
}
.img-logo-container {
height: 100%;
@@ -282,7 +291,7 @@
}
}
.menu-container {
background-color: white;
background-color: var(--background-color);
position: absolute;
z-index: 2000;
opacity: 0;
@@ -304,18 +313,18 @@
width: 100%;
left: 0px;
padding: 0px min(4.5vw, 100px);
background-color: white;
background-color: var(--background-color);
border-radius: 0px 0px 10px 10px;
}
.socials {
width: 100%;
background-color: @link-font-color;
background-color: var(--link-font-color);
height: 50px;
border-radius: 20px;
color: white;
color: var(--background-color);
}
.active {
background-color: rgba(128, 128, 128, 0.153) !important;
background-color: var(--normal-font-color-12) !important;
.submenu {
visibility: visible;
max-height: 250px;