reworked search to be always visible for mobile and desktop usage

diff --git a/index.html b/index.html
index 6a5686c98e8d47f4b8eff75f9053d524aeb2f339..3b59177f56b69a815179eac406409c3100c7b9af 100644 (file)
--- a/index.html
+++ b/index.html
@@ -3,22 +3,35 @@
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta name="viewport" content="initial-scale=1">
 <link rel="stylesheet" href="style.css">
-<title>Michael D. Lowis - About Me</title>
+<title>Jarvis</title>
 
-<aside id="dialog" class="hidden">
+<nav>
+    <input id="SearchBox" type="text" placeholder="Search..">
     <section>
-        <label>Search Title:</label><input id="search" type="search"/>
-        <ul id="pages"></ul>
+        <ul id="PageList"></ul>
     </section>
-</aside>
+</nav>
+
+<article id="Content"></article>
 
 <script>
+const hideResults = ()=>{
+    SearchBox.value = "";
+    PageList.classList.add('hidden');
+    Content.classList.remove('hidden');
+    window.focus();
+    if (document.activeElement)
+    {
+        document.activeElement.blur();
+    }
+}
+
 const loadPage = (file, dir = { J: 'journals', N: 'notes', T: 'tasks' }[file[0]]) =>
     fetch(dir+"/"+file)
         .then(response => response.text())
         .then(data => {
-            code.innerText = data;
-            dialog.classList.add('hidden');
+            hideResults();
+            Content.innerText = data;
         });
 
 (() => {
@@ -30,25 +43,35 @@ const loadPage = (file, dir = { J: 'journals', N: 'notes', T: 'tasks' }[file[0]]
             props );
     };
 
-    const filterPages = (value = search.value.toLowerCase()) =>
-        [...pages.children].forEach( child => child.css('hidden',
+    const filterPages = (value = SearchBox.value.toLowerCase()) =>
+        [...PageList.children].forEach( child => child.css('hidden',
             !child.innerText.toLowerCase().includes(value) ));
 
+    const showResults = ()=>{
+        SearchBox.focus();
+        filterPages();
+        PageList.classList.remove('hidden');
+        Content.classList.add('hidden');
+    }
+
     const keys = {
         "f": () => {
-            dialog.classList.remove('hidden');
-            search.value = "";
-            filterPages();
-            search.focus();
+            SearchBox.value = "";
+            showResults();
         },
         "Escape": () => {
-            dialog.classList.add('hidden');
+            hideResults();
         }
     };
     document.onkeyup = ev => !keys[ev.key] || keys[ev.key](ev);
 
-    search.onkeyup = (ev) => {
-        filterPages();
+    SearchBox.onkeyup = (ev) => {
+        if (ev.key === "Escape") {
+            hideResults();
+        } else {
+            showResults();
+            filterPages();
+        }
         ev.key !== 'Escape' && ev.stopPropagation();
     }
 
@@ -56,11 +79,7 @@ const loadPage = (file, dir = { J: 'journals', N: 'notes', T: 'tasks' }[file[0]]
 
     fetch("index.json")
         .then(response => response.json())
-        .then(data => pages.append(...Object.entries(data).map( ([key, value]) =>
+        .then(data => PageList.append(...Object.entries(data).map( ([key, value]) =>
             L('li', {}, L('a', {href: '#', onclick: () => loadPage(key)}, value)) )));
 })();
 </script>
-
-
-<code id="code">
-</code>

diff --git a/style.css b/style.css
index cfecf32d59ac49145d936a4d461d63076839a569..634c7146670a236fada11d73f33bb3f85c42762d 100644 (file)
--- a/style.css
+++ b/style.css
@@ -68,6 +68,18 @@ blockquote {
 //    padding: 0.5em 1em 0.5em 1em;
 //}
 
+nav {
+    width: 100%;
+    margin: auto;
+    padding-bottom: 2rem;
+}
+
+nav input {
+    width: 100%;
+    margin: auto;
+    height: 1.5rem;
+}
+
 header a {
     color: var(--fg-color);
     text-decoration: none;