lapikud/lapikud.github.io
2
0
Fork 1
mirror of https://github.com/Lapikud/lapikud.github.io.git synced 2026-08-08 16:39:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

changes for nav and Juhatus

Browse Source
This commit is contained in:
Henri
2026-04-06 21:10:15 +03:00
parent 99ad293289
commit ae1a44b65f
13 changed files with 113 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.svelte
View File

@@ -7,8 +7,10 @@
{#if $text && Object.keys($text).length > 0}
<Navbar />
<main>
<Router {routes} />
<main class="min-h-screen flex flex-col">
<div class="flex-1 flex flex-col">
<Router {routes} />
</div>
<Footer />
</main>
{/if}

11
src/app.css
View File

@@ -5,9 +5,9 @@
/* Overwriting tailwindcss specific variables */
@theme {
--color-orange-500: #f0941d;
--color-orange-300: #ffa940;
--color-orange-600: #d67d0a;
--color-orange-500: #f0941d; /* Primary color, use this for most things. */
--color-orange-300: #ffa80d; /* Use for hover states, accents, and highlights. (lighter than primary) */
--color-orange-600: #d67d0a; /* Ideally don't use */
--color-gray-100: #fffdfa;
--color-gray-900: #0d0d0d;
@@ -109,6 +109,11 @@ input[type="submit"] {
margin: -1px;
}
/* Safe area for content below navbar (94px scaled) */
.safe-area-navbar {
padding-top: calc(94px * var(--ui-scale));
}
/* Show/hide helpers for breakpoints */
.mobile-only {
display: block;

18
src/components/Dropdown.svelte
View File

@@ -26,21 +26,13 @@
<div class="relative inline-block" onfocusout={handleFocusOut}>
<Button onClick={toggle} class={`${buttonClass} gap-0`}>
{name}
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="w-4 h-4 ml-1 mr-0 mt-0.5 transition-transform inline-block"
<span
class="ml-1 mr-0 mt-0.5 transition-transform inline-block text-[0.9em] opacity-60"
style:transform={isOpen ? "rotate(180deg)" : "none"}
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
↓
</span>
</Button>
<div

100
src/layout/Navbar.svelte
View File

@@ -33,7 +33,7 @@
"/management",
];
const eventsRoutes = ["/kalender", "/striim", "/koolitused"];
const eventsRoutes = ["/koolitused"];
function isCurrent(path) {
return currentPath === path;
@@ -43,22 +43,74 @@
return paths.includes(currentPath);
}
function isHomePage() {
return currentPath === "/";
}
function headerShellClass() {
return isHomePage()
? "bg-transparent"
: "border-b-2 border-orange-500 bg-gray-900 backdrop-blur-md";
}
function headerRowClass() {
return isHomePage()
? "flex items-center w-full relative min-h-10"
: "flex min-h-16 items-center gap-4";
}
function headerWrapClass() {
return isHomePage()
? "ml-auto flex w-full items-center justify-end md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35 pr-(--page-padding-inline)"
: "flex items-center justify-end ml-auto w-full md:w-auto";
}
function desktopNavClass() {
return isHomePage()
? "z-10 hidden md:flex gap-1 justify-end text-lg"
: "z-10 hidden md:flex items-center gap-1 justify-end text-lg";
}
function navButtonClass(active = false) {
if (isHomePage()) {
return active
? "border-transparent text-orange-500 bg-transparent"
: "border-transparent bg-transparent text-white/75 hover:text-orange-500";
}
return active
? "border-transparent text-orange-500 bg-white/5"
: "border-transparent text-white/75 hover:text-white hover:bg-white/5";
? "border-transparent text-orange-500 hover:bg-white/5"
: "border-transparent text-white/75 hover:bg-white/5";
}
function dropdownButtonClass(active = false) {
if (isHomePage()) {
return active
? "border-transparent text-orange-500 bg-transparent"
: "border-transparent bg-transparent text-white/75 hover:text-orange-500";
}
return active
? "border-transparent text-orange-500 bg-white/5"
: "border-transparent text-white/75 hover:text-white hover:bg-white/5";
? "border-transparent text-orange-500 hover:bg-white/5"
: "border-transparent text-white/75 hover:bg-white/5";
}
function languageButtonClass() {
if (isHomePage()) {
return "ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 hover:text-orange-500";
}
return "ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 hover:bg-white/5";
}
function dropdownItemClass(active = false) {
return active
? "bg-orange-500/10 text-orange-500"
: "bg-transparent text-black hover:text-orange-500";
? "w-full justify-start border-transparent bg-transparent text-orange-500"
: "w-full justify-start border-transparent bg-transparent text-black hover:text-orange-500";
}
function dropdownPanelClass() {
return "nav-dropdown-panel min-w-52 border border-black/10 bg-white/95 p-1 text-black backdrop-blur-md";
}
// Update currentPath when navigation occurs
@@ -164,23 +216,25 @@
</style>
<header class="fixed inset-x-0 top-0 z-50 text-white">
<div class="border-b-2 border-orange-500 bg-gray-900/95 backdrop-blur-md">
<Container maxWidth={true} center={true} class="py-0">
<div class={headerShellClass()}>
<Container maxWidth={true} center={!isHomePage()} class="py-0">
{#if $text && Object.keys($text).length > 0}
<div class="flex min-h-16 items-center gap-4">
<Button
onClick={() => handleNavigation("/")}
class="nav-logo-button border-transparent bg-transparent px-0 py-0 text-white hover:text-white"
>
<img src="/assets/LapLogo_white_orange.png" alt="Lapikud Logo" class="h-12 md:h-14 w-auto" />
</Button>
<div class={headerRowClass()}>
{#if !isHomePage()}
<Button
onClick={() => handleNavigation("/")}
class="nav-logo-button border-transparent bg-transparent px-0 py-3"
>
<img src="/assets/LapLogo_white_orange.png" alt="Lapikud logo" class="h-12 md:h-14 w-auto" />
</Button>
{/if}
<div class="flex items-center justify-end ml-auto w-full md:w-auto">
<nav class="z-10 hidden md:flex items-center gap-1 justify-end text-lg">
<div class={headerWrapClass()}>
<nav class={desktopNavClass()}>
<Dropdown
name={$text.about}
buttonClass={`${dropdownButtonClass(isInGroup(aboutRoutes))} ${isInGroup(aboutRoutes) ? "nav-active-parent" : ""}`}
panelClass="nav-dropdown-panel"
panelClass={dropdownPanelClass()}
>
<Button
class={dropdownItemClass(isCurrent("/lapikutest") || isCurrent("/aboutus"))}
@@ -211,7 +265,7 @@
<Dropdown
name={$text.events}
buttonClass={`${dropdownButtonClass(isInGroup(eventsRoutes))} ${isInGroup(eventsRoutes) ? "nav-active-parent" : ""}`}
panelClass="nav-dropdown-panel"
panelClass={dropdownPanelClass()}
>
<Button
class={dropdownItemClass(isCurrent("/koolitused"))}
@@ -220,13 +274,13 @@
<Presentation />{$text.eventsPages.workshops}
</Button>
<Button
class="bg-transparent text-black hover:text-orange-500"
class={dropdownItemClass(false)}
onClick={() => handleNavigation("https://asikarikas.ee/", { external: true })}
>
<Trophy />ASI Karikas
</Button>
<Button
class="bg-transparent text-black hover:text-orange-500"
class={dropdownItemClass(false)}
onClick={() => handleNavigation("https://remondikohvik.lapikud.ee/", { external: true })}
>
<Coffee />{$text.eventsPages.repair}
@@ -248,7 +302,7 @@
</Button>
<Button
class="ml-3 border-transparent bg-transparent px-3 py-1 text-sm text-white/75 hover:text-orange-500 hover:bg-white/5"
class={languageButtonClass()}
onClick={() => switchLanguageRoute($currentLang === "est" ? "en" : "est")}
>
{$currentLang === "est" ? "EN" : "EST"}

2
src/routes/AboutUs.svelte
View File

@@ -37,6 +37,7 @@
});
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<Section background="orange">
<Center>
@@ -260,6 +261,7 @@
</div>
</Section>
{/if}
</div>
<style>
.feature-icon {

2
src/routes/Calendar.svelte
View File

@@ -9,7 +9,7 @@
});
</script>
<div bind:this={sectionElement}>
<div class="safe-area-navbar" bind:this={sectionElement}>
<Section >
<Center dir="col" class="w-full">
<div class="w-full max-w-4xl">

2
src/routes/Contact.svelte
View File

@@ -91,6 +91,7 @@
}
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<Section background="orange">
<Center>
@@ -299,6 +300,7 @@
</Card>
</Grid>
</Section>
</div>
<style>
.feature-icon {

2
src/routes/Helpdesk.svelte
View File

@@ -43,6 +43,7 @@
});
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<div class="w-full bg-black">
<div class="flex absolute justify-center items-center flex-row w-full h-[42vh] px-4">
@@ -188,3 +189,4 @@
</div>
</Grid>
</Section>
</div>

