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

UI redesign: condensed-sans ledger style with logo in the zero hero #18

Merged
claude-code merged 6 commits from feat/17-condensed-sans-redesign into main 2026-04-17 17:04:55 -06:00
Conversation 0 Commits 6 Files changed 26 +111 -53
8 changed files with 111 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 59ccb4db3c - Show all commits

20
src/quartermaster/templates/index.html
View file

@ -1,10 +1,9 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="budget"> <div class="page">
<nav class="month-nav budget-nav"> <nav class="budget-nav">
<span class="month-label">Budget configuration</span> <span class="month-label">Budget <span class="year">MMXXVI</span></span>
<span class="spacer"></span> <a class="nav-link" href="/month/{{ current_year_month }}">This month ({{ current_year_month }}) &rarr;</a>
<a class="nav-link" href="/month/{{ current_year_month }}">This month ({{ current_year_month }})</a>
{% if all_months %} {% if all_months %}
<select <select
class="month-picker" class="month-picker"
@ -18,13 +17,15 @@
</select> </select>
{% endif %} {% endif %}
</nav> </nav>
{% include "partials/budget_zero.html" %} {% include "partials/budget_zero.html" %}
{% for g in groups %} {% for g in groups %}
<details class="group" id="group-{{ g.group.value }}"{% if g.default_open %} open{% endif %}> <details class="group" id="group-{{ g.group.value }}"{% if g.default_open %} open{% endif %}>
<summary class="group-header"> <summary>
<span class="chevron" aria-hidden="true"></span> <span class="chevron" aria-hidden="true"></span>
<span class="group-name">{{ g.label }}</span> <span class="group-name">{{ g.label }}</span>
<span class="group-total" id="group-total-{{ g.group.value }}">${{ '%.2f' | format(g.total) }}</span> <span class="group-total" id="group-total-{{ g.group.value }}">${{ '{:,.2f}'.format(g.total) }}</span>
</summary> </summary>
{% for section in g.sections %} {% for section in g.sections %}
{% include "partials/section.html" %} {% include "partials/section.html" %}
@ -34,5 +35,10 @@
{% endfor %} {% endfor %}
</details> </details>
{% endfor %} {% endfor %}
<footer class="colophon">
the art of giving every dollar a job
<div class="signoff">Quartermaster</div>
</footer>
</div> </div>
{% endblock %} {% endblock %}

18
src/quartermaster/templates/month.html
View file

@ -1,17 +1,22 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="budget"> <div class="page">
{% include "partials/month_nav.html" %} {% include "partials/month_nav.html" %}
<div class="back-link-row">
<a class="back-link" href="/">Back to Budget &rsaquo;</a>
</div>
{% include "partials/month_zero.html" %} {% include "partials/month_zero.html" %}
{% for g in groups %} {% for g in groups %}
<details class="group" id="group-{{ g.group.value }}"{% if g.default_open %} open{% endif %}> <details class="group" id="group-{{ g.group.value }}"{% if g.default_open %} open{% endif %}>
<summary class="group-header"> <summary>
<span class="chevron" aria-hidden="true"></span> <span class="chevron" aria-hidden="true"></span>
<span class="group-name">{{ g.label }}</span> <span class="group-name">{{ g.label }}</span>
<span class="group-total" id="group-total-{{ g.group.value }}"> <span class="group-total" id="group-total-{{ g.group.value }}">
<span class="applied">${{ '%.2f' | format(g.total_applied) }}</span> <span class="applied">${{ '{:,.2f}'.format(g.total_applied) }}</span>
<span class="divider">/</span> <span class="divider">/</span>
<span class="planned">${{ '%.2f' | format(g.total_planned) }}</span> <span class="planned">${{ '{:,.2f}'.format(g.total_planned) }}</span>
</span> </span>
</summary> </summary>
{% for section in g.sections %} {% for section in g.sections %}
@ -22,5 +27,10 @@
{% endfor %} {% endfor %}
</details> </details>
{% endfor %} {% endfor %}
<footer class="colophon">
the art of giving every dollar a job
<div class="signoff">Quartermaster &middot; {{ year_month }}</div>
</footer>
</div> </div>
{% endblock %} {% endblock %}

