SteamWar/Website
10
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Enhance layout and styling for improved UI consistency across components

Browse Source
This commit is contained in:
Chaoscaot
2026-03-28 21:53:31 +01:00
parent 5d365bc744
commit 1426536c88
5 changed files with 102 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/styled/SWPaginator.svelte
View File

@@ -18,36 +18,21 @@
-->
<script lang="ts">
import { preventDefault } from 'svelte/legacy';
import { preventDefault } from "svelte/legacy";
import {
ChevronDoubleLeftOutline,
ChevronDoubleRightOutline,
ChevronLeftOutline,
ChevronRightOutline,
} from "flowbite-svelte-icons";
import { ChevronDoubleLeftOutline, ChevronDoubleRightOutline, ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
interface Props {
page?: number;
maxPage: number;
firstUrl?: string;
lastUrl?: string;
previousUrl?: string;
nextUrl?: string;
pagesUrl?: (i: number) => string;
}
interface Props {
page?: number;
maxPage: number;
firstUrl?: string;
lastUrl?: string;
previousUrl?: string;
nextUrl?: string;
pagesUrl?: (i: number) => string;
}
let {
page = $bindable(0),
maxPage,
firstUrl = "#",
lastUrl = "#",
previousUrl = "#",
nextUrl = "#",
pagesUrl = () => "#"
}: Props = $props();
let { page = $bindable(0), maxPage, firstUrl = "#", lastUrl = "#", previousUrl = "#", nextUrl = "#", pagesUrl = () => "#" }: Props = $props();
const previous = () => {
page = Math.max(page - 1, 0);
@@ -56,20 +41,23 @@
const next = () => {
page = Math.min(page + 1, maxPage - 1);
};
let pages = $derived(new Array(maxPage).fill(0)
.map((_, i) => i + 1)
//.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
.map(i => ({
name: i.toString(),
active: i === page + 1,
i: i - 1
})));
let pages = $derived(
new Array(maxPage)
.fill(0)
.map((_, i) => i + 1)
//.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
.map((i) => ({
name: i.toString(),
active: i === page + 1,
i: i - 1,
})),
);
</script>
<div class="w-full flex justify-center mt-4">
<ul class="inline-flex flex-wrap">
<ul class="inline-flex flex-wrap gap-1">
<li>
<a href={firstUrl} onclick={preventDefault(() => page = 0)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
<a href={firstUrl} onclick={preventDefault(() => (page = 0))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
<span class="sr-only">Next</span>
<ChevronDoubleLeftOutline class="w-3 h-3" />
</a>
@@ -82,7 +70,7 @@
</li>
{#each pages as p}
<li>
<a href={pagesUrl(p.i)} onclick={preventDefault(() => page = p.i)} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
<a href={pagesUrl(p.i)} onclick={preventDefault(() => (page = p.i))} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
<span>{p.name}</span>
</a>
</li>
@@ -94,10 +82,10 @@
</a>
</li>
<li>
<a href={lastUrl} onclick={preventDefault(() => page = maxPage - 1)} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
<a href={lastUrl} onclick={preventDefault(() => (page = maxPage - 1))} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
<span class="sr-only">Next</span>
<ChevronDoubleRightOutline class="w-3 h-3" />
</a>
</li>
</ul>
</div>
</div>