From 3582d960cadc170e78e12368479c0118f72f69bd 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: Thu, 9 Mar 2023 12:52:55 +0800
Subject: [PATCH] Replaced the toolbar button group with individual buttons on
 the reports.

---
 src/accounting/static/css/style.css           | 26 +++++++++++++++++++
 .../accounting/report/balance-sheet.html      |  2 +-
 .../report/include/toolbar-buttons.html       | 18 ++++++-------
 .../accounting/report/income-expenses.html    |  2 +-
 .../accounting/report/income-statement.html   |  2 +-
 .../templates/accounting/report/journal.html  |  2 +-
 .../templates/accounting/report/ledger.html   |  2 +-
 .../templates/accounting/report/search.html   |  2 +-
 .../accounting/report/trial-balance.html      |  2 +-
 9 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/accounting/static/css/style.css b/src/accounting/static/css/style.css
index 3d68c34..9d44089 100644
--- a/src/accounting/static/css/style.css
+++ b/src/accounting/static/css/style.css
@@ -45,6 +45,32 @@
     background-color: #D3D3D4;
 }
 
+/** The toolbar for the mobile devices */
+.accounting-mobile-toolbar {
+    display: flex;
+}
+.accounting-mobile-toolbar .accounting-toolbar-button {
+    height: 3.2rem;
+    width: 3.2rem;
+    border-radius: 50%;
+    margin-left: 1rem;
+}
+.accounting-mobile-toolbar > a.accounting-toolbar-button {
+    padding-top: 0.7rem;
+}
+.accounting-search-mobile-form {
+    width: 12rem;
+    margin-left: 1rem;
+    height: 2.8rem;
+    align-items: center;
+    margin-top: 0.3rem;
+}
+.accounting-search-mobile-form button {
+    background-color: transparent;
+    border: 0;
+    color: inherit;
+}
+
 /** The card layout */
 .accounting-card {
     padding: 2em 1.5em;
diff --git a/src/accounting/templates/accounting/report/balance-sheet.html b/src/accounting/templates/accounting/report/balance-sheet.html
index d18df6d..1e5f4eb 100644
--- a/src/accounting/templates/accounting/report/balance-sheet.html
+++ b/src/accounting/templates/accounting/report/balance-sheet.html
@@ -41,7 +41,7 @@ First written: 2023/3/7
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_currency_chooser = true,
           use_period_chooser = true %}
diff --git a/src/accounting/templates/accounting/report/include/toolbar-buttons.html b/src/accounting/templates/accounting/report/include/toolbar-buttons.html
index 438cb3f..3e5d4b1 100644
--- a/src/accounting/templates/accounting/report/include/toolbar-buttons.html
+++ b/src/accounting/templates/accounting/report/include/toolbar-buttons.html
@@ -22,7 +22,7 @@ First written: 2023/3/8
 {% if use_add_new %}
   {% if accounting_can_edit() %}
     <div class="btn-group" role="group">
-      <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+      <button type="button" class="btn btn-primary dropdown-toggle accounting-toolbar-button" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="fa-solid fa-plus"></i>
         <span class="d-none d-md-inline">{{ A_("New") }}</span>
       </button>
@@ -48,7 +48,7 @@ First written: 2023/3/8
 {% endif %}
 {% if use_report_chooser %}
   <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       <i class="fa-solid fa-book"></i>
       <span class="d-none d-md-inline">{{ report.report_chooser.current_report }}</span>
     </button>
@@ -72,7 +72,7 @@ First written: 2023/3/8
 {% endif %}
 {% if use_currency_chooser %}
   <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       <i class="fa-solid fa-money-bill-wave"></i>
       <span class="d-none d-md-inline">{{ report.currency.name|title }}</span>
     </button>
@@ -89,7 +89,7 @@ First written: 2023/3/8
 {% endif %}
 {% if use_account_chooser %}
   <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       <i class="fa-solid fa-clipboard"></i>
       <span class="d-none d-md-inline">{{ report.account.title|title }}</span>
     </button>