2
src/routes/Managment.svelte
View File

@@ -111,6 +111,7 @@
});
</script>
<div class="safe-area-navbar">
<Section
padding="none"
fullWidth={true}
@@ -255,6 +256,7 @@
{/if}
</Container>
</Section>
</div>
<style>
.hero-shell {

2
src/routes/Mentors.svelte
View File

@@ -46,6 +46,7 @@
}
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<Section background="orange">
<Center>
@@ -177,4 +178,5 @@
{/each}
</div>
</Section>
</div>

2
src/routes/OurWork.svelte
View File

@@ -69,6 +69,7 @@
];
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<Section background="orange">
<Center>
@@ -257,6 +258,7 @@
</div>
</Center>
</Section>
</div>
<style>
.feature-icon {

8
src/routes/Striim.svelte
View File

@@ -13,9 +13,9 @@
}
</script>
<div bind:this={sectionElement}>
<Section>
<Grid min="400px">
<div class="safe-area-navbar" bind:this={sectionElement}>
<Section fullWidth={true} contentClass="flex items-start">
<Grid min="400px" class="w-full">
<a href="https://master.lapikud.ee/stream/1/stream">
<img src="https://master.lapikud.ee/stream/1/substream" alt="video0" style="width:100%;" on:load={handleImageLoad}/>
</a>
@@ -27,6 +27,6 @@
<a href="https://master.lapikud.ee/stream/3/stream">
<img src="https://master.lapikud.ee/stream/3/substream" alt="video2" style="width:100%;" on:load={handleImageLoad}/>
</a>
</Grid>
</Grid>
</Section>
</div>

2
src/routes/Student.svelte
View File

@@ -25,6 +25,7 @@
});
</script>
<div class="safe-area-navbar">
<!-- Hero Section -->
<Section background="orange">
<Center>
@@ -195,6 +196,7 @@
</div>
{/if}
</Section>
</div>
<style>
.feature-icon {