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

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

@@ -10,9 +10,10 @@
else siteContainer.style.overflow = "initial"
}
async function changeSubmenu(e, i) {
async function changeSubmenu(e: EventTarget & HTMLLIElement, i: string | number) {
changeStateOfSite(true)
let submenu = document.getElementById("submenu-container")
if (!submenu) return
submenu.style.height = "calc(100vh - 120px)"
submenu.classList.add("show-submenu")
@@ -21,23 +22,27 @@
element.classList.remove("shown")
})
let shownMenu = document.getElementById("submenu-" + i)
if (!shownMenu) return
shownMenu.classList.add("shown")
}
let hoverTimeout
let hoverTimeout: string | number | NodeJS.Timeout | undefined
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<ul
class="menu"
on:mouseover="{(e) => {
clearTimeout(hoverTimeout)
hoverTimeout = setTimeout(() => {
let element = document.getElementById('submenu-container')
element.style.height = '0vh'
changeStateOfSite(false)
element.classList.remove('show-submenu')
let elements = document.getElementsByClassName('select-menu')
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
if (element) {
element.style.height = '0vh'
changeStateOfSite(false)
element.classList.remove('show-submenu')
let elements = document.getElementsByClassName('select-menu')
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
}
}, 500)
}}"
on:mouseleave="{() => {
@@ -48,27 +53,34 @@
class="logo-container"
on:click="{() => {
let element = document.getElementById('submenu-container')
if (!element) return
element.style.height = '0vh'
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate('/')
}}"
>
<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>
<ul class="menuitem-container">
{#if $navigation?.elemente}
{#each $navigation.elemente as site, i (i)}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li
class="menu-item"
on:mousedown="{() => {
if (site.endpoint) {
let element = document.getElementById('submenu-container')
element.style.height = '0vh'
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate(`${$sites[site.seite].path}`)
if (element) {
element.style.height = '0vh'
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate(`${$sites[site.seite || ''].path}`)
}
}
}}"
on:mouseenter|stopPropagation="{(e) => {
@@ -86,8 +98,10 @@
let elements = document.getElementsByClassName('select-menu')
Array.from(elements).forEach((e) => e.classList.remove('select-menu'))
let element = document.getElementById('submenu-container')
element.style.height = '0vh'
element.classList.remove('show-submenu')
if (element) {
element.style.height = '0vh'
element.classList.remove('show-submenu')
}
changeStateOfSite(false)
}, 500)
}
@@ -103,6 +117,7 @@
</ul>
</ul>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button
class="submenu-container"
id="submenu-container"
@@ -117,6 +132,7 @@
<div class="inner-container">
{#each $navigation?.elemente as submenu, i (i * 10)}
{#if !submenu?.endpoint}
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<button
on:mouseover|stopPropagation
class="innersubmenu-container"
@@ -133,16 +149,17 @@
/>
</div>
<ul class="sub-menu">
{#each submenu?.elemente as submenu_point, i (i)}
{#each submenu?.elemente || [] as submenu_point, i (i)}
<li>
<button
class="submenu-item"
on:click="{() => {
let element = document.getElementById('submenu-container')
if (!element) return
element.style.height = '0vh'
element.classList.remove('show-submenu')
changeStateOfSite(false)
navigate(`${$sites[submenu_point.seite]?.path}`)
navigate(`${$sites[submenu_point.seite || '']?.path}`)
}}">{submenu_point?.name}</button
>
</li>
@@ -180,6 +197,18 @@
display: flex;
align-items: center;
.logo-text {
p {
white-space: nowrap;
text-align: left;
}
& > #upper {
font-family: "Orbitron" !important;
font-size: 30px;
font-weight: 700;
}
& > #lower {
font-size: 13px;
}
font-weight: bold;
font-size: 1.2rem;
padding-left: 10px;
@@ -214,11 +243,11 @@
align-items: center;
cursor: pointer;
&:hover {
background-color: @hover-color;
background-color: var(--hover-color);
}
}
.select-menu {
background-color: @hover-color;
background-color: var(--hover-color);
}
}
}
@@ -229,7 +258,7 @@
overflow: hidden;
width: 100vw;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.854);
background-color: var(--opposite-bg-color-80);
opacity: 0;
.inner-container {
width: 100%;
@@ -242,7 +271,7 @@
opacity: 0;
position: absolute;
visibility: hidden;
background-color: rgb(255, 255, 255);
background-color: var(--background-color);
display: flex;
justify-content: center;
.submenu-most-inner-container {
@@ -266,7 +295,7 @@
width: 100%;
text-align: start;
&:hover {
border-bottom: 1px solid rgba(24, 24, 24, 0.795);
border-bottom: 1px solid var(--opposite-bg-color-80);
}
button {
padding: 10px 0px;