Both the link and prompt edit forms were squeezed into a single grid column, making the summary/prompt textarea cramped. Add a .card-edit-wide class (grid-column: 1 / -1) applied to the edit partial's root element so it spans all columns instead, and lay out category/tags side by side in the prompt edit form to use the extra width. Also gives the prompt content textarea more rows (6 -> 12) since there's now room for it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
70 lines
3.0 KiB
HTML
70 lines
3.0 KiB
HTML
{% import "_icons.html" as icons %}
|
|
<div class="panel link-card card-edit-wide" id="link-{{ link.id }}">
|
|
<form hx-put="/links/{{ link.id }}" hx-target="#link-{{ link.id }}" hx-swap="outerHTML"
|
|
hx-disabled-elt="button">
|
|
<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:3px 0 10px;">
|
|
{{ icons.clock(size=13) }} hinzugefügt am {{ link.created_at | datum }}
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Titel</label>
|
|
<input type="text" name="title" value="{{ link.title }}">
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Zusammenfassung</label>
|
|
<textarea name="summary" rows="3" style="width:100%; background:var(--panel2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:10px 12px; font-size:.95rem; font-family:inherit;">{{ link.summary }}</textarea>
|
|
</div>
|
|
|
|
<div style="display:flex; gap:12px; flex-wrap:wrap;">
|
|
<div class="field" style="flex:1 1 160px;">
|
|
<label>Kategorie</label>
|
|
<input type="text" name="category" value="{{ link.category }}"
|
|
list="cats-{{ link.id }}" placeholder="wählen oder neu eingeben"
|
|
autocomplete="off">
|
|
<datalist id="cats-{{ link.id }}">
|
|
{% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
|
|
</datalist>
|
|
</div>
|
|
<div class="field" style="flex:1 1 160px;">
|
|
<label>Hersteller / Quelle</label>
|
|
<input type="text" name="manufacturer" value="{{ link.manufacturer }}"
|
|
list="mans-{{ link.id }}" placeholder="wählen oder neu eingeben"
|
|
autocomplete="off">
|
|
<datalist id="mans-{{ link.id }}">
|
|
{% for name in all_manufacturers %}<option value="{{ name }}"></option>{% endfor %}
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label>Tags (mit Komma getrennt)</label>
|
|
<input type="text" name="tags" value="{{ link.tag_list | join(', ') }}">
|
|
</div>
|
|
|
|
<div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">
|
|
<div style="display:flex; gap:8px;">
|
|
<button type="submit">Speichern</button>
|
|
<button type="button" class="ghost"
|
|
hx-get="/links/{{ link.id }}/view"
|
|
hx-target="#link-{{ link.id }}"
|
|
hx-swap="outerHTML">Abbrechen</button>
|
|
</div>
|
|
{% if ai_enabled %}
|
|
<button type="button" class="ghost"
|
|
hx-post="/links/{{ link.id }}/reanalyze"
|
|
hx-target="#link-{{ link.id }}"
|
|
hx-swap="outerHTML"
|
|
hx-disabled-elt="this"
|
|
hx-confirm="Link erneut laden und von der KI neu beschreiben lassen? Bestehende Angaben werden dabei ersetzt.">
|
|
<span class="htmx-indicator icon-spin">{{ icons.spinner(size=14) }}</span>
|
|
{{ icons.sparkles(size=14) }} KI neu beschreiben lassen
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</form>
|
|
</div>
|