Refactor components and pages for improved readability and consistency
- Updated BackgroundImage.astro to format props for better readability. - Adjusted FightTable.svelte to remove unnecessary trailing commas. - Modified GroupTable.svelte to fix sorting syntax. - Cleaned up LanguageWarning.astro by standardizing import statements. - Enhanced Login.svelte for better formatting and readability. - Simplified Navbar.svelte by merging multi-line attributes into single lines. - Streamlined PostComponent.astro by condensing Image component props. - Improved SearchComponent.svelte for consistent spacing and formatting. - Refined TagComponent.astro for better readability and structure. - Updated PageLayout.astro to simplify div structure. - Enhanced downloads.astro for improved readability and consistency. - Cleaned up index.astro in help directory for better formatting. - Refactored index.astro in main pages for improved readability. - Standardized login.astro for better formatting. - Cleaned up not-found.astro for consistent import formatting. - Enhanced [...schem].astro for better readability. - Refactored [mode].astro for consistent import formatting. - Improved [...gamemode].astro for better readability. - Cleaned up [mode].astro in regeln directory for consistent formatting. - Refactored index.astro in regeln directory for improved readability. - Enhanced fight.astro for consistent import formatting.
This commit is contained in:
@@ -3,7 +3,13 @@ import { Image } from "astro:assets";
|
||||
import localBau from "@images/90.png";
|
||||
---
|
||||
|
||||
<Image src={localBau} alt="Bau" widths={[240, 540, 720, 1080, 1920, localBau.width]}
|
||||
<Image
|
||||
src={localBau}
|
||||
alt="Bau"
|
||||
widths={[240, 540, 720, 1080, 1920, localBau.width]}
|
||||
sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
|
||||
class="w-full h-full object-cover" quality={100}
|
||||
draggable="false" loading="eager"/>
|
||||
class="w-full h-full object-cover"
|
||||
quality={100}
|
||||
draggable="false"
|
||||
loading="eager"
|
||||
/>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
|
||||
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows, ) as fights}
|
||||
<tr>
|
||||
{#each fights as fight (fight.id)}
|
||||
<td
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
team: event.teams.find((t) => t.id === Number(teamId))!!,
|
||||
points: points,
|
||||
}))
|
||||
.sort((a, b) => b.points - a.points)
|
||||
.sort((a, b) => b.points - a.points),
|
||||
);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
import {t} from "astro-i18n";
|
||||
import { t } from "astro-i18n";
|
||||
---
|
||||
|
||||
<div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert">
|
||||
|
||||
@@ -90,7 +90,10 @@
|
||||
<p class="mt-2 text-red-500">{error}</p>
|
||||
{/if}
|
||||
<button class="btn mt-4 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
|
||||
<a class="btn mt-4 justify-center w-full" href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify">
|
||||
<a
|
||||
class="btn mt-4 justify-center w-full"
|
||||
href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"
|
||||
>
|
||||
{t("login.discord")}
|
||||
</a>
|
||||
</form>
|
||||
@@ -137,7 +140,9 @@
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: color 0.2s, border-color 0.2s;
|
||||
transition:
|
||||
color 0.2s,
|
||||
border-color 0.2s;
|
||||
}
|
||||
|
||||
.sw-link:hover {
|
||||
|
||||
@@ -58,11 +58,7 @@
|
||||
|
||||
<svelte:window onscroll={handleScroll} />
|
||||
|
||||
<nav
|
||||
data-pagefind-ignore
|
||||
class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center"
|
||||
bind:this={navbar}
|
||||
>
|
||||
<nav data-pagefind-ignore class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center" bind:this={navbar}>
|
||||
<div class="flex flex-row items-center justify-evenly md:justify-between match">
|
||||
<a class="flex items-center" href={l("/")}>
|
||||
{@render logo?.()}
|
||||
@@ -148,7 +144,10 @@
|
||||
:global(.sw-nav) {
|
||||
backdrop-filter: none;
|
||||
background: transparent;
|
||||
transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
|
||||
transition:
|
||||
background 0.3s ease,
|
||||
backdrop-filter 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -28,12 +28,7 @@ const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
|
||||
post.data.image != null ? (
|
||||
<a href={postUrl}>
|
||||
<div class="flex-shrink-0 pr-2">
|
||||
<Image
|
||||
transition:name={post.data.title + "-image"}
|
||||
src={post.data.image}
|
||||
alt="Post Image"
|
||||
class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
|
||||
/>
|
||||
<Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
|
||||
</div>
|
||||
</a>
|
||||
) : null
|
||||
|
||||
@@ -18,12 +18,11 @@
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import {slide, fade} from "svelte/transition";
|
||||
import {onMount} from "svelte";
|
||||
import {importPagefind, type Pagefind, type PagefindDocument} from "@type/pagefind.js";
|
||||
import { slide, fade } from "svelte/transition";
|
||||
import { onMount } from "svelte";
|
||||
import { importPagefind, type Pagefind, type PagefindDocument } from "@type/pagefind.js";
|
||||
import Card from "@components/Card.svelte";
|
||||
import {l} from "@utils/util.ts";
|
||||
import { l } from "@utils/util.ts";
|
||||
let pagefind: Pagefind;
|
||||
|
||||
onMount(async () => {
|
||||
@@ -36,23 +35,22 @@
|
||||
|
||||
async function search(e: KeyboardEvent) {
|
||||
if (e.target instanceof HTMLInputElement) {
|
||||
let search: {results: any[]} = await pagefind.debouncedSearch(e.target.value);
|
||||
let search: { results: any[] } = await pagefind.debouncedSearch(e.target.value);
|
||||
|
||||
results = await Promise.all(search.results.slice(0, 10).map(value => value.data()))
|
||||
results = await Promise.all(search.results.slice(0, 10).map((value) => value.data()));
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
open?: boolean;
|
||||
}
|
||||
interface Props {
|
||||
open?: boolean;
|
||||
}
|
||||
|
||||
let { open = $bindable(false) }: Props = $props();
|
||||
let { open = $bindable(false) }: Props = $props();
|
||||
</script>
|
||||
|
||||
<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => open = false}>
|
||||
</button>
|
||||
<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => (open = false)}> </button>
|
||||
<div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel">
|
||||
<input placeholder="Search..." onkeypress={search}>
|
||||
<input placeholder="Search..." onkeypress={search} />
|
||||
|
||||
<div class="overflow-y-scroll flex-1 w-full mt-2">
|
||||
{#each results as result}
|
||||
@@ -93,4 +91,4 @@
|
||||
label {
|
||||
color: rgba(163, 163, 163, 0.7);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,31 @@
|
||||
---
|
||||
|
||||
import {l} from "../util/util";
|
||||
import {capitalize} from "./admin/util";
|
||||
import { l } from "../util/util";
|
||||
import { capitalize } from "./admin/util";
|
||||
|
||||
interface Props {
|
||||
tag: string;
|
||||
noLink?: boolean;
|
||||
}
|
||||
|
||||
const {tag, noLink} = Astro.props;
|
||||
const { tag, noLink } = Astro.props;
|
||||
---
|
||||
|
||||
{noLink
|
||||
? (
|
||||
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
|
||||
)
|
||||
: (
|
||||
{
|
||||
noLink ? (
|
||||
<span
|
||||
class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider"
|
||||
style="font-family: 'Barlow Condensed', sans-serif;"
|
||||
>
|
||||
{capitalize(tag)}
|
||||
</span>
|
||||
) : (
|
||||
<a href={l(`/announcements/tags/${tag}`)}>
|
||||
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
|
||||
<span
|
||||
class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors"
|
||||
style="font-family: 'Barlow Condensed', sans-serif;"
|
||||
>
|
||||
{capitalize(tag)}
|
||||
</span>
|
||||
</a>
|
||||
)}
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user