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

Expand card to full grid width while editing

Browse Source 
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>
This commit is contained in:
Erik Thiele
2026-07-30 15:22:48 +02:00
parent 11eb770c8b
commit 84b6ca99ae
3 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/templates/_prompt_card_edit.html
View File

@@ -1,5 +1,5 @@
{% import "_icons.html" as icons %}
<div class="panel link-card" id="prompt-{{ prompt.id }}">
<div class="panel link-card card-edit-wide" id="prompt-{{ prompt.id }}">
<form hx-put="/prompts/{{ prompt.id }}" hx-target="#prompt-{{ prompt.id }}" hx-swap="outerHTML"
hx-disabled-elt="button">
<div class="muted" style="font-size:.75rem; margin:0 0 10px;">
@@ -13,22 +13,23 @@
<div class="field">
<label>Prompt-Text</label>
<textarea name="content" rows="6" 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;">{{ prompt.content }}</textarea>
<textarea name="content" rows="12" 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;">{{ prompt.content }}</textarea>
</div>
<div class="field">
<label>Kategorie</label>
<input type="text" name="category" value="{{ prompt.category }}"
list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
autocomplete="off">
<datalist id="prompt-cats-{{ prompt.id }}">
{% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
</datalist>
</div>
<div class="field">
<label>Tags (mit Komma getrennt)</label>
<input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
<div style="display:flex; gap:12px; flex-wrap:wrap;">
<div class="field" style="flex:1 1 200px;">
<label>Kategorie</label>
<input type="text" name="category" value="{{ prompt.category }}"
list="prompt-cats-{{ prompt.id }}" placeholder="wählen oder neu eingeben"
autocomplete="off">
<datalist id="prompt-cats-{{ prompt.id }}">
{% for name in all_categories %}<option value="{{ name }}"></option>{% endfor %}
</datalist>
</div>
<div class="field" style="flex:2 1 300px;">
<label>Tags (mit Komma getrennt)</label>
<input type="text" name="tags" value="{{ prompt.tag_list | join(', ') }}">
</div>
</div>
<div style="display:flex; justify-content:space-between; gap:8px; margin-top:4px; flex-wrap:wrap;">