From 7bda685927f1a26673982fedc656ce85fc6ffa7b Mon Sep 17 00:00:00 2001
From: Alvie Rahman <alvierahman90@gmail.com>
Date: Sat, 21 Aug 2021 10:33:31 +0100
Subject: [PATCH] Add a max no. results input

---
 search.js                 |  4 +++-
 styles.css                | 12 +++++++++---
 templates/home_index.html |  5 ++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/search.js b/search.js
index c5dbdb5..46f02bb 100644
--- a/search.js
+++ b/search.js
@@ -9,11 +9,12 @@ const fuse = new Fuse(data, {
 })
 
 const searchBar = document.getElementById('search')
+const resultsMax = document.getElementById('resultsMax')
 const results = document.getElementById('results')
 
 function callback() {
   results.innerHTML = ''
-  fuse.search(searchBar.value).slice(0,15).forEach(r => {
+  fuse.search(searchBar.value).slice(0, parseInt(resultsMax.value)).forEach(r => {
     wrapper = document.createElement('div')
     wrapper.className = "article"
 
@@ -64,4 +65,5 @@ function callback() {
 }
 
 searchBar.addEventListener('keyup', callback)
+resultsMax.addEventListener('keyup', callback)
 callback()
diff --git a/styles.css b/styles.css
index 6247f7a..a2156d6 100644
--- a/styles.css
+++ b/styles.css
@@ -73,13 +73,19 @@ blockquote * {
 	margin: 0;
 }
 
-#search {
+#searchWrapper > input {
 	padding: 1em;
-	margin: 1em 0 1em 0;
+	margin: 1em 0.5em 1em 0.5em;
 	font-size: 1em;
-	width: 100%;
+	min-width: 0;
 }
 
+#searchWrapper {
+	display: flex
+}
+
+#search { flex-grow: 9 }
+
 #results {
 	overflow-x: scroll;
 }
diff --git a/templates/home_index.html b/templates/home_index.html
index 1b91114..b9f056f 100644
--- a/templates/home_index.html
+++ b/templates/home_index.html
@@ -12,11 +12,14 @@ These are my personal notes. Correctness is not guaranteed.
 Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
 </p>
 
+<div id="searchWrapper">
 <input placeholder="Search" id="search">
+<input type="number" id="resultsMax" min="0" value="5">
+</div>
 <div id="results">
 </div>
 
-<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
 
 <script src="/fuse.js"> </script>
 <script> const data = $data$ </script>