75 lines
1.7 KiB
Plaintext
75 lines
1.7 KiB
Plaintext
{% extends "base" %} {% block head %}
|
|
<title>Receipts</title>
|
|
<style>
|
|
article {
|
|
text-align: center;
|
|
}
|
|
|
|
.receipt-card {
|
|
max-width: 250px;
|
|
margin: 1em;
|
|
}
|
|
|
|
.receipt-card > a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.receipt-card .vendor {
|
|
font-weight: bold;
|
|
font-size: 115%;
|
|
}
|
|
|
|
.receipt-card .date {
|
|
font-size: 75%;
|
|
color: var(--sl-color-neutral-500);
|
|
}
|
|
|
|
.receipt-card :link,
|
|
.receipt-card :visited {
|
|
color: var(--sl-color-neutral-900);
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
{% endblock %} {% block main %}
|
|
<h1>Receipts</h1>
|
|
<p class="table-actions">
|
|
<sl-button variant="primary" size="large" href="/receipts/add"
|
|
><sl-icon slot="prefix" name="file-earmark-plus"></sl-icon>Add
|
|
Receipt</sl-button
|
|
>
|
|
</p>
|
|
<article>
|
|
{% for receipt in receipts -%}
|
|
<sl-card class="receipt-card">
|
|
<img
|
|
slot="image"
|
|
src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
|
|
alt="Receipt {{ receipt.id }}"
|
|
/>
|
|
<a href="/receipts/{{ receipt.id }}">
|
|
<div class="vendor">{{ receipt.vendor }}</div>
|
|
<div class="amount">$ {{ receipt.amount }}</div>
|
|
</a>
|
|
<div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
|
|
</sl-card>
|
|
{% endfor %}
|
|
</article>
|
|
{% endblock %} {% block scripts %}
|
|
<script src="/static/receipt-list.js"></script>
|
|
<script>
|
|
(() => {
|
|
document.querySelectorAll(".receipt-card").forEach((e) => {
|
|
const a = e.querySelector("a");
|
|
if (a && a.href) {
|
|
e.style.cursor = "pointer";
|
|
e.addEventListener("click", () => {
|
|
window.location.href = a.href;
|
|
});
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|