From b234753a2f9648c6a3faedc9e1d3ec6182077003 Mon Sep 17 00:00:00 2001
From: Marius BALTEANU <marius.balteanu@zitec.com>
Date: Sun, 29 Sep 2019 11:49:04 +0300
Subject: [PATCH] Compact search input

---
 app/views/layouts/base.html.erb    | 11 +++++------
 public/stylesheets/application.css | 23 +++++++++++++++++++++--
 public/stylesheets/responsive.css  | 13 +------------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index 42819c1fb..c86001e1d 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -28,8 +28,8 @@
         <div class="flyout-menu__search">
             <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
             <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
-            <%= label_tag 'flyout-search', '&#9906;'.html_safe, :class => 'search-magnifier search-magnifier--flyout' %>
-            <%= text_field_tag 'q', @question, :id => 'flyout-search', :class => 'small js-search-input', :placeholder => l(:label_search) %>
+            <%= label_tag 'flyout-search', '&#9906;'.html_safe, :class => 'icon-search-magnifier search-magnifier--flyout' %>
+            <%= search_field_tag 'q', @question, :id => 'flyout-search', :class => 'small js-search-input', :placeholder => l(:label_search) %>
             <% end %>
         </div>
     <% end %>
@@ -77,10 +77,9 @@
         <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
         <%= hidden_field_tag 'scope', default_search_project_scope, :id => nil %>
         <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
-        <label for='q'>
-          <%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project, :scope => default_search_project_scope}, :accesskey => accesskey(:search) %>:
-        </label>
-        <%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search),
+        <%= link_to '&#9906;'.html_safe, {:controller => 'search', :action => 'index', :id => @project, :scope => default_search_project_scope}, :accesskey => accesskey(:search), :class => 'icon-search-magnifier search-magnifier', :title => l(:label_search) %>
+        <%= search_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search),
+                            :placeholder => l(:label_search),
                             :data => {
                                 :auto_complete => true,
                                 :issues_url => auto_complete_issues_path(:q => '')
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 800415f91..b0a93a7ef 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -35,8 +35,15 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-height: inherit; }
 #header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; }
 
 #quick-search {float:right;}
-#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;}
-
+#quick-search #q {width: 130px; height: 24px; box-sizing: border-box; vertical-align: middle; border: 1px solid #ccc; border-radius:3px; padding-left: 27px; font-size: 12px;}
+#quick-search > form {position: relative;}
+#quick-search .search-magnifier {
+  z-index: 1;
+  position: absolute;
+  left: 5px;
+  top: -10px;
+  font-size: 25px;
+}
 #main-menu {position: absolute;  bottom: 0px;  left:6px; margin-right: -500px; width: 100%;}
 #main-menu ul {margin: 0;  padding: 0; width: 100%; white-space: nowrap;}
 #main-menu li {
@@ -1562,6 +1569,18 @@ tr.ui-sortable-helper { border:1px solid #e4e4e4; }
 
 .contextual>*:not(:first-child), .buttons>.icon:not(:first-child), .contextual .journal-actions>*:not(:first-child) { margin-left: 5px; }
 
+/* search magnifier icon */
+.icon-search-magnifier {
+  font-family: Verdana !important;
+  color: #bbb !important;
+
+  text-decoration: none !important;
+  cursor: pointer;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+}
+
 img.gravatar {
   vertical-align: middle;
   border-radius: 20%;
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
index aa5502ee6..f70a3b7bd 100644
--- a/public/stylesheets/responsive.css
+++ b/public/stylesheets/responsive.css
@@ -259,17 +259,6 @@
     content: '\2261';
   }
 
-  /* search magnifier icon */
-  .search-magnifier {
-    font-family: Verdana;
-    color: #bbb;
-
-    cursor: pointer;
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
-  }
-
   .search-magnifier--flyout {
     font-size: 25px;
     line-height: 54px;
@@ -472,7 +461,7 @@
     padding-right: 8px;
   }
 
-  .flyout-menu__search input[type='text'] {
+  .flyout-menu__search input[type='text'], .flyout-menu__search input[type='search'] {
     line-height: 2;
 
     width: 100%;
-- 
2.22.0