From 2678b43e3a4bab33b669267f8bf3ec56995ffbd3 Mon Sep 17 00:00:00 2001
From: Sam Pohlenz <sam@sampohlenz.com>
Date: Wed, 18 Sep 2024 22:06:22 +0930
Subject: [PATCH] Improve searchbox markup and CSS (#59)

---
 app/assets/bundle/trestle/search.css      |  2 +-
 app/views/trestle/search/_search.html.erb |  8 +++--
 frontend/css/_search.scss                 | 43 ++++++++++-------------
 3 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/app/assets/bundle/trestle/search.css b/app/assets/bundle/trestle/search.css
index 2c48745..b430066 100644
--- a/app/assets/bundle/trestle/search.css
+++ b/app/assets/bundle/trestle/search.css
@@ -1 +1 @@
-.search-container{display:flex;max-width:30em;width:100%}.searchbox{flex:1}.searchbox .input-group{background:#fff;border:1px solid #ccc;border-radius:50rem}.searchbox .input-group-text{background:transparent;border:0}.searchbox .clear-search{color:#555;font-size:1.2rem;padding:.25rem .5rem;position:absolute;right:.25rem;z-index:5}.searchbox .clear-search:focus,.searchbox .clear-search:hover{color:#333}.search-field{background:transparent;border:0;box-shadow:none;padding-left:0}.search-field:focus{background:none;box-shadow:none}.search-field::-webkit-search-cancel-button{display:none}.search-filters{align-self:center;margin-left:.5rem;margin-right:auto}.search-filters:first-child{margin-left:0}.search-filters-popover{background:#fafafa;max-width:none;z-index:960}.search-filters-popover .arrow{width:13px}.search-filters-popover .popover-body{padding:1rem;width:20rem}.search-filters-popover .row{margin-left:-5px;margin-right:-5px}.search-filters-popover .col{padding-left:5px;padding-right:5px}.search-filters-popover.bs-popover-bottom{margin-top:.75rem}.search-filters-popover.bs-popover-bottom>.arrow:after,.search-filters-popover.bs-popover-bottom>.arrow:before{border-left-width:6.5px;border-right-width:6.5px}.search-filters-popover.bs-popover-bottom>.arrow:after{border-bottom-color:#fafafa}@media(min-width:576px){.search-filters-popover .form-text.floating{margin:0}}
\ No newline at end of file
+.search-container{display:flex;max-width:30em;width:100%}.searchbox{flex:1}.searchbox .input-group{background:#fff;border:1px solid #ccc;border-radius:50rem}.searchbox .form-control,.searchbox .input-group-text{background:transparent;border:0}.searchbox .form-control{box-shadow:none;padding-left:0}.searchbox .form-control::-webkit-search-cancel-button{display:none}.searchbox .btn-clear-search{--bs-btn-padding-y:0;--bs-btn-font-size:1.325rem;--bs-btn-color:#555;--bs-btn-hover-color:#333}@media(min-width:576px){.searchbox .btn-clear-search{--bs-btn-font-size:1.25rem}}.search-filters{align-self:center;margin-left:.5rem;margin-right:auto}.search-filters:first-child{margin-left:0}.search-filters-popover{background:#fafafa;max-width:none;z-index:960}.search-filters-popover .arrow{width:13px}.search-filters-popover .popover-body{padding:1rem;width:20rem}.search-filters-popover .row{margin-left:-5px;margin-right:-5px}.search-filters-popover .col{padding-left:5px;padding-right:5px}.search-filters-popover.bs-popover-bottom{margin-top:.75rem}.search-filters-popover.bs-popover-bottom>.arrow:after,.search-filters-popover.bs-popover-bottom>.arrow:before{border-left-width:6.5px;border-right-width:6.5px}.search-filters-popover.bs-popover-bottom>.arrow:after{border-bottom-color:#fafafa}@media(min-width:576px){.search-filters-popover .form-text.floating{margin:0}}
\ No newline at end of file
diff --git a/app/views/trestle/search/_search.html.erb b/app/views/trestle/search/_search.html.erb
index e11bce9..76ed5ae 100644
--- 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
index 5a16cca..d135f69 100644
--- 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;
+    }
   }
 }