steve/restic-manager
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

ui(tags): edit-button label, Save-tags width, persistent help text

Browse Source
This commit is contained in:
Steve Cliff
2026-05-05 11:23:36 +01:00
parent 168059ae45
commit 2421d5d389
1 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/partials/host_chrome.html
+23 -16
View File
@@ -41,10 +41,10 @@
<h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1> <h1 class="mono text-[26px] font-medium tracking-[0.005em] text-ink">{{$host.Name}}</h1>
<div class="flex gap-1.5 items-center"> <div class="flex gap-1.5 items-center">
{{range $host.Tags}}<a href="/?tag={{.}}" class="tag" title="filter dashboard by this tag">{{.}}</a>{{end}} {{range $host.Tags}}<a href="/?tag={{.}}" class="tag" title="filter dashboard by this tag">{{.}}</a>{{end}}
<button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid" <button type="button" class="text-ink-fade text-[11px] hover:text-ink-mid whitespace-nowrap"
style="padding: 2px 6px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;" style="padding: 2px 8px; border: 1px dashed var(--line); border-radius: 3px; cursor: pointer;"
onclick="document.getElementById('tags-edit-{{$host.ID}}').classList.toggle('hidden')" onclick="document.getElementById('tags-edit-{{$host.ID}}').classList.toggle('hidden')"
title="Edit tags">+ tag</button> title="Edit tags">{{if $host.Tags}}edit tags{{else}}add tags{{end}}</button>
</div> </div>
{{if gt $page.ScheduleVersion 0}} {{if gt $page.ScheduleVersion 0}}
<span class="mono text-[11px] text-ink-mute ml-2"> <span class="mono text-[11px] text-ink-mute ml-2">
@@ -57,21 +57,28 @@
</span> </span>
{{end}} {{end}}
</div> </div>
{{/* Inline tags editor — hidden by default; toggled by the "+ tag" {{/* Inline tags editor — hidden by default; toggled by the
button above. Comma-separated input with autocomplete sourced "edit/add tags" button above. Comma-separated input with
from the fleet's distinct tags via a <datalist>. */}} autocomplete sourced from the fleet's distinct tags via a
<datalist>. The help line under the input is always visible
because the placeholder hint disappears once the field has
a value, and operators editing existing tags are exactly
the people most likely to forget the comma rule. */}}
<form id="tags-edit-{{$host.ID}}" method="post" <form id="tags-edit-{{$host.ID}}" method="post"
action="/hosts/{{$host.ID}}/tags" action="/hosts/{{$host.ID}}/tags"
class="hidden mt-3 flex items-center gap-2"> class="hidden mt-3"
<input type="text" name="tags" class="field mono text-[12px]" style="max-width: 640px;">
style="max-width: 480px;" <div class="flex items-start gap-2">
value="{{joinComma $host.Tags}}" <input type="text" name="tags" class="field mono text-[12px]"
list="known-tags" value="{{joinComma $host.Tags}}"
placeholder="comma-separated · e.g. prod, london, db" /> list="known-tags"
<datalist id="known-tags"> placeholder="prod, london, db" />
{{range $page.KnownTags}}<option value="{{.}}">{{end}} <datalist id="known-tags">
</datalist> {{range $page.KnownTags}}<option value="{{.}}">{{end}}
<button type="submit" class="btn btn-primary">Save tags</button> </datalist>
<button type="submit" class="btn btn-primary whitespace-nowrap">Save tags</button>
</div>
<div class="field-help">Comma-separated. Lowercased automatically.</div>
</form> </form>
<div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute"> <div class="flex items-center gap-3 mt-3 text-[13px] text-ink-mute">
<span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span> <span class="mono text-ink-mid">{{$host.OS}}/{{$host.Arch}}</span>