admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FilesBlock: compact single-row layout

Browse Source 
Reduce padding, smaller icon, filename + ext/size on one line.
Description hidden on mobile, truncated on desktop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
2026-05-18 08:39:09 +02:00
parent 4b9214dbaf
commit 1825b7d9fe
1 changed files with 9 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/blocks/FilesBlock.svelte
+9 -13
View File
@@ -116,26 +116,22 @@
{#if resolved.length === 0}
<p class="text-sm text-stein-500">Keine Dateien verfügbar.</p>
{:else}
<ul class="flex flex-col gap-2 list-none! p-0 m-0! ml-0">
<ul class="flex flex-col gap-1 list-none! p-0 m-0! ml-0">
{#each resolved as f}
<li class="list-none! ml-0">
<a
href={f.href}
class="group flex items-start gap-3 rounded-xs border border-stein-200 bg-white px-3 py-2 hover:border-stein-400 hover:bg-stein-50 transition-colors"
class="group flex items-center gap-2 rounded-xs border border-stein-200 bg-white px-2.5 py-1.5 hover:border-stein-400 hover:bg-stein-50 transition-colors"
target="_blank"
rel="noopener noreferrer"
>
<Icon icon={f.iconName} class="size-6 shrink-0 text-stein-600" aria-hidden="true" />
<span class="flex flex-col min-w-0">
<span class="font-medium text-stein-900 group-hover:underline truncate">{f.label}</span>
{#if f.description}
<span class="text-sm text-stein-600">{f.description}</span>
{/if}
<span class="text-xs text-stein-500">
{#if f.ext}<span class="uppercase">{f.ext}</span>{/if}
{#if f.ext && f.sizeLabel} · {/if}
{#if f.sizeLabel}{f.sizeLabel}{/if}
</span>
<Icon icon={f.iconName} class="size-4 shrink-0 text-stein-500" aria-hidden="true" />
<span class="flex-1 min-w-0 text-sm text-stein-900 group-hover:underline truncate">{f.label}</span>
{#if f.description}
<span class="hidden md:block text-xs text-stein-400 truncate max-w-48">{f.description}</span>
{/if}
<span class="shrink-0 text-xs text-stein-400 tabular-nums">
{#if f.ext}<span class="uppercase">{f.ext}</span>{/if}{#if f.ext && f.sizeLabel} · {/if}{#if f.sizeLabel}{f.sizeLabel}{/if}
</span>
</a>
</li>