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 {
-    height: 3.2rem;
+    padding: 0;
-    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;
+    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-toolbar > a.btn, .accounting-toolbar > .btn-group > a.btn {
+        padding-top: 0.7rem;
+    }
+    .accounting-toolbar > form.btn {
+        width: 12rem;
+        height: 2.6rem;
+        border-radius: 0.375rem;
+        margin-top: 0.3rem;
+        margin-left: 1rem;
+    }
 }
 
 /** 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,60 +19,56 @@ 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() %}
-  {% if accounting_can_edit() %}
+  <div class="btn-group d-none d-md-flex" role="group">
-    <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>
-        <i class="fa-solid fa-plus"></i>
+      <span class="d-none d-md-inline">{{ A_("New") }}</span>
-        <span class="d-none d-md-inline">{{ A_("New") }}</span>
-      </button>
-      <ul class="dropdown-menu">
-        <li>
-          <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_EXPENSE)|accounting_append_next }}">
-            {{ A_("Cash Expense") }}
-          </a>
-        </li>
-        <li>
-          <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_INCOME)|accounting_append_next }}">
-            {{ A_("Cash Income") }}
-          </a>
-        </li>
-        <li>
-          <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.TRANSFER)|accounting_append_next }}">
-            {{ A_("Transfer") }}
-          </a>
-        </li>
-      </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">
-      <i class="fa-solid fa-book"></i>
-      <span class="d-none d-md-inline">{{ report.report_chooser.current_report }}</span>
     </button>
-    <ul class="dropdown-menu" aria-label="{{ A_("Report") }}">
+    <ul class="dropdown-menu">
-      {% for report in report.report_chooser %}
-        <li>
-          <a class="dropdown-item {% if report.is_active %} active {% endif %}" href="{{ report.url }}">
-            <i class="{{ report.fa_icon }}"></i>
-            {{ report.title }}
-          </a>
-        </li>
-      {% endfor %}
       <li>
-        <span class="dropdown-item {% if report.report_chooser.is_search %} active {% endif %} accounting-clickable" data-bs-toggle="modal" data-bs-target="#accounting-search-modal">
+        <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_EXPENSE)|accounting_append_next }}">
-          <i class="fa-solid fa-magnifying-glass"></i>
+          {{ A_("Cash Expense") }}
-          {{ A_("Search") }}
+        </a>
-        </span>
+      </li>
+      <li>
+        <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.CASH_INCOME)|accounting_append_next }}">
+          {{ A_("Cash Income") }}
+        </a>
+      </li>
+      <li>
+        <a class="dropdown-item" href="{{ url_for("accounting.transaction.create", txn_type=report.txn_types.TRANSFER)|accounting_append_next }}">
+          {{ A_("Transfer") }}
+        </a>
       </li>
     </ul>
   </div>
 {% endif %}
+<div class="btn-group" role="group">
+  <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>
+  <ul class="dropdown-menu" aria-label="{{ A_("Report") }}">
+    {% for report in report.report_chooser %}
+      <li>
+        <a class="dropdown-item {% if report.is_active %} active {% endif %}" href="{{ report.url }}">
+          <i class="{{ report.fa_icon }}"></i>
+          {{ report.title }}
+        </a>
+      </li>
+    {% endfor %}
+    <li>
+      <span class="dropdown-item {% if report.report_chooser.is_search %} active {% endif %} accounting-clickable" data-bs-toggle="modal" data-bs-target="#accounting-search-modal">
+        <i class="fa-solid fa-magnifying-glass"></i>
+        {{ A_("Search") }}
+      </span>
+    </li>
+  </ul>
+</div>
 {% 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" %}