4d96dfb9ac
The layout was capped at 1200px and listed links in a single column. Drop the cap and lay the cards out in a grid: three per row on wide screens, two from 1000px, one below that. To make the narrower cards work, shorten the edit action to an icon button so the title and URL keep their room, and let the edit form's field and button rows wrap. Also fixes pre-existing horizontal overflow on phone widths by stacking the sidebar above the content and letting the add-link form wrap. Grid tracks use minmax(0, 1fr) so cards can shrink below their content's intrinsic width instead of pushing the page wider. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
54 lines
2.1 KiB
HTML
54 lines
2.1 KiB
HTML
<div class="panel link-card" id="link-{{ link.id }}">
|
||
<div style="display:flex; justify-content:space-between; gap:12px;">
|
||
<div style="min-width:0;">
|
||
<a href="{{ link.url }}" target="_blank" rel="noopener"
|
||
style="font-weight:600; font-size:1.05rem;">{{ link.title or link.url }}</a>
|
||
<div class="muted" style="font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
|
||
{{ link.url }}
|
||
</div>
|
||
<div class="muted" style="font-size:.75rem; margin-top:3px;">
|
||
🕓 hinzugefügt am {{ link.created_at | datum }}
|
||
</div>
|
||
</div>
|
||
<div style="display:flex; gap:4px; flex-shrink:0; align-items:flex-start;">
|
||
<button class="ghost" style="padding:4px 9px; font-size:.85rem;"
|
||
title="Bearbeiten"
|
||
hx-get="/links/{{ link.id }}/edit"
|
||
hx-target="#link-{{ link.id }}"
|
||
hx-swap="outerHTML">✎</button>
|
||
<button class="danger"
|
||
title="Löschen"
|
||
hx-delete="/links/{{ link.id }}"
|
||
hx-target="#link-{{ link.id }}"
|
||
hx-swap="outerHTML"
|
||
hx-confirm="Diesen Link wirklich löschen?">✕</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if link.summary %}
|
||
<p style="margin:10px 0 8px;">{{ link.summary }}</p>
|
||
{% elif link.status == 'no_content' %}
|
||
<p class="muted" style="margin:10px 0 8px; font-style:italic;">
|
||
Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
|
||
</p>
|
||
{% endif %}
|
||
|
||
<div style="display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem;">
|
||
{% if link.category %}
|
||
<span style="background:var(--accent); color:white; padding:2px 9px; border-radius:99px;">
|
||
{{ link.category }}
|
||
</span>
|
||
{% endif %}
|
||
{% if link.manufacturer %}
|
||
<span style="background:#0e7490; color:#cffafe; padding:2px 9px; border-radius:99px;">
|
||
🏢 {{ link.manufacturer }}
|
||
</span>
|
||
{% endif %}
|
||
{% for tag in link.tag_list %}
|
||
<span style="background:var(--panel2); color:var(--muted); padding:2px 9px; border-radius:99px;">
|
||
#{{ tag }}
|
||
</span>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|