rene/checkflo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Phosphor-Icons in Admin-Nav, Druck-Button mit Printer-Icon

Browse source
This commit is contained in:
rene 2026-05-17 14:39:47 +02:00
parent c5a640911c
commit c983750dcd
7 changed files with 44 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/lib/assets/icons/dashboard.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M24,176V153.13C24,95.65,70.15,48.2,127.63,48A104,104,0,0,1,232,152v24a8,8,0,0,1-8,8H32A8,8,0,0,1,24,176Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="48" x2="128" y2="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="104" y1="184" x2="168" y2="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="136" x2="230.78" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="25.39" y1="136" x2="56" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 896 B

1
app/src/lib/assets/icons/logout.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="112 40 48 40 48 216 112 216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="128" x2="224" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="184 88 224 128 184 168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 543 B

1
app/src/lib/assets/icons/logs.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="88" y1="64" x2="216" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="192" x2="216" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="44" cy="64" r="12"/><circle cx="44" cy="128" r="12"/><circle cx="44" cy="192" r="12"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 631 B

1
app/src/lib/assets/icons/printer.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="64 80 64 40 192 40 192 80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="64" y="152" width="128" height="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M64,176H24V96c0-8.84,7.76-16,17.33-16H214.67C224.24,80,232,87.16,232,96v80H192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="188" cy="116" r="12"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 625 B

1
app/src/lib/assets/icons/protokoll.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,224H56a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h96l56,56V216A8,8,0,0,1,200,224Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="152 32 152 88 208 88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="96" y1="136" x2="160" y2="136" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="96" y1="168" x2="160" y2="168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 719 B

1
app/src/lib/assets/icons/stations.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><rect x="48" y="48" width="64" height="64" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="48" y="144" width="64" height="64" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="144" y="48" width="64" height="64" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="144" y1="144" x2="144" y2="176" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="144 208 176 208 176 144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="176" y1="160" x2="208" y2="160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="208" y1="192" x2="208" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

48
app/src/routes/admin/+layout.svelte
View file

@ -3,6 +3,11 @@
import { goto } from '$app/navigation';
import { pb } from '$lib/pb';
import logo from '$lib/assets/checkflo-logo.png';
import iconDashboard from '$lib/assets/icons/dashboard.svg';
import iconLogs from '$lib/assets/icons/logs.svg';
import iconProtokoll from '$lib/assets/icons/protokoll.svg';
import iconStations from '$lib/assets/icons/stations.svg';
import iconLogout from '$lib/assets/icons/logout.svg';
let { children } = $props();
@ -14,10 +19,10 @@
}
const navItems = [
{ href: '/admin/dashboard', label: 'Dashboard', icon: '◈' },
{ href: '/admin/logs', label: 'Einträge', icon: '≡' },
{ href: '/admin/protokoll', label: 'Protokoll', icon: '📄' },
{ href: '/admin/stations', label: 'Stationen', icon: '⊞' }
{ href: '/admin/dashboard', label: 'Dashboard', icon: iconDashboard },
{ href: '/admin/logs', label: 'Einträge', icon: iconLogs },
{ href: '/admin/protokoll', label: 'Protokoll', icon: iconProtokoll },
{ href: '/admin/stations', label: 'Stationen', icon: iconStations }
];
</script>
@ -36,12 +41,15 @@
class="nav-item"
class:active={$page.url.pathname.startsWith(item.href)}
>
<span class="nav-icon">{item.icon}</span>
<img src={item.icon} alt="" class="nav-icon" />
<span>{item.label}</span>
</a>
{/each}
</nav>
<button class="logout" onclick={logout}>Abmelden</button>
<button class="logout" onclick={logout}>
<img src={iconLogout} alt="" class="nav-icon" />
Abmelden
</button>
</aside>
<main>
@ -85,20 +93,39 @@
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(249,115,22,0.15); color: #F97316; }
.nav-icon { font-size: 1.1rem; }
.nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(55%) sepia(14%) saturate(400%) hue-rotate(182deg);
}
.nav-item.active .nav-icon {
filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
}
.nav-item:hover .nav-icon {
filter: brightness(0) invert(1);
}
.logout {
display: flex;
align-items: center;
gap: 0.75rem;
background: none;
border: 1px solid #2a3347;
color: #8892a4;
padding: 0.6rem;
padding: 0.6rem 0.75rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.15s;
margin-top: 1rem;
width: 100%;
}
.logout:hover { border-color: #F97316; color: #F97316; }
.logout:hover .nav-icon {
filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
}
main {
flex: 1;
@ -116,8 +143,9 @@
}
.logo-link { margin-bottom: 0; margin-right: auto; }
nav { flex-direction: row; flex: 0; gap: 0.5rem; }
.nav-item span:last-child { display: none; }
.logout { margin-top: 0; padding: 0.5rem 0.75rem; }
.nav-item span { display: none; }
.logout { margin-top: 0; padding: 0.5rem 0.75rem; width: auto; }
.logout :global(span) { display: none; }
main { padding: 1rem; }
}
</style>