PLG_Development/PLG-MuDiCS
3
0
Fork 0
mirror of https://codeberg.org/PLG-Development/PLG-MuDiCS synced 2026-07-06 17:07:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve folder view - test with display-api

Browse Source
This commit is contained in:
E44
2025-10-30 08:59:22 +01:00
parent d92d8abc77
commit 9df03b6ccb
20 changed files with 1067 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
control/frontend/src/routes/test/+page.svelte
+44 -32
View File
@@ -1,35 +1,47 @@
<script lang="ts">
let isHoveringChild = false;
<script>
import { Minus, Settings, TvMinimalPlay } from 'lucide-svelte';
function handleClickParent() {
if (!isHoveringChild) {
console.log('Parent clicked');
}
}
function handleClickChild(event: MouseEvent) {
console.log('Child clicked');
// Verhindert, dass das Event nach oben propagiert
event.stopPropagation();
}
import Button from '../../components/Button.svelte';
import { pinned_display_id } from '../../ts/stores/ui_behavior';
import { fade, slide } from 'svelte/transition';
</script>
<div
class={`relative rounded-lg p-6 transition-colors duration-200
${isHoveringChild ? 'bg-gray-200' : 'bg-gray-300 hover:bg-gray-400 active:bg-gray-500'}
`}
on:click={handleClickParent}
>
<p>Ich bin das Haupt-Div</p>
<div
class="no-display-selectable mt-4 p-4 bg-white border rounded shadow cursor-pointer"
on:mouseenter={() => (isHoveringChild = true)}
on:mouseleave={() => (isHoveringChild = false)}
on:click={handleClickChild}
>
Ich bin das Kind-Div (no-display-selectable)
</div>
<p class="mt-4">Noch mehr Inhalt...</p>
</div>
<main class="bg-stone-900 h-dvh w-dvw text-stone-200 p-4 gap-4 grid grid-rows-[3rem_auto]">
<div class="w-[calc(100dvw-(8*var(--spacing)))] flex justify-between">
<span class="text-4xl font-bold content-center h-full"> PLG MuDiCS </span>
<Button className="aspect-square" bg="bg-stone-800">
<Settings></Settings>
</Button>
</div>
<div class="w-[calc(100dvw-(8*var(--spacing)))] grid grid-cols-2 gap-2">
<div class="h-[calc(100dvh-3rem-(12*var(--spacing)))] flex flex-col gap-2"></div>
<div
class="col-start-2 h-[calc(100dvh-3rem-(12*var(--spacing)))] rounded-2xl flex flex-col gap-2"
>
<div class="bg-stone-800 h-full rounded-2xl grid grid-rows-[2.5rem_auto]">
<div class="bg-stone-700 flex justify-between w-full p-1 rounded-t-2xl min-w-0 gap-2">
<span class="text-xl font-bold pl-2 content-center truncate min-w-0">
Dateien anzeigen und verwalten
</span>
<div class="flex flex-ro"></div>
</div>
<div class="flex flex-col gap-2 p-2 max-w-full overflow-hidden min-w-0">
<div class="flex flex-row justify-between gap-4 min-w-0">
<div class="flex flex-row gap-2 min-w-0 flex-1">
<Button className="px-3 flex items-center gap-3 min-w-0 flex-1 justify-start">
<TvMinimalPlay />
<!-- Text: nimmt Restbreite, darf schrumpfen & ellipsieren -->
<span class="truncate min-w-0 flex-1">Sehr lange Beschriftung für den Button</span>
</Button>
<div class="relative min-w-0 flex">
<button class="text-xl font-bold pl-2 content-center truncate min-w-0">
Dateien anzeigen und verwalten
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>