Improve searchbox markup and CSS (#59)

TrestleAdmin · Sep 18, 2024 · 2678b43 · 2678b43
1 parent a75d519
commit 2678b43
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 28 deletions.
diff --git a/app/assets/bundle/trestle/search.css b/app/assets/bundle/trestle/search.css
diff --git a/app/views/trestle/search/_search.html.erb b/app/views/trestle/search/_search.html.erb
@@ -3,9 +3,11 @@
     <div class="searchbox">
       <%= form_tag admin.path, method: :get do %>
         <div class="input-group">
-          <span class="input-group-text"><icon class="fa fa-search"></icon></span>
-          <%= link_to icon("fa fa-times"), admin.path, class: "clear-search" if params[:q].present? %>
-          <%= search_field_tag :q, params[:q], class: "form-control search-field", autocomplete: "off", placeholder: admin.t("search.placeholder", default: "Search") %>
+          <%= label_tag :q, icon("fas fa-search"), class: "input-group-text" %>
+
+          <%= search_field_tag :q, params[:q], class: "form-control", autocomplete: "off", placeholder: admin.t("search.placeholder", default: "Search") %>
+
+          <%= link_to icon("fas fa-times"), admin.path, class: "btn btn-clear-search" if params[:q].present? %>
         </div>
       <% end %>
     </div>

diff --git a/frontend/css/_search.scss b/frontend/css/_search.scss
@@ -1,3 +1,5 @@
+@import "~trestle/frontend/css/support";
+
 .search-container {
   width: 100%;
   max-width: 30em;
@@ -19,34 +21,27 @@
     border: 0;
   }
 
-  .clear-search {
-    position: absolute;
-    right: 0.25rem;
-    z-index: 5;
-    color: #555;
-    font-size: 1.2rem;
-    padding: 0.25rem 0.5rem;
+  .form-control {
+    padding-left: 0;
 
-    &:hover, &:focus {
-      color: #333;
-    }
-  }
-}
-
-.search-field {
-  padding-left: 0;
-
-  background: transparent;
-  box-shadow: none;
+    background: transparent;
+    box-shadow: none;
 
-  border: 0;
+    border: 0;
 
-  &:focus {
-    background: none;
-    box-shadow: none;
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
   }
 
-  &::-webkit-search-cancel-button {
-    display: none;
+  .btn-clear-search {
+    --bs-btn-padding-y: 0;
+    --bs-btn-font-size: 1.325rem;
+    --bs-btn-color: #555;
+    --bs-btn-hover-color: #333;
+
+    @include media-breakpoint-up(sm) {
+      --bs-btn-font-size: 1.25rem;
+    }
   }
 }