@@ -105,11 +105,15 @@ First written: 2023/3/8
   </div>
 {% endif %}
 {% if use_period_chooser %}
-  <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#accounting-period-chooser-modal">
+  <button class="btn btn-primary accounting-toolbar-button" type="button" data-bs-toggle="modal" data-bs-target="#accounting-period-chooser-modal">
     <i class="fa-solid fa-calendar-day"></i>
     <span class="d-none d-md-inline">{{ report.period.desc|title }}</span>
   </button>
 {% endif %}
+<a class="btn btn-primary accounting-toolbar-button" role="button" href="{{ report.csv_uri }}">
+  <i class="fa-solid fa-download"></i>
+  <span class="d-none d-md-inline">{{ A_("Download") }}</span>
+</a>
 {% if use_search %}
   <form class="btn btn-primary d-flex input-group accounting-search-{{ search_platform }}-form" action="{{ url_for("accounting.report.search") }}" method="get" role="search" aria-label="{{ search_aria_label }}">
     <input id="accounting-search-{{ search_platform }}" class="form-control form-control-sm accounting-search-input" type="search" name="q" value="{{ request.args.q }}" placeholder=" " required="required">
@@ -121,7 +125,3 @@ First written: 2023/3/8
     </label>
   </form>
 {% endif %}
-<a class="btn btn-primary" role="button" href="{{ report.csv_uri }}">
-  <i class="fa-solid fa-download"></i>
-  <span class="d-none d-md-inline">{{ A_("Download") }}</span>
-</a>
diff --git a/src/accounting/templates/accounting/report/income-expenses.html b/src/accounting/templates/accounting/report/income-expenses.html
index 181df8f..c89514d 100644
--- a/src/accounting/templates/accounting/report/income-expenses.html
+++ b/src/accounting/templates/accounting/report/income-expenses.html
@@ -42,7 +42,7 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_currency_chooser = true,
           use_account_chooser = true,
diff --git a/src/accounting/templates/accounting/report/income-statement.html b/src/accounting/templates/accounting/report/income-statement.html
index 784cb28..e8c0bc7 100644
--- a/src/accounting/templates/accounting/report/income-statement.html
+++ b/src/accounting/templates/accounting/report/income-statement.html
@@ -41,7 +41,7 @@ First written: 2023/3/7
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_currency_chooser = true,
           use_period_chooser = true %}
diff --git a/src/accounting/templates/accounting/report/journal.html b/src/accounting/templates/accounting/report/journal.html
index 5a50602..2ff10c7 100644
--- a/src/accounting/templates/accounting/report/journal.html
+++ b/src/accounting/templates/accounting/report/journal.html
@@ -40,7 +40,7 @@ First written: 2023/3/4
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
diff --git a/src/accounting/templates/accounting/report/ledger.html b/src/accounting/templates/accounting/report/ledger.html
index e3d39e1..6e3dade 100644
--- a/src/accounting/templates/accounting/report/ledger.html
+++ b/src/accounting/templates/accounting/report/ledger.html
@@ -42,7 +42,7 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_currency_chooser = true,
           use_account_chooser = true,
diff --git a/src/accounting/templates/accounting/report/search.html b/src/accounting/templates/accounting/report/search.html
index 53a549a..2f513a5 100644
--- a/src/accounting/templates/accounting/report/search.html
+++ b/src/accounting/templates/accounting/report/search.html
@@ -41,7 +41,7 @@ First written: 2023/3/8
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_search = true,
           search_platform = "mobile",
diff --git a/src/accounting/templates/accounting/report/trial-balance.html b/src/accounting/templates/accounting/report/trial-balance.html
index f5d9045..bdb96c5 100644
--- a/src/accounting/templates/accounting/report/trial-balance.html
+++ b/src/accounting/templates/accounting/report/trial-balance.html
@@ -41,7 +41,7 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="btn-group mb-3 d-md-none">
+<div class="mb-3 d-md-none accounting-mobile-toolbar">
   {% with use_report_chooser = true,
           use_currency_chooser = true,
           use_period_chooser = true %}