ethiele/linkvault
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle link cards as a uniform tile grid

Browse Source 
Cards previously had ragged heights because summaries vary in length.
Follow the community-scripts.org card pattern instead: fixed-height
title and summary blocks (clamped to 2 and 3 lines with an ellipsis),
a colored letter avatar derived from the domain, category and
manufacturer as badges in the header, tags in a single clipped row,
and domain plus added-date in a footer.

The avatar color is derived locally from the domain, so no external
favicon requests are made.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
2026-07-20 15:34:27 +02:00
parent 4d96dfb9ac
commit fdfddf8ccf
3 changed files with 103 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/templates/_link_card.html
View File

@@ -1,22 +1,25 @@
<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 class="card-head">
<span class="card-avatar" style="--h: {{ link.url | hue }};">
{{ (link.url | domain)[:1] | upper or '?' }}
</span>
<div class="card-badges">
{% if link.category %}
<span class="badge badge-cat">{{ link.category }}</span>
{% endif %}
{% if link.manufacturer %}
<span class="badge badge-man">{{ link.manufacturer }}</span>
{% endif %}
</div>
<div style="display:flex; gap:4px; flex-shrink:0; align-items:flex-start;">
<button class="ghost" style="padding:4px 9px; font-size:.85rem;"
<div class="card-actions">
<button class="ghost" style="padding:3px 7px; font-size:.8rem;"
title="Bearbeiten"
hx-get="/links/{{ link.id }}/edit"
hx-target="#link-{{ link.id }}"
hx-swap="outerHTML">✎</button>
<button class="danger"
<button class="danger" style="padding:3px 6px;"
title="Löschen"
hx-delete="/links/{{ link.id }}"
hx-target="#link-{{ link.id }}"
@@ -25,29 +28,30 @@
</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 %}
<a href="{{ link.url }}" target="_blank" rel="noopener" class="card-title">
{{ link.title or link.url }}
</a>
<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 %}
<p class="card-summary">
{%- if link.summary -%}
{{ link.summary }}
{%- elif link.status == 'no_content' -%}
Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
{%- endif -%}
</p>
<div class="card-spacer"></div>
{% if link.tag_list %}
<div class="card-tags">
{% for tag in link.tag_list %}
<span style="background:var(--panel2); color:var(--muted); padding:2px 9px; border-radius:99px;">
#{{ tag }}
</span>
<span class="badge badge-tag">#{{ tag }}</span>
{% endfor %}
</div>
{% endif %}
<div class="card-foot">
<span class="card-domain" title="{{ link.url }}">{{ link.url | domain }}</span>
<span title="hinzugefügt am {{ link.created_at | datum }}">{{ link.created_at | datum }}</span>
</div>
</div>