Replaced the toolbar button group with individual buttons on the reports.

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;

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 %}

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>

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,

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 %}

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" %}

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,

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",

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 %}