From aa669e9f530f67c2117f874dd1e54abf3e325a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BE=9D=E7=91=AA=E8=B2=93?= <imacat@mail.imacat.idv.tw>
Date: Mon, 6 Mar 2023 08:15:10 +0800
Subject: [PATCH] Replaced tables with CSS "display: grid" for the journal,
 ledger, and income and expenses, to allow using <a></a> as the table row.

---
 src/accounting/static/css/style.css           | 54 ++++++++++---
 .../accounting/report/income-expenses.html    | 79 +++++++++++--------
 .../templates/accounting/report/journal.html  | 50 ++++++------
 .../templates/accounting/report/ledger.html   | 74 +++++++++--------
 4 files changed, 157 insertions(+), 100 deletions(-)

diff --git a/src/accounting/static/css/style.css b/src/accounting/static/css/style.css
index 9f99a8a..197a27f 100644
--- a/src/accounting/static/css/style.css
+++ b/src/accounting/static/css/style.css
@@ -109,24 +109,60 @@
     border-top: thick double slategray;
 }
 
-/* The accounting report */
-.accounting-ledger-table thead {
+/* The report table */
+.accounting-report-table-header, .accounting-report-table-footer {
+    font-size: 1.2rem;
+    font-weight: bolder;
+}
+.accounting-report-table-header {
     border-bottom: thick double slategray;
 }
-.accounting-amount {
+.accounting-report-table-footer {
+    font-style: italic;
+    border-top: thick double slategray;
+}
+.accounting-report-table-row {
+    display: grid;
+}
+a.accounting-report-table-row {
+    color: inherit;
+    text-decoration: none;
+}
+.accounting-report-table-row > div {
+    padding: .5rem;
+}
+.accounting-report-table .accounting-amount {
     text-align: right;
 }
-td.accounting-amount {
+.accounting-report-table-body .accounting-amount {
     font-style: italic;
 }
+.accounting-report-table-body .accounting-report-table-row:nth-child(2n+1) {
+    background-color: #f2f2f2;
+}
+.accounting-report-table-body .accounting-report-table-row:hover {
+    background-color: rgba(0, 0, 0, 0.075);
+}
+.accounting-journal-table .accounting-report-table-row {
+    grid-template-columns: 1fr 1fr 2fr 4fr 1fr 1fr;
+}
+.accounting-ledger-table .accounting-report-table-row {
+    grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
+}
+.accounting-ledger-table .accounting-report-table-footer .accounting-report-table-row {
+    grid-template-columns: 5fr 1fr 1fr 1fr;
+}
+.accounting-income-expenses-table .accounting-report-table-row {
+    grid-template-columns: 1fr 2fr 4fr 1fr 1fr 1fr;
+}
+.accounting-income-expenses-table .accounting-report-table-footer .accounting-report-table-row {
+    grid-template-columns: 7fr 1fr 1fr 1fr;
+}
+
+/* The accounting report */
 .accounting-mobile-journal-credit {
     padding-left: 1rem;
 }
-.accounting-ledger-table tfoot {
-    border-top: thick double slategray;
-    font-weight: bolder;
-    font-style: italic;
-}
 .accounting-report-row {
     border: none;
 }
diff --git a/src/accounting/templates/accounting/report/income-expenses.html b/src/accounting/templates/accounting/report/income-expenses.html
index c18bd4d..5436088 100644
--- a/src/accounting/templates/accounting/report/income-expenses.html
+++ b/src/accounting/templates/accounting/report/income-expenses.html
@@ -149,40 +149,51 @@ First written: 2023/3/5
 {% if list %}
   {% include "accounting/include/pagination.html" %}
 
-  <table class="table table-striped table-hover d-none d-md-table accounting-ledger-table">
-  <thead>
-  <tr>
-    <th scope="col">{{ A_("Date") }}</th>
-    <th scope="col">{{ A_("Account") }}</th>
-    <th scope="col">{{ A_("Summary") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Income") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Expense") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Balance") }}</th>
-  </tr>
-  </thead>
-  <tbody>
-  {% for item in list %}
-    <tr {% if item.transaction is not none %} class="accounting-clickable accounting-table-row-link" data-href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}" {% endif %}>
-      <td>{{ item.date|accounting_format_date }}</td>
-      <td>{{ item.account.title|title }}</td>
-      <td>{{ item.summary|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.balance|accounting_format_amount }}</td>
-    </tr>
-  {% endfor %}
-  </tbody>
-  {% if report.total_row is not none %}
-    <tfoot>
-    <tr>
-      <td colspan="3">{{ A_("Total") }}</td>
-      <td class="accounting-amount">{{ report.total_row.income|accounting_format_amount }}</td>
-      <td class="accounting-amount">{{ report.total_row.expense|accounting_format_amount }}</td>
-      <td class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</td>
-    </tr>
-    </tfoot>
-  {% endif %}
-  </table>
+  <div class="d-none d-md-block accounting-report-table accounting-income-expenses-table">
+    <div class="accounting-report-table-header">
+      <div class="accounting-report-table-row">
+        <div>{{ A_("Date") }}</div>
+        <div>{{ A_("Account") }}</div>
+        <div>{{ A_("Summary") }}</div>
+        <div class="accounting-amount">{{ A_("Income") }}</div>
+        <div class="accounting-amount">{{ A_("Expense") }}</div>
+        <div class="accounting-amount">{{ A_("Balance") }}</div>
+      </div>
+    </div>
+    <div class="accounting-report-table-body">
+      {% for item in list %}
+        {% if item.transaction %}
+          <a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
+            <div>{{ item.date|accounting_format_date }}</div>
+            <div>{{ item.account.title|title }}</div>
+            <div>{{ item.summary|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
+          </a>
+        {% else %}
+          <div class="accounting-report-table-row">
+            <div>{{ item.date|accounting_format_date }}</div>
+            <div>{{ item.account.title|title }}</div>
+            <div>{{ item.summary|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.income|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.expense|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
+          </div>
+        {% endif %}
+      {% endfor %}
+    </div>
+    {% if report.total_row is not none %}
+      <div class="accounting-report-table-footer">
+        <div class="accounting-report-table-row">
+          <div>{{ A_("Total") }}</div>
+          <div class="accounting-amount">{{ report.total_row.income|accounting_format_amount }}</div>
+          <div class="accounting-amount">{{ report.total_row.expense|accounting_format_amount }}</div>
+          <div class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
 
   <div class="list-group d-md-none">
   {% for item in list %}
diff --git a/src/accounting/templates/accounting/report/journal.html b/src/accounting/templates/accounting/report/journal.html
index 0839ec7..a73f481 100644
--- a/src/accounting/templates/accounting/report/journal.html
+++ b/src/accounting/templates/accounting/report/journal.html
@@ -24,7 +24,7 @@ First written: 2023/3/4
 {% block accounting_scripts %}
   <script src="{{ url_for("accounting.static", filename="js/material-fab-speed-dial.js") }}"></script>
   <script src="{{ url_for("accounting.static", filename="js/period-chooser.js") }}"></script>
-  <script src="{{ url_for("accounting.static", filename="js/table-row-link.js") }}"></script>
+  {# <script src="{{ url_for("accounting.static", filename="js/table-row-link.js") }}"></script> #}
 {% endblock %}
 
 {% block header %}{% block title %}{{ _("Journal %(period)s", period=report.period.desc|title) }}{% endblock %}{% endblock %}
@@ -91,30 +91,30 @@ First written: 2023/3/4
 {% if list %}
   {% include "accounting/include/pagination.html" %}
 
-  <table class="table table-striped table-hover d-none d-md-table accounting-ledger-table">
-  <thead>
-  <tr>
-    <th scope="col">{{ A_("Date") }}</th>
-    <th scope="col">{{ A_("Currency") }}</th>
-    <th scope="col">{{ A_("Account") }}</th>
-    <th scope="col">{{ A_("Summary") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Debit") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Credit") }}</th>
-  </tr>
-  </thead>
-  <tbody>
-  {% for item in list %}
-    <tr class="accounting-clickable accounting-table-row-link" data-href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
-      <td>{{ item.transaction.date|accounting_format_date }}</td>
-      <td>{{ item.currency.name }}</td>
-      <td>{{ item.account.title|title }}</td>
-      <td>{{ item.summary|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</td>
-    </tr>
-  {% endfor %}
-  </tbody>
-  </table>
+  <div class="d-none d-md-block accounting-report-table accounting-journal-table">
+    <div class="accounting-report-table-header">
+      <div class="accounting-report-table-row">
+        <div>{{ A_("Date") }}</div>
+        <div>{{ A_("Currency") }}</div>
+        <div>{{ A_("Account") }}</div>
+        <div>{{ A_("Summary") }}</div>
+        <div class="accounting-amount">{{ A_("Debit") }}</div>
+        <div class="accounting-amount">{{ A_("Credit") }}</div>
+      </div>
+    </div>
+    <div class="accounting-report-table-body">
+      {% for item in list %}
+        <a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
+          <div>{{ item.transaction.date|accounting_format_date }}</div>
+          <div>{{ item.currency.name }}</div>
+          <div>{{ item.account.title|title }}</div>
+          <div>{{ item.summary|accounting_default }}</div>
+          <div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
+          <div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
+        </a>
+      {% endfor %}
+    </div>
+  </div>
 
   <div class="list-group d-md-none">
   {% for item in list %}
diff --git a/src/accounting/templates/accounting/report/ledger.html b/src/accounting/templates/accounting/report/ledger.html
index 7fc2973..e8df947 100644
--- a/src/accounting/templates/accounting/report/ledger.html
+++ b/src/accounting/templates/accounting/report/ledger.html
@@ -149,38 +149,48 @@ First written: 2023/3/5
 {% if list %}
   {% include "accounting/include/pagination.html" %}
 
-  <table class="table table-striped table-hover d-none d-md-table accounting-ledger-table">
-  <thead>
-  <tr>
-    <th scope="col">{{ A_("Date") }}</th>
-    <th scope="col">{{ A_("Summary") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Debit") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Credit") }}</th>
-    <th class="accounting-amount" scope="col">{{ A_("Balance") }}</th>
-  </tr>
-  </thead>
-  <tbody>
-  {% for item in list %}
-    <tr {% if item.transaction is not none %} class="accounting-clickable accounting-table-row-link" data-href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}" {% endif %}>
-      <td>{{ item.date|accounting_format_date }}</td>
-      <td>{{ item.summary|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</td>
-      <td class="accounting-amount">{{ item.balance|accounting_format_amount }}</td>
-    </tr>
-  {% endfor %}
-  </tbody>
-  {% if report.total_row is not none %}
-    <tfoot>
-    <tr>
-      <td colspan="2">{{ A_("Total") }}</td>
-      <td class="accounting-amount">{{ report.total_row.debit|accounting_format_amount }}</td>
-      <td class="accounting-amount">{{ report.total_row.credit|accounting_format_amount }}</td>
-      <td class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</td>
-    </tr>
-    </tfoot>
-  {% endif %}
-  </table>
+  <div class="d-none d-md-block accounting-report-table accounting-ledger-table">
+    <div class="accounting-report-table-header">
+      <div class="accounting-report-table-row">
+        <div>{{ A_("Date") }}</div>
+        <div>{{ A_("Summary") }}</div>
+        <div class="accounting-amount">{{ A_("Debit") }}</div>
+        <div class="accounting-amount">{{ A_("Credit") }}</div>
+        <div class="accounting-amount">{{ A_("Balance") }}</div>
+      </div>
+    </div>
+    <div class="accounting-report-table-body">
+      {% for item in list %}
+        {% if item.transaction %}
+          <a class="accounting-report-table-row" href="{{ url_for("accounting.transaction.detail", txn=item.transaction)|accounting_append_next }}">
+            <div>{{ item.date|accounting_format_date }}</div>
+            <div>{{ item.summary|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
+          </a>
+        {% else %}
+          <div class="accounting-report-table-row">
+            <div>{{ item.date|accounting_format_date }}</div>
+            <div>{{ item.summary|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.debit|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.credit|accounting_format_amount|accounting_default }}</div>
+            <div class="accounting-amount">{{ item.balance|accounting_format_amount }}</div>
+          </div>
+        {% endif %}
+      {% endfor %}
+    </div>
+    {% if report.total_row is not none %}
+      <div class="accounting-report-table-footer">
+        <div class="accounting-report-table-row">
+          <div>{{ A_("Total") }}</div>
+          <div class="accounting-amount">{{ report.total_row.debit|accounting_format_amount }}</div>
+          <div class="accounting-amount">{{ report.total_row.credit|accounting_format_amount }}</div>
+          <div class="accounting-amount">{{ report.total_row.balance|accounting_format_amount }}</div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
 
   <div class="list-group d-md-none">
   {% for item in list %}