19
src/quartermaster/templates/month_create.html
View file

@ -1,15 +1,17 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div class="budget"> <div class="page">
{% include "partials/month_nav.html" %} {% include "partials/month_nav.html" %}
<section class="section month-missing"> <div class="back-link-row">
<div class="section-header"> <a class="back-link" href="/">Back to Budget &rsaquo;</a>
<h2>No snapshot yet</h2>
</div> </div>
<section class="month-missing">
<h2>No snapshot yet</h2>
<p class="month-missing-body"> <p class="month-missing-body">
This month has not been created. Creating it will snapshot the current This month has not been created. Creating it will snapshot the current
budget: every entry, its planned amount, and the current Primary Debt budget: every entry, its planned amount, notes, and the current Primary
Target. Applied amounts start at $0.00. Debt Target. Applied amounts start at $0.00.
</p> </p>
<form <form
hx-post="/month/{{ year_month }}/create" hx-post="/month/{{ year_month }}/create"
@ -19,5 +21,10 @@
<button type="submit">Create {{ year_month }}</button> <button type="submit">Create {{ year_month }}</button>
</form> </form>
</section> </section>
<footer class="colophon">
the art of giving every dollar a job
<div class="signoff">Quartermaster</div>
</footer>
</div> </div>
{% endblock %} {% endblock %}

22
src/quartermaster/templates/partials/budget_zero.html
View file

@ -1,4 +1,22 @@
<section class="zero-widget" id="zero-widget" hx-swap-oob="outerHTML"> <section class="zero-widget" id="zero-widget" hx-swap-oob="outerHTML">
<div class="zero-label">Zero Amount</div> <div class="zero-brand">
<div class="zero-value tone-{{ tone }}">${{ '%.2f' | format(zero) }}</div> <img src="{{ url_for('static', path='brand/logo-full.png') }}" alt="Quartermaster">
</div>
<div class="zero-side left">
<div class="zero-sublabel">Budget balance</div>
<div class="zero-subvalue">{% if zero >= 0 %}unassigned{% else %}over-allocated{% endif %}</div>
</div>
<div class="zero-center">
<p class="zero-label">Zero Amount</p>
<h2 class="zero-value tone-{{ tone }}">
<span class="dollar">$</span>{{ '{:,.2f}'.format(zero).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero).split('.')[1] }}</span>
</h2>
<p class="zero-caption">
{% if tone == 'zero' %}every dollar has a home{% elif tone == 'positive' %}unassigned income remains{% else %}over-allocated, plan exceeds income{% endif %}
</p>
</div>
<div class="zero-side right">
<div class="zero-sublabel">Planning for</div>
<div class="zero-subvalue">{{ current_year_month }}</div>
</div>
</section> </section>

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

