starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-20 07:54:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: update layout and styling for Media Manager, including logo and background image integration

Browse Source
This commit is contained in:
maxDorninger
2025-05-24 23:05:57 +02:00
parent d779bac8ce
commit 0a3fef8908
4 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/lib/components/app-sidebar.svelte
View File

@@ -3,6 +3,7 @@
import Send from '@lucide/svelte/icons/send';
import TvIcon from '@lucide/svelte/icons/tv';
import LayoutPanelLeft from '@lucide/svelte/icons/layout-panel-left';
import {PUBLIC_VERSION} from '$env/static/public';
const data = {
navMain: [
@@ -72,7 +73,7 @@
<img class="size-12" src={logo} alt="Media Manager Logo"/>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-semibold">Media Manager</span>
<span class="truncate text-xs">version? or smth else?</span>
<span class="truncate text-xs">v{PUBLIC_VERSION}</span>
</div>
</a>
{/snippet}

2
web/src/lib/components/logo-side-by-side.svelte
View File

@@ -6,5 +6,5 @@
<div {...props} class="flex items-center">
<img alt="Logo" class="mr-2 h-12 w-12" src={logo}/>
<span class="text-3xl font-bold">Media Manager</span>
<span class="text-3xl font-bold dark:text-white">Media Manager</span>
</div>

BIN
web/src/lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

36
web/src/routes/login/+page.svelte
View File

@@ -1,15 +1,33 @@
<script lang="ts">
import LoginForm from '$lib/components/login-form.svelte';
import Logo from '$lib/components/logo-side-by-side.svelte';
import logo from '$lib/images/logo.svg';
import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg';
import {toOptimizedURL} from "sveltekit-image-optimize/components";
</script>
<div class="flex h-screen w-full items-center justify-center px-4 pt-16">
<div class="flex flex-col items-center">
<!-- Ensure Logo doesn't inherit conflicting styles -->
<div class="mb-16 scale-150">
<Logo/>
<div class="grid min-h-svh lg:grid-cols-2">
<div class="flex flex-col gap-4 p-6 md:p-10">
<div class="flex justify-center gap-2 md:justify-start">
<a class="flex items-center gap-2 font-medium" href="##">
<div
class="text-primary-foreground flex size-16 items-center justify-center rounded-md"
>
<img alt="MediaManager Logo" class="size-12" src={logo}/>
</div>
<h1 class="scale-110">Media Manager</h1>
</a>
</div>
<div class="flex flex-1 items-center justify-center">
<div class="w-full max-w-xs">
<LoginForm/>
</div>
</div>
<LoginForm/>
</div>
</div>
<div class="relative hidden lg:block">
<img
alt="background"
class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale rounded-l-3xl "
src="{toOptimizedURL(background)}"
/>
</div>
</div>