fdfddf8ccf
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>
58 lines
1.8 KiB
HTML
58 lines
1.8 KiB
HTML
<div class="panel link-card" id="link-{{ link.id }}">
|
||
<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 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" style="padding:3px 6px;"
|
||
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>
|
||
|
||
<a href="{{ link.url }}" target="_blank" rel="noopener" class="card-title">
|
||
{{ link.title or link.url }}
|
||
</a>
|
||
|
||
<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 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>
|