Replaced the separated toolbar for the desktop and mobile screen with the accounting-toolbar class that acts differently on different screen sizes.

src/accounting/static/css/style.css

@@ -29,7 +29,6 @@
 }
 .btn-group .btn .accounting-search-input {
     min-height: calc(1em + .5rem + 2px);
-    padding: 0 0.5rem;
 }
 .btn-group .btn .accounting-search-label button {
     border: none;
@@ -45,30 +44,59 @@
     background-color: #D3D3D4;
 }
 
-/** The toolbar for the mobile devices */
+/** The toolbar */
-.accounting-mobile-toolbar {
+.accounting-toolbar {
     display: flex;
 }
-.accounting-mobile-toolbar .accounting-toolbar-button {
+.accounting-toolbar .input-group > .input-group-text {
+    padding: 0;
+    background-color: transparent;
+    color: inherit;
+    border: 0;
+}
+.accounting-toolbar .input-group > .input-group-text > button {
+    background-color: transparent;
+    color: inherit;
+    border: 0;
+}
+.accounting-toolbar form.btn > .form-control {
+    min-height: calc(1.5em + 2px);
+    padding-top: 0.1rem;
+    padding-bottom: 0.1rem;
+}
+@media(min-width: 768px) {
+    .accounting-toolbar > .btn, .accounting-toolbar > .btn-group > .btn {
+        border-radius: 0;
+    }
+    .accounting-toolbar > .btn:first-child, .accounting-toolbar > .btn-group:first-child > .btn {
+        border-top-left-radius: 0.375rem;
+        border-bottom-left-radius: 0.375rem;
+    }
+    .accounting-toolbar > .btn:last-child, .accounting-toolbar > .btn-group:last-child > .btn {
+        border-top-right-radius: 0.375rem;
+        border-bottom-right-radius: 0.375rem;
+    }
+    .accounting-toolbar .btn.input-group {
+        width: 16rem;
+    }
+}
+@media(max-width:767px) {
+    .accounting-toolbar > .btn:not(form), .accounting-toolbar > .btn-group > .btn {
         height: 3.2rem;
         width: 3.2rem;
         border-radius: 50%;
         margin-left: 1rem;
     }
-.accounting-mobile-toolbar > a.accounting-toolbar-button {
+    .accounting-toolbar > a.btn, .accounting-toolbar > .btn-group > a.btn {
         padding-top: 0.7rem;
     }
-.accounting-search-mobile-form {
+    .accounting-toolbar > form.btn {
         width: 12rem;
-    margin-left: 1rem;
+        height: 2.6rem;
-    height: 2.8rem;
+        border-radius: 0.375rem;
-    align-items: center;
         margin-top: 0.3rem;
+        margin-left: 1rem;
     }
-.accounting-search-mobile-form button {
-    background-color: transparent;
-    border: 0;
-    color: inherit;
 }
 
 /** The card layout */

src/accounting/templates/accounting/report/balance-sheet.html

@@ -30,10 +30,8 @@ First written: 2023/3/7
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_currency_chooser = true,
-          use_report_chooser = true,
-          use_currency_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
   {% endwith %}
@@ -41,14 +39,6 @@ First written: 2023/3/7
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_currency_chooser = true,
-          use_period_chooser = true %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}

src/accounting/templates/accounting/report/include/toolbar-buttons.html

@@ -19,10 +19,9 @@ toolbar-buttons.html: The toolbar buttons on the report
 Author: imacat@mail.imacat.idv.tw (imacat)
 First written: 2023/3/8
 #}
-{% if use_add_new %}
 {% if accounting_can_edit() %}
-    <div class="btn-group" role="group">
+  <div class="btn-group d-none d-md-flex" role="group">
-      <button type="button" class="btn btn-primary dropdown-toggle accounting-toolbar-button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button type="button" class="btn btn-primary dropdown-toggle" 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>
@@ -45,10 +44,8 @@ First written: 2023/3/8
     </ul>
   </div>
 {% endif %}
-{% endif %}
-{% if use_report_chooser %}
 <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+  <button class="btn btn-primary dropdown-toggle" 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>
@@ -69,10 +66,9 @@ First written: 2023/3/8
     </li>
   </ul>
 </div>
-{% endif %}
 {% if use_currency_chooser %}
   <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-primary dropdown-toggle" 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 +85,7 @@ First written: 2023/3/8
 {% endif %}
 {% if use_account_chooser %}
   <div class="btn-group" role="group">
-    <button class="btn btn-primary dropdown-toggle accounting-toolbar-button" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+    <button class="btn btn-primary dropdown-toggle" 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,19 +101,19 @@ First written: 2023/3/8
   </div>
 {% endif %}
 {% if use_period_chooser %}
-  <button class="btn btn-primary accounting-toolbar-button" type="button" data-bs-toggle="modal" data-bs-target="#accounting-period-chooser-modal">
+  <button class="btn btn-primary" 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 }}">
+<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>
 {% 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 }}">
+  <form class="btn btn-primary d-flex input-group" action="{{ url_for("accounting.report.search") }}" method="get" role="search" aria-labelledby="accounting-search-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">
+    <input id="accounting-search" class="form-control form-control-sm accounting-search-input" type="search" name="q" value="{{ request.args.q }}" placeholder=" " required="required">
-    <label for="accounting-search-{{ search_platform }}" class="accounting-search-label">
+    <label id="accounting-search-label" for="accounting-search" class="input-group-text accounting-search-label">
       <button type="submit">
         <i class="fa-solid fa-magnifying-glass"></i>
         <span class="d-none d-md-inline">{{ A_("Search") }}</span>

src/accounting/templates/accounting/report/income-expenses.html

@@ -30,10 +30,8 @@ First written: 2023/3/5
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_currency_chooser = true,
-          use_report_chooser = true,
-          use_currency_chooser = true,
           use_account_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
@@ -42,15 +40,6 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_currency_chooser = true,
-          use_account_chooser = true,
-          use_period_chooser = true %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}

