Use search icon instead of search input box in the navbar

fixes #545
NixOS · Sep 24, 2020 · 1d64d8e · 1d64d8e
1 parent 8f8b26a
commit 1d64d8e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/layout.tt b/layout.tt
@@ -50,11 +50,6 @@ BLOCK navigationLink %]
   <header>
     <div>
       <h1><a href="[% root %]">NixOS</a></h1>
-      <form class="header-search" method="get" action="https://search.nixos.org/packages">
-        <div class="form-input">
-          <input type="text" placeholder="Search for Nix packages" name="query" />
-        </div>
-      </form>
       [%# ???! go read `navbar.less` and `nixos-site.js`, it's all fine I swear. %]
       <nav style="display: none;">
         <ul>
@@ -66,6 +61,7 @@ BLOCK navigationLink %]
           [% INCLUDE navigationLink href="donate.html" title="Donate" %]
         </ul>
       </nav>
+      <a class="header-search-link" href="https://search.nixos.org/packages"></a>
     </div>
   </header>
 

diff --git a/site-styles/components/navbar.less b/site-styles/components/navbar.less
@@ -129,6 +129,28 @@ body > header {
 		}
 	}
 
+	.header-search-link {
+		#screen-xs-max({ display: none; });
+		position: relative;
+		display: block;
+		padding: 0;
+		flex: 0;
+		flex-basis: 3.5rem;
+		&::before {
+			#svg.icon.search.blue-light;
+			content: "";
+			z-index: 1;
+			position: absolute;
+			left: @gutter;
+			top: 50%;
+			transform: translateY(-50%);
+			background-repeat: no-repeat;
+			background-size: contain;
+			height: @input-icon-size;
+			width: @input-icon-size;
+		}
+	}
+
 	.header-search {
 		display: flex;
 		align-items: center;