From 7ab2af94efd50f726bb66a67c593558f40f62898 Mon Sep 17 00:00:00 2001
From: "Dustin C. Hatch" <dustin@hatch.name>
Date: Sun, 9 Mar 2025 21:14:03 -0500
Subject: [PATCH] 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.
---
 templates/receipt-list.html.tera | 39 ++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/templates/receipt-list.html.tera b/templates/receipt-list.html.tera
index e6c36f4..e831834 100644
--- a/templates/receipt-list.html.tera
+++ b/templates/receipt-list.html.tera
@@ -1,8 +1,12 @@
 {% extends "base" %} {% block head %}
 <title>Receipts</title>
 <style>
+  article {
+    text-align: center;
+  }
+
   .receipt-card {
-    max-width: 20%;
+    max-width: 250px;
     margin: 1em;
   }
 
@@ -36,22 +40,23 @@
     Receipt</sl-button
   >
 </p>
-{% 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 %} {% endblock %} {% block scripts %}
+<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>
   (() => {