137 lines
3.1 KiB
Plaintext
137 lines
3.1 KiB
Plaintext
{% extends "base" %} {% block head %}
|
|
<title>Receipts</title>
|
|
<style>
|
|
article {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: stretch;
|
|
}
|
|
|
|
.receipt-card {
|
|
max-width: 250px;
|
|
margin: 1em;
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
.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);
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.receipt-card :link,
|
|
.receipt-card :visited {
|
|
color: var(--sl-color-neutral-900);
|
|
text-decoration: none;
|
|
}
|
|
|
|
sl-card.receipt-card::part(base) {
|
|
height: 100%;
|
|
}
|
|
|
|
sl-card.receipt-card::part(image) {
|
|
height: 100%;
|
|
}
|
|
|
|
sl-card.receipt-card [slot="image"] img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
sl-card.receipt-card::part(body) {
|
|
padding-bottom: calc(var(--padding) / 2);
|
|
}
|
|
|
|
sl-card.receipt-card::part(footer) {
|
|
padding: 0 calc(var(--padding) / 2);
|
|
}
|
|
|
|
sl-card.receipt-card footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
#confirm-delete dl {
|
|
display: grid;
|
|
grid-template-columns: max-content max-content;
|
|
gap: var(--sl-spacing-x-small) var(--sl-spacing-medium);
|
|
padding: 1rem;
|
|
margin: 0 0 1.5rem 0;
|
|
width: min-content;
|
|
}
|
|
#confirm-delete dl dt {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
#confirm-delete dl dd {
|
|
margin-left: 0;
|
|
}
|
|
</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" data-receipt-id="{{ receipt.id }}">
|
|
<a slot="image" href="/receipts/{{ receipt.id }}">
|
|
<img
|
|
src="/receipts/{{ receipt.id }}/thumbnail/{{ receipt.filename }}"
|
|
alt="Receipt {{ receipt.id }}"
|
|
/>
|
|
</a>
|
|
<a href="/receipts/{{ receipt.id }}">
|
|
<div class="vendor">{{ receipt.vendor }}</div>
|
|
<div class="amount">$ {{ receipt.amount }}</div>
|
|
</a>
|
|
<footer slot="footer">
|
|
<div
|
|
class="date"
|
|
data-date="{{ receipt.date | date(format='%A %_d %B %Y') }}"
|
|
>
|
|
{{ receipt.date | date(format="%a %_d %b %Y") }}
|
|
</div>
|
|
<sl-icon-button name="trash" label="Delete"></sl-icon-button>
|
|
</footer>
|
|
</sl-card>
|
|
{% endfor %}
|
|
</article>
|
|
<sl-dialog id="confirm-delete" label="Delete Receipt">
|
|
<p>
|
|
Are you sure you want to delete receipt <span class="receipt-id"></span>?
|
|
</p>
|
|
<dl>
|
|
<dt>Vendor</dt>
|
|
<dd class="vendor"></dd>
|
|
<dt>Amount</dt>
|
|
<dd class="amount"></dd>
|
|
<dt>Date</dt>
|
|
<dd class="date"></dd>
|
|
</dl>
|
|
<footer slot="footer" class="table-actions">
|
|
<sl-button aria-label="No">No</sl-button>
|
|
<sl-button variant="danger" aria-label="Yes">Yes</sl-button>
|
|
</footer>
|
|
</sl-dialog>
|
|
{% endblock %} {% block scripts %}
|
|
<script src="/static/receipt-list.js"></script>
|
|
{% endblock %}
|