Merged the search box to the action button group in the base account list and account list.

src/accounting/static/css/style.css

@@ -24,6 +24,16 @@
 .clickable {
     cursor: pointer;
 }
+.btn-group .btn .search-input {
+    min-height: calc(1em + .5rem + 2px);
+    padding: 0 0.5rem;
+}
+.btn-group .btn .search-label button {
+    border: none;
+    background-color: transparent;
+    color: inherit;
+    padding-right: 0;
+}
 
 /** The account management */
 .account {

src/accounting/templates/accounting/account/list.html

@@ -25,14 +25,25 @@ First written: 2023/1/30
 
 {% block content %}
 
-{% if can_edit_accounting() %}
+<div class="btn-group mb-2">
-  <div class="btn-group mb-3 d-none d-md-block">
+  {% if can_edit_accounting() %}
-    <a class="btn btn-primary" href="{{ url_for("accounting.account.create")|append_next }}">
+    <a class="btn btn-primary text-nowrap d-none d-md-block" href="{{ url_for("accounting.account.create")|append_next }}">
       <i class="fa-solid fa-user-plus"></i>
       {{ A_("New") }}
     </a>
-  </div>
+  {% endif %}
+  <form class="btn btn-primary d-flex input-group" action="{{ url_for("accounting.account.list") }}" method="get" role="search">
+    <input id="search-input" class="form-control form-control-sm search-input" type="search" name="q" value="{{ request.args["q"] if "q" in request.args else "" }}" placeholder=" " required="required" aria-label="Search">
+    <label for="search-input" class="search-label">
+      <button type="submit">
+        <i class="fa-solid fa-magnifying-glass"></i>
+        {{ A_("Search") }}
+      </button>
+    </label>
+  </form>
+</div>
 
+{% if can_edit_accounting() %}
   <div class="d-md-none material-fab">
     <a class="btn btn-primary" href="{{ url_for("accounting.account.create")|append_next }}">
       <i class="fa-solid fa-plus"></i>
@@ -40,22 +51,6 @@ First written: 2023/1/30
   </div>
 {% endif %}
 
-<form action="{{ url_for("accounting.account.list") }}" method="get" role="search">
-  <div class="row">
-    <div class="col-sm-3">
-      <div class="input-group mb-2">
-        <input id="query" class="form-control form-control-sm" type="search" name="q" value="{{ request.args["q"] if "q" in request.args else "" }}" placeholder=" " required="required" aria-label="Search">
-        <button class="input-group-text" type="submit">
-          <label for="query">
-            <i class="fa-solid fa-magnifying-glass"></i>
-            {{ A_("Search") }}
-          </label>
-        </button>
-      </div>
-    </div>
-  </div>
-</form>
-
 {% if list %}
   {% include "accounting/include/pagination.html" %}
 

src/accounting/templates/accounting/base-account/list.html

@@ -25,21 +25,17 @@ First written: 2023/1/26
 
 {% block content %}
 
-<form action="{{ url_for("accounting.base-account.list") }}" method="get" role="search">
+<div class="btn-group mb-2">
-  <div class="row">
+  <form class="btn btn-primary d-flex input-group" action="{{ url_for("accounting.base-account.list") }}" method="get" role="search">
-    <div class="col-sm-3">
+    <input id="search-input" class="form-control form-control-sm search-input" type="search" name="q" value="{{ request.args["q"] if "q" in request.args else "" }}" placeholder=" " required="required" aria-label="Search">
-      <div class="input-group mb-2">
+    <label for="search-input" class="search-label">
-        <input id="query" class="form-control form-control-sm" type="search" name="q" value="{{ request.args["q"] if "q" in request.args else "" }}" placeholder=" " required="required" aria-label="Search">
+      <button type="submit">
-        <button class="input-group-text" type="submit">
-          <label for="query">
         <i class="fa-solid fa-magnifying-glass"></i>
         {{ A_("Search") }}
-          </label>
       </button>
-      </div>
+    </label>
-    </div>
+  </form>
-  </div>
+</div>
-</form>
 
 {% if list %}
   {% include "accounting/include/pagination.html" %}