@ -1,24 +1,27 @@
<nav class="month-nav"> <nav class="month-line">
<a class="nav-link" href="/month/{{ prev_year_month }}" aria-label="Previous month">&larr; {{ prev_year_month }}</a> <a class="nav-month prev" href="/month/{{ prev_year_month }}" aria-label="Previous month">
<span class="month-label">{{ year_month }}</span> <span class="chev">&larr;</span> <em>{{ pretty_prev or prev_year_month }}</em>
<a class="nav-link" href="/month/{{ next_year_month }}" aria-label="Next month">{{ next_year_month }} &rarr;</a> </a>
<h2 class="month-title">{{ pretty_year_month or year_month }}</h2>
<a class="nav-month next" href="/month/{{ next_year_month }}" aria-label="Next month">
<em>{{ pretty_next or next_year_month }}</em> <span class="chev">&rarr;</span>
</a>
{% if state %} {% if state %}
<span class="state-badge state-{{ state }}"> <span class="state-badge state-{{ state }}">
{% if state == 'closed' and month.closed_at %} {% if state == 'closed' and month and month.closed_at %}
Closed {{ month.closed_at.strftime('%Y-%m-%d') }} Closed {{ month.closed_at.strftime('%Y-%m-%d') }}
{% else %} {% else %}
{{ state | capitalize }} {{ state }}
{% endif %} {% endif %}
</span> </span>
{% if state == 'planning' %} {% if state == 'planning' %}
<form class="lifecycle-form" hx-post="/month/{{ year_month }}/activate" hx-swap="none"> <form class="lifecycle-form" hx-post="/month/{{ year_month }}/activate" hx-swap="none">
<button type="submit" class="primary">Activate</button> <button type="submit">Activate</button>
</form> </form>
{% elif state == 'active' %} {% elif state == 'active' %}
<form class="lifecycle-form" hx-post="/month/{{ year_month }}/close" hx-swap="none"> <form class="lifecycle-form" hx-post="/month/{{ year_month }}/close" hx-swap="none">
<button <button
type="submit" type="submit"
class="primary"
{% if not can_close %}disabled title="Applied balance must equal $0.00 to close"{% endif %} {% if not can_close %}disabled title="Applied balance must equal $0.00 to close"{% endif %}
>Close</button> >Close</button>
</form> </form>
@ -27,13 +30,16 @@
<button type="submit" class="secondary">Reopen</button> <button type="submit" class="secondary">Reopen</button>
</form> </form>
{% endif %} {% endif %}
{% else %}
<span></span>
<span></span>
{% endif %} {% endif %}
<span class="spacer"></span> {% if all_months and all_months|length > 1 %}
{% if all_months %}
<select <select
class="month-picker" class="month-picker"
onchange="if(this.value){window.location=this.value}" onchange="if(this.value){window.location=this.value}"
aria-label="Jump to month" aria-label="Jump to month"
style="grid-column: 1 / -1; justify-self: end; margin-top: 0.3rem;"
> >
<option value="">Jump to...</option> <option value="">Jump to...</option>
{% for m in all_months %} {% for m in all_months %}
@ -44,5 +50,4 @@
{% endfor %} {% endfor %}
</select> </select>
{% endif %} {% endif %}
<a class="nav-link" href="/">Budget config</a>
</nav> </nav>

25
src/quartermaster/templates/partials/month_zero.html
View file

@ -1,13 +1,22 @@
<section class="zero-widget zero-widget-pair" id="zero-widget" hx-swap-oob="outerHTML"> <section class="zero-widget" id="zero-widget" hx-swap-oob="outerHTML">
<div class="zero-label">Zero Amount</div> <div class="zero-brand">
<div class="zero-values"> <img src="{{ url_for('static', path='brand/logo-full.png') }}" alt="Quartermaster">
<div class="zero-cell">
<div class="zero-sublabel">Planned</div>
<div class="zero-value tone-{{ planned_tone }}">${{ '%.2f' | format(zero.planned) }}</div>
</div> </div>
<div class="zero-cell"> <div class="zero-side left">
<div class="zero-sublabel">Applied</div> <div class="zero-sublabel">Applied</div>
<div class="zero-value tone-{{ applied_tone }}">${{ '%.2f' | format(zero.applied) }}</div> <div class="zero-subvalue">${{ '{:,.2f}'.format(zero.applied).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.applied).split('.')[1] }}</span></div>
</div> </div>
<div class="zero-center">
<p class="zero-label">Zero Amount</p>
<h2 class="zero-value tone-{{ applied_tone }}">
<span class="dollar">$</span>{{ '{:,.2f}'.format(zero.applied).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.applied).split('.')[1] }}</span>
</h2>
<p class="zero-caption">
{% if applied_tone == 'zero' %}the month balances{% elif applied_tone == 'positive' %}unassigned income remains{% else %}applied exceeds income{% endif %}
</p>
</div>
<div class="zero-side right">
<div class="zero-sublabel">Planned</div>
<div class="zero-subvalue">${{ '{:,.2f}'.format(zero.planned).split('.')[0] }}<span class="cent">.{{ '{:,.2f}'.format(zero.planned).split('.')[1] }}</span></div>
</div> </div>
</section> </section>

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

