archeious/quartermaster
1
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

fix(ui): condense add-entry to a compact disclosure trigger

Browse source 
Every section used to end with a wide horizontal add form (name
input, amount input, button, notes input spanning the row). It took
up more horizontal real estate than the entries themselves. Now the
form is wrapped in a <details class="add-entry"> whose summary is a
small tracked-caps link ("+ add fixed amount bills"). Click to
reveal the same form below; HTMX submission still resets and hides
on success.

Same treatment on the budget page sections and the month page
sections.

Refs #19

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
archeious 2026-04-17 17:46:39 -06:00
parent 2f571b236e
commit 1384fae5e4
3 changed files with 64 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/quartermaster/static/app.css
View file

@ -421,6 +421,40 @@ tr.add-row td {
display: block;
}
/* Add-entry disclosure: collapsed trigger, expanded form */
details.add-entry { margin: 0; }
details.add-entry > summary {
list-style: none;
cursor: pointer;
user-select: none;
display: inline-block;
padding: 0.1rem 0.25rem;
}
details.add-entry > summary::-webkit-details-marker { display: none; }
details.add-entry .add-trigger {
font-family: var(--sans);
font-size: 0.78rem;
font-weight: 500;
color: var(--muted);
letter-spacing: 0.18em;
text-transform: uppercase;
border-bottom: 1px dashed transparent;
padding-bottom: 1px;
transition: color 0.12s ease, border-color 0.12s ease;
}
details.add-entry > summary:hover .add-trigger {
color: var(--ink);
border-bottom-color: var(--rule);
}
details.add-entry[open] > summary .add-trigger {
color: var(--ink);
border-bottom-color: var(--ink);
}
details.add-entry > .add-form,
details.add-entry > .month-add-form {
margin-top: 0.45rem;
}
.entry-name {
font-family: var(--sans);
font-weight: 500;

27
src/quartermaster/templates/partials/month_section.html
View file

@ -203,18 +203,21 @@
{% endfor %}
{% if editable %}
<div class="add-row">
<form
class="add-form month-add-form"
hx-post="/month/{{ month.year_month }}/sections/{{ section.section.value }}/entries"
hx-target="#section-{{ section.section.value }}"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<input type="text" name="name" placeholder="Name" required>
<input type="number" name="planned" step="0.01" min="0" placeholder="Planned" required>
<button type="submit">Add</button>
<input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
</form>
<details class="add-entry">
<summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
<form
class="add-form month-add-form"
hx-post="/month/{{ month.year_month }}/sections/{{ section.section.value }}/entries"
hx-target="#section-{{ section.section.value }}"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<input type="text" name="name" placeholder="Name" required>
<input type="number" name="planned" step="0.01" min="0" placeholder="Planned" required>
<button type="submit">Add</button>
<input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
</form>
</details>
</div>
{% endif %}
</div>

27
src/quartermaster/templates/partials/section.html
View file

@ -44,18 +44,21 @@
{% endfor %}
<tr class="add-row">
<td colspan="4">
<form
class="add-form"
hx-post="/sections/{{ section.section.value }}/entries"
hx-target="#section-{{ section.section.value }}"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<input type="text" name="name" placeholder="Name" required>
<input type="number" name="amount" step="0.01" min="0" placeholder="0.00" required>
<button type="submit">Add</button>
<input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
</form>
<details class="add-entry">
<summary><span class="add-trigger">+ add {{ section.label|lower }}</span></summary>
<form
class="add-form"
hx-post="/sections/{{ section.section.value }}/entries"
hx-target="#section-{{ section.section.value }}"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<input type="text" name="name" placeholder="Name" required>
<input type="number" name="amount" step="0.01" min="0" placeholder="0.00" required>
<button type="submit">Add</button>
<input class="notes-input add-notes" type="text" name="notes" placeholder="notes (optional)">
</form>
</details>
</td>
</tr>
</tbody>