patx/projectpay
fix line items table
Commit 145341b · patx · 2026-06-28T16:24:09-04:00
Comments
No comments yet.
Diff
diff --git a/templates/_invoice_line_items.html b/templates/_invoice_line_items.html
new file mode 100644
index 0000000..331bebd
--- /dev/null
+++ b/templates/_invoice_line_items.html
@@ -0,0 +1,30 @@
+<section class="line-items-section">
+ <div class="invoice-line-list">
+ {% for item in project.line_items %}
+ <article class="invoice-line-card">
+ <div class="invoice-line-description">{{ item.name|star_emphasis }}</div>
+ <div class="invoice-line-amount">
+ <span>Price</span>
+ <strong>{{ item.amount_cents|money(currency) }}</strong>
+ </div>
+ </article>
+ {% endfor %}
+
+ <div class="invoice-summary">
+ <div class="invoice-summary-row invoice-summary-total">
+ <span>Total</span>
+ <strong>{{ project.total_cents|money(currency) }}</strong>
+ </div>
+ {% if project.paid_cents > 0 %}
+ <div class="invoice-summary-row">
+ <span>Paid</span>
+ <strong>{{ project.paid_cents|money(currency) }}</strong>
+ </div>
+ <div class="invoice-summary-row invoice-summary-total">
+ <span>Balance</span>
+ <strong>{{ project.balance_cents|money(currency) }}</strong>
+ </div>
+ {% endif %}
+ </div>
+ </div>
+</section>
diff --git a/templates/base.html b/templates/base.html
index 284b8fb..33c8c3a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -113,7 +113,9 @@
gap: 12px;
}
.project-card,
- .payment-card {
+ .payment-card,
+ .invoice-line-card,
+ .invoice-summary {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
@@ -145,6 +147,50 @@
margin-top: 12px;
}
.payment-card-reference { overflow-wrap: anywhere; }
+ .line-items-section { margin-bottom: 16px; }
+ .invoice-line-list {
+ display: grid;
+ gap: 10px;
+ }
+ .invoice-line-card {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ gap: 12px;
+ align-items: start;
+ }
+ .invoice-line-description {
+ min-width: 0;
+ overflow-wrap: anywhere;
+ }
+ .invoice-line-amount {
+ min-width: 0;
+ text-align: right;
+ }
+ .invoice-line-amount span,
+ .invoice-summary-row span {
+ display: block;
+ color: #697586;
+ font-size: 13px;
+ }
+ .invoice-line-amount strong,
+ .invoice-summary-row strong {
+ overflow-wrap: anywhere;
+ }
+ .invoice-summary {
+ display: grid;
+ gap: 8px;
+ }
+ .invoice-summary-row {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) max-content;
+ gap: 12px;
+ align-items: baseline;
+ }
+ .invoice-summary-row + .invoice-summary-row {
+ border-top: 1px solid #eceff3;
+ padding-top: 8px;
+ }
+ .invoice-summary-total strong { font-size: 18px; }
.line-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
@@ -323,6 +369,9 @@
.grid-2, .stats, .line-item, .project-card-main { grid-template-columns: 1fr; }
.line-item-text { grid-column: auto; }
.line-item-price { max-width: none; }
+ .invoice-line-card,
+ .invoice-summary-row { grid-template-columns: 1fr; }
+ .invoice-line-amount { text-align: left; }
.project-card-amount { text-align: left; }
.project-card-footer { justify-content: flex-start; }
.sticky-pay button { width: 100%; }
diff --git a/templates/detail.html b/templates/detail.html
index 27a6774..050f9dc 100644
--- a/templates/detail.html
+++ b/templates/detail.html
@@ -20,32 +20,7 @@
</div>
</section>
- <section class="section">
- <table>
- <tbody>
- {% for item in project.line_items %}
- <tr>
- <td>{{ item.name|star_emphasis }}</td>
- <td class="amount">{{ item.amount_cents|money(currency) }}</td>
- </tr>
- {% endfor %}
- <tr>
- <td></td>
- <td class="amount"><strong>Total {{ project.total_cents|money(currency) }}</strong></td>
- </tr>
- {% if project.paid_cents > 0 %}
- <tr>
- <td></td>
- <td class="amount">Paid {{ project.paid_cents|money(currency) }}</td>
- </tr>
- <tr>
- <td></td>
- <td class="amount"><strong>Balance {{ project.balance_cents|money(currency) }}</strong></td>
- </tr>
- {% endif %}
- </tbody>
- </table>
- </section>
+ {% include "_invoice_line_items.html" %}
{% if project.scope_terms %}
<section class="section">
diff --git a/templates/public_project.html b/templates/public_project.html
index 762a561..fc2be53 100644
--- a/templates/public_project.html
+++ b/templates/public_project.html
@@ -23,32 +23,7 @@
<div class="alert error">{{ error }}</div>
{% endif %}
- <section class="section">
- <table>
- <tbody>
- {% for item in project.line_items %}
- <tr>
- <td>{{ item.name|star_emphasis }}</td>
- <td class="amount">{{ item.amount_cents|money(currency) }}</td>
- </tr>
- {% endfor %}
- <tr>
- <td></td>
- <td class="amount"><strong>Total {{ project.total_cents|money(currency) }}</strong></td>
- </tr>
- {% if project.paid_cents > 0 %}
- <tr>
- <td></td>
- <td class="amount">Paid {{ project.paid_cents|money(currency) }}</td>
- </tr>
- <tr>
- <td></td>
- <td class="amount"><strong>Balance {{ project.balance_cents|money(currency) }}</strong></td>
- </tr>
- {% endif %}
- </tbody>
- </table>
- </section>
+ {% include "_invoice_line_items.html" %}
{% if project.scope_terms %}
<section class="section">