Update Dependencies and Refactor Navbar
Alle Prüfungen waren erfolgreich
SteamWarCI Build successful
Alle Prüfungen waren erfolgreich
SteamWarCI Build successful
Dieser Commit ist enthalten in:
Ursprung
04859c6858
Commit
4c1b337676
20
package.json
20
package.json
@ -21,32 +21,32 @@
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@astropub/icons": "^0.2.0",
|
||||
"@types/color": "^3.0.6",
|
||||
"@types/node": "^20.11.17",
|
||||
"@types/node": "^20.11.20",
|
||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||
"@typescript-eslint/parser": "^6.21.0",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"cssnano": "^6.0.3",
|
||||
"cssnano": "^6.0.5",
|
||||
"esbuild": "^0.19.12",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-astro": "^0.31.4",
|
||||
"eslint-plugin-jsx-a11y": "^6.8.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"postcss-nesting": "^12.0.2",
|
||||
"sass": "^1.70.0",
|
||||
"svelte": "^4.2.10",
|
||||
"postcss-nesting": "^12.0.3",
|
||||
"sass": "^1.71.1",
|
||||
"svelte": "^4.2.12",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^2.1.1",
|
||||
"@astrojs/sitemap": "^3.0.5",
|
||||
"@astrojs/sitemap": "^3.1.1",
|
||||
"@codemirror/lang-json": "^6.0.1",
|
||||
"@ddietr/codemirror-themes": "^1.4.2",
|
||||
"astro": "^4.3.6",
|
||||
"astro": "^4.4.4",
|
||||
"astro-i18n": "^2.2.4",
|
||||
"astro-robots-txt": "^1.0.0",
|
||||
"astro-seo": "^0.8.0",
|
||||
"astro-seo": "^0.8.2",
|
||||
"chart.js": "^4.4.1",
|
||||
"chartjs-adapter-dayjs-4": "^1.0.4",
|
||||
"chartjs-adapter-moment": "^1.0.1",
|
||||
@ -54,7 +54,7 @@
|
||||
"dayjs": "^1.11.10",
|
||||
"easymde": "^2.18.0",
|
||||
"flowbite": "^1.8.1",
|
||||
"flowbite-svelte": "^0.44.23",
|
||||
"flowbite-svelte": "^0.44.24",
|
||||
"flowbite-svelte-icons": "^0.4.5",
|
||||
"sharp": "^0.32.6",
|
||||
"svelte-awesome": "^3.3.1",
|
||||
|
||||
1203
pnpm-lock.yaml
generiert
1203
pnpm-lock.yaml
generiert
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
127
src/components/Navbar.svelte
Normale Datei
127
src/components/Navbar.svelte
Normale Datei
@ -0,0 +1,127 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2024 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import {Image} from "astro:assets";
|
||||
import "../styles/button.css";
|
||||
import {CaretDownOutline} from "flowbite-svelte-icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "../util/util";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
let navbar: HTMLDivElement;
|
||||
|
||||
onMount(() => {
|
||||
handleScroll();
|
||||
})
|
||||
|
||||
function handleScroll() {
|
||||
if (window.scrollY > 0) {
|
||||
navbar.classList.add("scrolled");
|
||||
} else {
|
||||
navbar.classList.remove("scrolled");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:scroll={handleScroll}/>
|
||||
|
||||
<nav class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:bg-black before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top" bind:this={navbar}>
|
||||
<div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
<slot name="logo"></slot>
|
||||
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
|
||||
{t("navbar.title")}
|
||||
<span class="scrolled" style="display: none"></span>
|
||||
</h1>
|
||||
</a>
|
||||
<div class="flex justify-center flex-wrap">
|
||||
<div class="btn-dropdown my-1">
|
||||
<button class="btn btn-gray">
|
||||
<a href={l("/")}>
|
||||
<span class="btn__text">{t("navbar.links.home.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<a class="btn btn-gray my-1"
|
||||
href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
|
||||
<a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
|
||||
<a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
|
||||
<a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-dropdown my-1">
|
||||
<button class="btn btn-gray">
|
||||
<a rel="prefetch" href={l("/rules")}>
|
||||
<span class="btn__text">{t("navbar.links.rules.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.gamemode")}</h2>
|
||||
<a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
|
||||
<a href={l("/rules/miniwargear")} class="btn btn-gray">{t("navbar.links.rules.mwg")}</a>
|
||||
<a href={l("/rules/warship")} class="btn btn-gray">{t("navbar.links.rules.ws")}</a>
|
||||
<a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
|
||||
<a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
|
||||
<a href={l("/rules/megawargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
|
||||
<a href={l("/rules/microwargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
|
||||
<a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.general")}</h2>
|
||||
<a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: Add help center
|
||||
<div class="btn-dropdown my-1">
|
||||
<div class="btn btn-gray" tabindex="1">
|
||||
<a rel="prefetch">
|
||||
<span class="btn__text">{t("navbar.links.help.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn btn-gray" href={l("/help")}>{t("navbar.links.help.center")}</a>
|
||||
<a class="btn btn-gray">{t("navbar.links.help.docs")}</a>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<a class="btn my-1" href={l("/login")}>
|
||||
<span class="btn__text">{t("navbar.links.account")}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style lang="scss">
|
||||
.scrolled {
|
||||
@apply text-white;
|
||||
|
||||
&::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
width: min(100vw, 70em);
|
||||
}
|
||||
</style>
|
||||
@ -26,6 +26,7 @@
|
||||
import {tokenStore} from "@repo/repo.ts";
|
||||
import SWModal from "@components/styled/SWModal.svelte";
|
||||
import SWButton from "@components/styled/SWButton.svelte";
|
||||
import Card from "@components/Card.svelte";
|
||||
|
||||
export let user: Player;
|
||||
|
||||
@ -38,14 +39,12 @@
|
||||
|
||||
<div class="flex mb-4 flex-col md:flex-row">
|
||||
<div>
|
||||
<div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg hidden md:block
|
||||
hover:scale-105 hover:shadow-2xl
|
||||
dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
|
||||
<Card>
|
||||
<figure>
|
||||
<figcaption class="text-center mb-4 text-2xl">{user.name}</figcaption>
|
||||
<img src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${user.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={user.name + "s bust"} width="150" height="150" />
|
||||
</figure>
|
||||
</div>
|
||||
</Card>
|
||||
<div class="flex flex-wrap">
|
||||
<button class="btn mt-2" on:click={logout}>{t("dashboard.buttons.logout")}</button>
|
||||
{#if user.perms.includes("MODERATION")}
|
||||
|
||||
@ -3,10 +3,12 @@ import {Image} from "astro:assets";
|
||||
import Basic from "./Basic.astro";
|
||||
import "../styles/button.css";
|
||||
import localLogo from "../images/logo.png";
|
||||
import {YoutubeSolid, DiscordSolid, CaretDownOutline} from "flowbite-svelte-icons";
|
||||
import {YoutubeSolid, DiscordSolid} from "flowbite-svelte-icons";
|
||||
import {t} from "astro-i18n";
|
||||
import {l} from "../util/util";
|
||||
|
||||
import Navbar from "@components/Navbar.svelte";
|
||||
|
||||
import ServerStatus from "../components/ServerStatus.svelte";
|
||||
|
||||
const {title, description} = Astro.props;
|
||||
@ -16,98 +18,10 @@ const {title, description} = Astro.props;
|
||||
<slot name="head" slot="head"/>
|
||||
<Fragment>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<nav-bar class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center \
|
||||
before:bg-black before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top">
|
||||
<div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
|
||||
class="mr-2 p-1 bg-black rounded-full"/>
|
||||
<h1 class="text-2xl uppercase font-bold inline-block dark:text-white">
|
||||
{t("navbar.title")}
|
||||
</h1>
|
||||
</a>
|
||||
<div class="flex justify-center flex-wrap">
|
||||
<div class="btn-dropdown my-1">
|
||||
<button class="btn btn-gray">
|
||||
<a href={l("/")}>
|
||||
<span class="btn__text">{t("navbar.links.home.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<a class="btn btn-gray my-1"
|
||||
href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
|
||||
<a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
|
||||
<a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
|
||||
<a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-dropdown my-1">
|
||||
<button class="btn btn-gray">
|
||||
<a rel="prefetch" href={l("/rules")}>
|
||||
<span class="btn__text">{t("navbar.links.rules.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto"/>
|
||||
</button>
|
||||
<div>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.gamemode")}</h2>
|
||||
<a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
|
||||
<a href={l("/rules/miniwargear")} class="btn btn-gray">{t("navbar.links.rules.mwg")}</a>
|
||||
<a href={l("/rules/warship")} class="btn btn-gray">{t("navbar.links.rules.ws")}</a>
|
||||
<a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
|
||||
<a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
|
||||
<a href={l("/rules/megawargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
|
||||
<a href={l("/rules/microwargear")}
|
||||
class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
|
||||
<a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
|
||||
<h2 class="px-2 text-gray-300">{t("navbar.links.rules.general")}</h2>
|
||||
<a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO: Add help center
|
||||
<div class="btn-dropdown my-1">
|
||||
<div class="btn btn-gray" tabindex="1">
|
||||
<a rel="prefetch">
|
||||
<span class="btn__text">{t("navbar.links.help.title")}</span>
|
||||
</a>
|
||||
<CaretDownOutline class="ml-2 mt-auto" />
|
||||
</div>
|
||||
<div>
|
||||
<a class="btn btn-gray" href={l("/help")}>{t("navbar.links.help.center")}</a>
|
||||
<a class="btn btn-gray">{t("navbar.links.help.docs")}</a>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<a class="btn my-1" href={l("/login")}>
|
||||
<span class="btn__text">{t("navbar.links.account")}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav-bar>
|
||||
<script>
|
||||
class Navbar extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
|
||||
window.onscroll = e => {
|
||||
if (window.scrollY != 0) {
|
||||
this.classList.add("scrolled");
|
||||
} else {
|
||||
this.classList.remove("scrolled");
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("nav-bar", Navbar);
|
||||
</script>
|
||||
<Navbar client:idle>
|
||||
<Image src={localLogo} alt={t("navbar.logo.alt")} width="44" height="44" quality="max"
|
||||
class="mr-2 p-1 bg-black rounded-full" slot="logo"/>
|
||||
</Navbar>
|
||||
<main class="flex-1">
|
||||
<slot/>
|
||||
</main>
|
||||
@ -157,14 +71,6 @@ const {title, description} = Astro.props;
|
||||
}
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
@apply text-white;
|
||||
|
||||
&::before {
|
||||
@apply scale-y-100;
|
||||
}
|
||||
}
|
||||
|
||||
.match {
|
||||
width: min(100vw, 70em);
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ const {title, description, image} = Astro.props;
|
||||
<NavbarLayout title={title} description={description}>
|
||||
<slot name="head" slot="head"/>
|
||||
<Image src={image || localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
|
||||
class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false"/>
|
||||
class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
|
||||
<div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14 relative
|
||||
dark:text-white dark:bg-neutral-900" style="width: min(100vw, 75em);">
|
||||
<slot/>
|
||||
|
||||
@ -42,7 +42,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
|
||||
<div class="w-full h-screen relative mb-4">
|
||||
<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
|
||||
class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75"
|
||||
style="height: calc(100vh + 1rem)" draggable="false"/>
|
||||
style="height: calc(100vh + 1rem)" draggable="false" loading="eager"/>
|
||||
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
|
||||
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow"
|
||||
style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
|
||||
|
||||
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren