arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix(19): status badge and edit/trash on same line

Browse source 
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-05-17 22:18:52 +02:00
parent f506ceeda6
commit af8b4fa38f
No known key found for this signature in database
1 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
backend/templates/tablos.templ
View file

@ -146,37 +146,36 @@ templ TabloProjectCard(card TabloCardView, csrfToken string) {
} }
<h3 class="text-base font-semibold text-gray-900 flex-1 line-clamp-2">{ card.Tablo.Title }</h3> <h3 class="text-base font-semibold text-gray-900 flex-1 line-clamp-2">{ card.Tablo.Title }</h3>
</div> </div>
<!-- Row 2: DB status badge --> <!-- Row 2: status badge + edit + delete (same line) -->
<div> <div class="flex items-center justify-between pt-1 border-t border-gray-100">
if card.Tablo.Status == "archived" { if card.Tablo.Status == "archived" {
<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">Archivé</span> <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">Archivé</span>
} else { } else {
<span class="px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-200">Actif</span> <span class="px-2.5 py-1 rounded-full text-xs font-medium bg-green-50 text-green-600 border border-green-200">Actif</span>
} }
</div> <div class="flex items-center gap-1">
<!-- Row 3: edit + delete actions --> <a
<div class="flex items-center gap-1 pt-1 border-t border-gray-100"> href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) }
<a class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
href={ templ.SafeURL("/tablos/" + card.Tablo.ID.String()) } aria-label="Edit tablo"
class="inline-flex items-center justify-center w-8 h-8 rounded-md text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors" onclick="event.stopPropagation()"
aria-label="Edit tablo" >
onclick="event.stopPropagation()" <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
> </a>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg> <div class="tablo-delete-zone">
</a> @ui.IconButton(ui.IconButtonProps{
<div class="tablo-delete-zone"> Label: "Delete tablo",
@ui.IconButton(ui.IconButtonProps{ Icon: "trash",
Label: "Delete tablo", Variant: ui.IconButtonVariantDanger,
Icon: "trash", Tone: ui.IconButtonToneGhost,
Variant: ui.IconButtonVariantDanger, Type: "button",
Tone: ui.IconButtonToneGhost, Attrs: templ.Attributes{
Type: "button", "hx-get": "/tablos/" + card.Tablo.ID.String() + "/delete-confirm",
Attrs: templ.Attributes{ "hx-target": "closest .tablo-delete-zone",
"hx-get": "/tablos/" + card.Tablo.ID.String() + "/delete-confirm", "hx-swap": "outerHTML",
"hx-target": "closest .tablo-delete-zone", },
"hx-swap": "outerHTML", })
}, </div>
})
</div> </div>
</div> </div>
</div> </div>