Fix search forms, improve search styles

duckduckgo · Mar 13, 2019 · a088fa6 · a088fa6
1 parent 647d886
commit a088fa6
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/404.md b/404.md
@@ -6,8 +6,9 @@ sitemap: false
 
 We could not find the help page you requested.
 
-<form action="/duckduckgo-help-pages/search/" method="get">
-  <input type="text" name="q" id="search-input" placeholder="Search" autofocus="">
-  <input type="submit" value="Search" style="display: none;">
+<!-- markdownlint-disable -->
+<form action="{{ site.baseurl }}/search/" method="get">
+  <input type="text" name="q" class="search-input" placeholder="Search" autofocus="" autocomplete="off">
+  <input type="submit" class="hidden" value="Search">
 </form>
-
+<!-- markdownlint-enable -->
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -22,7 +22,7 @@ <h1>
 			</h1>
 
 			<form action="{{ site.baseurl }}/search/" method="get">
-				<input type="text" name="q" id="search-input" placeholder="Search" autofocus>
+				<input type="text" name="q" id="nav-search-input" class="search-input" placeholder="Search" autofocus>
 				<input type="submit" value="Search" style="display: none;">
 			</form>
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -369,8 +369,7 @@ h4 svg {
 	}
 }
 
-
-#search-input {
+.search-input {
 	-webkit-appearance: none;
 	display: block;
 	margin: 0;
@@ -382,12 +381,21 @@ h4 svg {
 	border-left: 5px solid transparent;
 	font-size: 1.5rem;
 	font-weight: 600;
-	line-height: 1.8;
+    line-height: 1.8;
 
 	&:focus {
-		outline: none;
+        outline: none;
 		border-left-color: $brand-colour;
 	}
+
+    .main & {
+        border: 1px solid rgba(0, 0, 0, 0.075);
+        border-radius: 4px;
+
+        &:focus {
+            border: 1px solid $brand-colour;
+        }
+    }
 }
 
 .changelog {
@@ -475,13 +483,12 @@ img {
 
 /* Page Footer */
 .footer {
-    $footer-text: #666;
     border-top: 1px solid #ddd;
     margin-top: auto;
 
     .content {
         @include display-flex;
-        color: $footer-text;
+        color: $footer-color;
         justify-content: space-between;
         flex-wrap: wrap;
         font-size: 0.75em;
@@ -498,7 +505,7 @@ img {
             white-space: nowrap;
 
             &:hover {
-                color: #222;
+                color: $content-color;
                 text-decoration: underline;
             }
         }
@@ -507,7 +514,7 @@ img {
             display: block;
             width: 2px;
             height: 2px;
-            background-color: $footer-text;
+            background-color: $footer-color;
             border-radius: 100%;
             margin: 0 0.5em;
         }
@@ -521,3 +528,6 @@ img {
     }
 }
 
+.hidden {
+    display: none;
+}
diff --git a/css/main.scss b/css/main.scss
@@ -18,6 +18,8 @@ $nav-header-height: 60px;
 $nav-background-color: #f5f5f5;
 $nav-width: 300px;
 
+$footer-color: #444;
+
 $space: 20px;
 
 $mobile-break: 700px;

diff --git a/index.md b/index.md
@@ -4,8 +4,9 @@ title: Welcome
 
 Welcome to DuckDuckGo Help - If you can't find an answer to your DuckDuckGo question, [ask the community](https://www.reddit.com/r/duckduckgo/)!
 
-<form action="/duckduckgo-help-pages/search/" method="get">
-  <input type="text" name="q" id="search-input" placeholder="Search" autofocus="">
-  <input type="submit" value="Search" style="display: none;">
+<!-- markdownlint-disable -->
+<form action="{{ site.baseurl }}/search/" method="get">
+  <input type="text" name="q" class="search-input" placeholder="Search" autofocus="" autocomplete="off">
+  <input type="submit" class="hidden" value="Search">
 </form>
-
+<!-- markdownlint-enable -->
diff --git a/scripts/search.js b/scripts/search.js
@@ -91,7 +91,7 @@ layout: null
 	var query = decodeURIComponent((getQueryVariable("q") || "").replace(/\+/g, "%20")),
 		searchQueryContainerEl = document.getElementById("search-query-container"),
 		searchQueryEl = document.getElementById("search-query"),
-		searchInputEl = document.getElementById("search-input");
+		searchInputEl = document.getElementById("nav-search-input");
 
 	searchInputEl.value = query;
 	searchQueryEl.innerText = query;
@@ -102,4 +102,4 @@ layout: null
 	}
 
 	displaySearchResults(window.index.search(query), query); // Hand the results off to be displayed
-})();
+})();