src/accounting/templates/accounting/report/income-statement.html

@@ -30,10 +30,8 @@ First written: 2023/3/7
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_currency_chooser = true,
-          use_report_chooser = true,
-          use_currency_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
   {% endwith %}
@@ -41,14 +39,6 @@ First written: 2023/3/7
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_currency_chooser = true,
-          use_period_chooser = true %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}

src/accounting/templates/accounting/report/journal.html

@@ -30,23 +30,14 @@ First written: 2023/3/4
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_period_chooser = true %}
-          use_report_chooser = true,
-          use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
   {% endwith %}
 </div>
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<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" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}

src/accounting/templates/accounting/report/ledger.html

@@ -30,10 +30,8 @@ First written: 2023/3/5
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_currency_chooser = true,
-          use_report_chooser = true,
-          use_currency_chooser = true,
           use_account_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
@@ -42,15 +40,6 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_currency_chooser = true,
-          use_account_chooser = true,
-          use_period_chooser = true %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}

src/accounting/templates/accounting/report/search.html

@@ -29,27 +29,14 @@ First written: 2023/3/8
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_search = true %}
-          use_report_chooser = true,
-          use_search = true,
-          search_platform = "desktop",
-          search_aria_label = A_("Search for Desktop") %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
   {% endwith %}
 </div>
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_search = true,
-          search_platform = "mobile",
-          search_aria_label = A_("Search for Mobile") %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/search-modal.html" %}
 
 {% if report.has_data %}

src/accounting/templates/accounting/report/trial-balance.html

@@ -30,10 +30,8 @@ First written: 2023/3/5
 
 {% block content %}
 
-<div class="btn-group mb-2 d-none d-md-inline-flex">
+<div class="mb-3 accounting-toolbar">
-  {% with use_add_new = true,
+  {% with use_currency_chooser = true,
-          use_report_chooser = true,
-          use_currency_chooser = true,
           use_period_chooser = true %}
     {% include "accounting/report/include/toolbar-buttons.html" %}
   {% endwith %}
@@ -41,14 +39,6 @@ First written: 2023/3/5
 
 {% include "accounting/report/include/add-txn-material-fab.html" %}
 
-<div class="mb-3 d-md-none accounting-mobile-toolbar">
-  {% with use_report_chooser = true,
-          use_currency_chooser = true,
-          use_period_chooser = true %}
-    {% include "accounting/report/include/toolbar-buttons.html" %}
-  {% endwith %}
-</div>
-
 {% include "accounting/report/include/period-chooser.html" %}
 
 {% include "accounting/report/include/search-modal.html" %}