dustin
/
receipts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

receipt-list: Make cards bigger 

On mobile, we don't want 4 cards wide.  Let's make them a static size
and let there be however many fit on a row.
bugfix/ci-buildah
Dustin 2025-03-09 21:14:03 -05:00
parent e2b14ecf10
commit 7ab2af94ef
1 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
templates/receipt-list.html.tera
View File

@ -1,8 +1,12 @@
{% extends "base" %} {% block head %} {% extends "base" %} {% block head %}
<title>Receipts</title> <title>Receipts</title>
<style> <style>
article {
text-align: center;
}
.receipt-card { .receipt-card {
max-width: 20%; max-width: 250px;
margin: 1em; margin: 1em;
} }
@ -36,22 +40,23 @@
Receipt</sl-button Receipt</sl-button
> >
</p> </p>
{% for receipt in receipts -%} <article>
<sl-card class="receipt-card"> {% for receipt in receipts -%}
<img <sl-card class="receipt-card">
slot="image" <img
src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}" slot="image"
alt="Receipt {{ receipt.id }}" src="/receipts/{{ receipt.id }}/view/{{ receipt.filename }}"
/> alt="Receipt {{ receipt.id }}"
<a href="/receipts/{{ receipt.id }}"> />
<div class="vendor">{{ receipt.vendor }}</div> <a href="/receipts/{{ receipt.id }}">
<div class="amount">$ {{ receipt.amount }}</div> <div class="vendor">{{ receipt.vendor }}</div>
</a> <div class="amount">$ {{ receipt.amount }}</div>
<div class="date"> </a>
{{ receipt.date | date(format="%A %_d %B %Y") }} <div class="date">{{ receipt.date | date(format="%A %_d %B %Y") }}</div>
</div> </sl-card>
</sl-card> {% endfor %}
{% endfor %} {% endblock %} {% block scripts %} </article>
{% endblock %} {% block scripts %}
<script src="/static/receipt-list.js"></script> <script src="/static/receipt-list.js"></script>
<script> <script>
(() => { (() => {