@ -2,15 +2,16 @@
<div class="section-header"> <div class="section-header">
<h2>{{ section.label }}</h2> <h2>{{ section.label }}</h2>
<span class="total" data-testid="total-{{ section.section.value }}"> <span class="total" data-testid="total-{{ section.section.value }}">
${{ '%.2f' | format(section.total) }} ${{ '{:,.2f}'.format(section.total) }}
</span> </span>
</div> </div>
<table class="entries"> <table class="entries">
<tbody> <tbody>
{% for entry in section.entries %} {% for entry in section.entries %}
<tr class="entry"> <tr class="entry state-unchanged" style="--ratio: 1">
<td class="entry-name">{{ entry.name }}</td> <td class="entry-name">{{ entry.name }}</td>
<td class="entry-amount">${{ '%.2f' | format(entry.amount) }}</td> <td class="entry-amount">${{ '{:,.2f}'.format(entry.amount) }}</td>
<td class="entry-amount"></td>
<td class="entry-actions"> <td class="entry-actions">
<button <button
class="delete" class="delete"
@ -23,7 +24,7 @@
</td> </td>
</tr> </tr>
<tr class="entry-notes-row"> <tr class="entry-notes-row">
<td colspan="3"> <td colspan="4">
<input <input
class="notes-input" class="notes-input"
type="text" type="text"
@ -39,10 +40,10 @@
</td> </td>
</tr> </tr>
{% else %} {% else %}
<tr class="empty"><td colspan="3">No entries yet.</td></tr> <tr class="empty"><td colspan="4">No entries yet.</td></tr>
{% endfor %} {% endfor %}
<tr class="add-row"> <tr class="add-row">
<td colspan="3"> <td colspan="4">
<form <form
class="add-form" class="add-form"
hx-post="/sections/{{ section.section.value }}/entries" hx-post="/sections/{{ section.section.value }}/entries"

12
src/quartermaster/templates/partials/target_card.html
View file

@ -2,35 +2,37 @@
<div class="section-header"> <div class="section-header">
<h2>Primary Debt Target</h2> <h2>Primary Debt Target</h2>
{% if target.entry %} {% if target.entry %}
<span class="total">${{ '%.2f' | format(target.entry.amount) }}</span> <span class="total">${{ '{:,.2f}'.format(target.entry.amount) }}</span>
{% else %} {% else %}
<span class="total empty">$0.00</span> <span class="total empty">$0.00</span>
{% endif %} {% endif %}
</div> </div>
<table class="entries"> <table class="entries">
<tbody> <tbody>
<tr class="entry"> <tr class="entry" style="--ratio: 1">
<td class="entry-name"> <td class="entry-name">
{% if target.entry %}{{ target.entry.name }}{% else %}<span class="muted">No target selected.</span>{% endif %} {% if target.entry %}{{ target.entry.name }}{% else %}<span class="muted">No target selected.</span>{% endif %}
</td> </td>
<td class="entry-amount"></td> <td class="entry-amount"></td>
<td class="entry-amount"></td>
<td class="entry-actions"></td> <td class="entry-actions"></td>
</tr> </tr>
<tr class="add-row"> <tr class="add-row">
<td colspan="3"> <td colspan="4">
<form <form
class="target-form" class="target-form"
hx-post="/debt-target" hx-post="/debt-target"
hx-target="#section-debt_target" hx-target="#section-debt_target"
hx-swap="outerHTML" hx-swap="outerHTML"
> >
<select name="debt_minimum_id"> <label for="debt-target-select">Choose from Debt Minimums</label>
<select id="debt-target-select" name="debt_minimum_id">
<option value="">(none)</option> <option value="">(none)</option>
{% for dm in debt_minimums %} {% for dm in debt_minimums %}
<option <option
value="{{ dm.id }}" value="{{ dm.id }}"
{% if target.debt_minimum_id == dm.id %}selected{% endif %} {% if target.debt_minimum_id == dm.id %}selected{% endif %}
>{{ dm.name }}: ${{ '%.2f' | format(dm.amount) }}</option> >{{ dm.name }}: ${{ '{:,.2f}'.format(dm.amount) }}</option>
{% endfor %} {% endfor %}
</select> </select>
<button type="submit">Set</button> <button type="submit">Set</button>