Bring back search boxes on the learn page

fixes #553
NixOS · Sep 22, 2020 · accd0b7 · accd0b7
1 parent db6379c
commit accd0b7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 58 deletions.
diff --git a/js/nixos-site.js b/js/nixos-site.js
@@ -190,19 +190,4 @@ $(function () {
   // This way tabs and panes are active as intended.
   handleNavigation();
 
-  // Search widget specific JavaScript (to be removed)
-
-  $("#learn-options-search button, #options-search button").click(function (event) {
-    event.preventDefault();
-    var url = "https://search.nixos.org/options";
-    url += "?query=" + $("input", $(this).parents("form")).val()
-    window.location.href = url;
-  });
-
-  $("#learn-packages-search button, #packages-search button").click(function (event) {
-    event.preventDefault();
-    var url = "https://search.nixos.org/packages";
-    url += "?query=" + $("input", $(this).parents("form")).val();
-    window.location.href = url;
-  });
 });
diff --git a/layout.tt b/layout.tt
@@ -52,7 +52,7 @@ BLOCK navigationLink %]
       <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" name="query" />
+          <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. %]

diff --git a/learn.tt b/learn.tt
@@ -5,52 +5,40 @@
 </div>
 
 <section class="generic-layout learn-guides">
-  <h2>Guides</h2>
+  <h1>Guides</h1>
   <ul>
     [% INSERT "learn_guides.html.in" %]
   </ul>
 </section>
 
-[%#
-<section class="generic-layout">
-  <div>
-    <ul>
-      <li>
-
-        <h2>Discover Nix packages</h2>
-        <form id="learn-packages-search">
-          <div class="input-append">
-            <input class="span10" placeholder="Search for Nix packages" type="text" />
-            <button class="btn dropdown-toggle" data-toggle="dropdown">
-              Search
-            </button>
-          </div>
-        </form>
-      </li>
-      <li>
-
-        <h2>Discover NixOS options</h2>
-        <form id="learn-options-search">
-          <div class="input-append">
-            <input class="span10" placeholder="Search for NixOS options" type="text" />
-            <button class="btn dropdown-toggle" data-toggle="dropdown">
-              Search
-            </button>
-          </div>
-        </form>
-      </li>
-
-    </ul>
-  </div>
+<section class="generic-layout learn-search">
+  <h1>Search</h1>
+  <ul>
+    <li>
+      <h4>Nix packages</h4>
+      <form method="get" action="https://search.nixos.org/packages">
+        <div class="form-input">
+          <input type="text" placeholder="Search for Nix packages" name="query" />
+        </div>
+      </form>
+    </li>
+    <li>
+      <h4>NixOS options</h4>
+      <form method="get" action="https://search.nixos.org/options">
+        <div class="form-input">
+          <input type="text" placeholder="Search for NixOS options" name="query" />
+        </div>
+      </form>
+    </li>
+  </ul>
 </section>
-%]
 
 <section class="generic-layout learn-manuals">
   <ul>
     <li>
-      <h2>Learn Nix</h2>
+      <h1>Learn Nix</h1>
       <p>Nix is a package manager which comes in a form of many command line tools.
-      Packages that Nix can build are defined with Nix Expression Language.
+        Packages that Nix can build are defined with Nix Expression Language.
       </p>
       <ul>
         <li><a href="[%root%]manual/nix/stable/#ch-installing-binary">Installation</a></li>
@@ -84,9 +72,9 @@
     </li>
 
     <li>
-      <h2>Learn Nixpkgs</h2>
+      <h1>Learn Nixpkgs</h1>
       <p>The Nix Packages collection (Nixpkgs) is a set of thousands of packages for the Nix package manager and NixOS
-      Linux distribution.</p>
+        Linux distribution.</p>
       <ul>
         <li><a href="[%root%]manual/nixpkgs/stable/#chap-packageconfig">Configure nixpkgs</a></li>
         <li><a href="[%root%]manual/nixpkgs/stable/#chap-overrides">Customize packages (override packages)</a></li>
@@ -159,7 +147,7 @@
     </li>
 
     <li>
-      <h2>Learn NixOS</h2>
+      <h1>Learn NixOS</h1>
       <p>NixOS is a Linux distribution based on Nix package manager.</p>
       <ul>
         <li><a href="[%root%]manual/nixos/stable/#sec-installation">Installing NixOS</a></li>
@@ -182,7 +170,7 @@
 <section class="generic-layout learn-gethelp">
   <ul>
     <li>
-      <h2>Other learning resources</h2>
+      <h1>Other learning resources</h1>
       <ul>
         <li>
           <a href="[%root%]guides/nix-pills">Nix Pills</a> — At the beginning you may feel that some of the magic
@@ -196,12 +184,12 @@
       </ul>
     </li>
     <li class="support">
-      <h2>Get help from the community</h2>
+      <h1>Get help from the community</h1>
       <p>The <a href="[%root%]community.html">Community page</a> shows where the community meets.</p>
 
-      <h2>Get commercial support</h2>
+      <h1>Get commercial support</h1>
       <p>The <a href="[%root%]commercial-support.html">Commercial support page</a> provides a list of consulting
-      companies.</p>
+        companies.</p>
     </li>
   </ul>
 </section>

diff --git a/site-styles/pages/learn.less b/site-styles/pages/learn.less
@@ -42,3 +42,28 @@
 		&:extend(.well all);
 	}
 }
+
+.learn-search {
+	& > ul {
+		#columns(2);
+		margin-bottom: 1rem;
+	}
+	form {
+		display: flex;
+		align-items: center;
+		flex-grow: 1;
+		& > .form-input {
+			&, input {
+				margin: 0;
+			}
+			input {
+				background-color: transparent;
+			}
+			flex-grow: 1;
+			.form-input.with-icon({
+				#svg.icon.search.blue-light;
+			});
+		}
+	}
+}
+