From 22bae7f766e93d52c746f0d3c072d7a53d6bdfce 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:24:05 +0800
Subject: [PATCH] Replaced the <ul></ul> list with CSS "display: grid" for the
 trial balance, to allow using <a></a> as the table row.

---
 src/accounting/static/css/style.css           | 29 ++--------------
 .../accounting/report/trial-balance.html      | 33 ++++++++++---------
 2 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/src/accounting/static/css/style.css b/src/accounting/static/css/style.css
index 197a27f..dd284fe 100644
--- a/src/accounting/static/css/style.css
+++ b/src/accounting/static/css/style.css
@@ -158,37 +158,14 @@ a.accounting-report-table-row {
 .accounting-income-expenses-table .accounting-report-table-footer .accounting-report-table-row {
     grid-template-columns: 7fr 1fr 1fr 1fr;
 }
+.accounting-trial-balance-table .accounting-report-table-row {
+    grid-template-columns: 3fr 1fr 1fr;
+}
 
 /* The accounting report */
 .accounting-mobile-journal-credit {
     padding-left: 1rem;
 }
-.accounting-report-row {
-    border: none;
-}
-a.accounting-report-row:hover {
-    color: inherit;
-}
-.accounting-trial-balance-row.accounting-trial-balance-header {
-    border-bottom: thick double slategray;
-    font-weight: bolder;
-    font-size: 1.2rem;
-}
-.accounting-trial-balance-row.accounting-trial-balance-header .accounting-amount {
-    font-style: normal;
-}
-.accounting-trial-balance-row > div {
-    width: 50%;
-}
-.accounting-trial-balance-row .accounting-amount {
-    width: 50%;
-    font-style: italic;
-}
-.accounting-trial-balance-row.accounting-trial-balance-total {
-    border-top: thick double slategray;
-    font-weight: bolder;
-    font-size: 1.2rem;
-}
 
 /* The Material Design text field (floating form control in Bootstrap) */
 .accounting-material-text-field {
diff --git a/src/accounting/templates/accounting/report/trial-balance.html b/src/accounting/templates/accounting/report/trial-balance.html
index baf6fa2..2d76334 100644
--- a/src/accounting/templates/accounting/report/trial-balance.html
+++ b/src/accounting/templates/accounting/report/trial-balance.html
@@ -122,29 +122,32 @@ First written: 2023/3/5
       <h2 class="text-center">{{ _("Trial Balance of %(currency)s %(period)s", currency=report.currency.name|title, period=report.period.desc|title) }}</h2>
     </div>
 
-    <div class="list-group accounting-list-group-stripped accounting-list-group-hover">
-      <div class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row accounting-trial-balance-header">
-        <div>{{ A_("Account") }}</div>
-        <div class="d-flex justify-content-between">
+    <div class="accounting-report-table accounting-trial-balance-table">
+      <div class="accounting-report-table-header">
+        <div class="accounting-report-table-row">
+          <div>{{ A_("Account") }}</div>
           <div class="accounting-amount">{{ A_("Debit") }}</div>
           <div class="accounting-amount">{{ A_("Credit") }}</div>
         </div>
       </div>
-      {% for item in list %}
-        <a class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row" href="{{ item.url }}">
-          <div>{{ item.account|title }}</div>
-          <div class="d-flex justify-content-between">
+      <div class="accounting-report-table-body">
+        {% for item in list %}
+          <a class="accounting-report-table-row" href="{{ item.url }}">
+            <div>
+              <span class="d-none d-md-inline">{{ item.account.code }}</span>
+              {{ item.account.title|title }}
+            </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>
-        </a>
-      {% endfor %}
-      <div class="list-group-item d-flex justify-content-between accounting-report-row accounting-trial-balance-row accounting-trial-balance-total">
-        <div>{{ A_("Total") }}</div>
-        <div class="d-flex justify-content-between">
+          </a>
+        {% endfor %}
+      </div>
+      <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>
+      </div>
       </div>
     </div>
   </div>