From f87358e65bc16ade54e2bf847a791cdad8f5f2ae Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Sat, 15 Feb 2020 11:56:29 +0100
Subject: [PATCH] Make search box more noticeable, second attempt

---
 templates/navigation.hbs         |  5 ++++-
 templates/navigation_rustdoc.hbs |  5 ++++-
 templates/style.scss             | 32 +++++++++++++++++++++++---------
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/templates/navigation.hbs b/templates/navigation.hbs
index d68bc11c9..a9ed78f62 100644
--- a/templates/navigation.hbs
+++ b/templates/navigation.hbs
@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal" role="navigation" aria-label="Main navigation">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div id="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
           <a href="/" class="pure-menu-heading pure-menu-link" aria-label="Docs.rs"><i class="fa fa-cubes fa-fw"></i> Docs.rs</a>
           <ul class="pure-menu-list">
diff --git a/templates/navigation_rustdoc.hbs b/templates/navigation_rustdoc.hbs
index 7eecfdd54..63053d261 100644
--- a/templates/navigation_rustdoc.hbs
+++ b/templates/navigation_rustdoc.hbs
@@ -3,7 +3,10 @@
         <div class="pure-menu pure-menu-horizontal">
           <form action="/releases/search" method="GET" class="landing-search-form-nav">
             {{#unless varsb.show_search_form}}
-            <input class="search-input-nav" name="query" aria-label="Find crate by search query" tabindex="-1" type="text" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            <div id="search-input-nav">
+              <label for="nav-search"><i class="fa fa-fw fa-search"></i></label>
+              <input id="nav-search" name="query" type="text" aria-label="Find crate by search query" placeholder="Find crate"{{#if varss.search_query}} value="{{varss.search_query}}"{{/if}}>
+            </div>
             {{/unless}}
             <a href="/" class="pure-menu-heading pure-menu-link"><i class="fa fa-cubes fa-fw"></i><span class="title"> Docs.rs</span></a>
           {{#with content.crate_details}}
diff --git a/templates/style.scss b/templates/style.scss
index 491caf4fc..3af201ae5 100644
--- a/templates/style.scss
+++ b/templates/style.scss
@@ -173,21 +173,35 @@ div.nav-container {
     form.landing-search-form-nav {
         max-width: 1200px;
 
-        input.search-input-nav {
+        #search-input-nav {
             float: right;
-            max-width: 200px;
-            border: none;
-            margin: 0 1em 0 0;
-            font-size: 0.8em;
-            text-align: right;
-            box-shadow: none;
-            background-color: #fff;
-            height: 31px;
+            max-width: 150px;
             display: none;
+            border-left: 1px solid $color-border;
 
             @media #{$media-sm} {
                 display: block;
             }
+
+            @media #{$media-md} {
+                 max-width: 200px;
+            }
+
+            label {
+                 color: #777;
+                 cursor: pointer;
+                 padding-left: 0.5rem;
+                 font-size: 0.8em;
+            }
+
+            input {
+                 border: none;
+                 margin: 0 1em 0 0;
+                 font-size: 0.8em;
+                 box-shadow: none;
+                 background-color: #fff;
+                 height: 31px;
+            }
         }
 
         input.search-input-nav:focus {