Merge pull request #55 from TrestleAdmin/improve-searchbox-markup

Improve searchbox markup and CSS
TrestleAdmin · Sep 18, 2024 · 585ef85 · 585ef85
2 parents 0018b16 + b50d18b
commit 585ef85
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 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
@@ -1,9 +1,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? %>
+      <%= 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/index.scss b/frontend/index.scss
@@ -1,3 +1,5 @@
+@import "~trestle/frontend/css/support";
+
 .searchbox {
   width: 100%;
   max-width: 30em;
@@ -27,16 +29,14 @@
     }
   }
 
-  .clear-search {
-    position: absolute;
-    right: 0.75rem;
-    z-index: 5;
-    color: #555;
-    font-size: 1.2rem;
-    padding: 0.35rem;
+  .btn-clear-search {
+    --bs-btn-padding-y: 0;
+    --bs-btn-font-size: 1.325rem;
+    --bs-btn-color: #555;
+    --bs-btn-hover-color: #333;
 
-    &:hover, &:focus {
-      color: #333;
+    @include media-breakpoint-up(sm) {
+      --bs-btn-font-size: 1.25rem;
     }
   }
 }