git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-31 06:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

style(logs): use responsive styling for logs page

Browse Source
This commit is contained in:
Sam Chau
2026-01-29 01:30:34 +10:30
parent 9c78acedf8
commit 6fd31efb30
1 changed files with 39 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/routes/settings/logs/+page.svelte
View File

@@ -207,8 +207,8 @@
<div class="p-8">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">Logs</h1>
<p class="mt-3 text-lg text-neutral-600 dark:text-neutral-400">
<h1 class="text-2xl font-bold text-neutral-900 md:text-3xl dark:text-neutral-50">Logs</h1>
<p class="mt-3 text-base text-neutral-600 md:text-lg dark:text-neutral-400">
Application logs with filtering and search
</p>
</div>
@@ -230,9 +230,41 @@
/>
<!-- Stats and Pagination Controls (Top) -->
<div class="mt-6 mb-4 grid grid-cols-3 items-center">
<!-- Mobile layout -->
<div class="mt-6 mb-4 flex items-center justify-between gap-2 md:hidden">
<!-- Stats -->
<div class="text-xs text-neutral-600 dark:text-neutral-400">
Showing {startIndex + 1}-{endIndex} of {filteredLogs.length}
</div>
<!-- Page navigation -->
<div class="flex items-center gap-1">
<button
type="button"
on:click={goToPreviousPage}
disabled={currentPage <= 1}
class="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 bg-white text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
>
<ChevronLeft size={14} />
</button>
<span class="min-w-[50px] text-center text-xs text-neutral-600 dark:text-neutral-400">
{currentPage}/{totalPages}
</span>
<button
type="button"
on:click={goToNextPage}
disabled={currentPage >= totalPages}
class="flex h-6 w-6 items-center justify-center rounded border border-neutral-300 bg-white text-neutral-700 transition-colors hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
>
<ChevronRight size={14} />
</button>
</div>
</div>
<!-- Desktop layout -->
<div class="mt-6 mb-4 hidden md:grid md:grid-cols-3 md:items-center">
<!-- Stats (Left) -->
<div class="font-mono text-sm text-neutral-600 dark:text-neutral-400">
<div class="text-sm text-neutral-600 dark:text-neutral-400">
Showing {startIndex + 1}-{endIndex} of {filteredLogs.length} logs
{#if filteredLogs.length !== data.logs.length}
(filtered from {data.logs.length})
@@ -287,6 +319,7 @@
emptyMessage="No logs found"
hoverable={true}
compact={true}
responsive
initialSort={{ key: 'timestamp', direction: 'desc' }}
>
<svelte:fragment slot="actions" let:row>
@@ -299,8 +332,8 @@
</svelte:fragment>
</Table>
<!-- Pagination Controls (Bottom) -->
<div class="mt-4 flex items-center justify-center gap-2">
<!-- Pagination Controls (Bottom) - hidden on mobile since we have top controls -->
<div class="mt-4 hidden items-center justify-center gap-2 md:flex">
<button
type="button"
on:click={goToPreviousPage}