styling of the search bar. Improved functionality. Still needs styling.

diff --git a/assets/js/search.js b/assets/js/search.js
index e609fbe..b45e0f0 100644 (file)
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -31,12 +31,12 @@ import * as params from '@params';
       const item = items[id];
       const result = template.cloneNode(true);
       const a = result.querySelector('a');
-      const time = result.querySelector('time');
-      const content = result.querySelector('.content');
+      // const time = result.querySelector('time');
+      // const content = result.querySelector('.content');
       a.innerHTML = item.title;
       a.href = item.permalink;
-      time.innerText = item.date;
-      content.innerHTML = item.summary;
+      // time.innerText = item.date;
+      // content.innerHTML = item.summary;
       fragment.appendChild(result);
     }
     results.appendChild(fragment);

diff --git a/assets/sass/components/_search.scss b/assets/sass/components/_search.scss
new file mode 100644 (file)
index 0000000..1fdc1f3
--- /dev/null
+++ b/assets/sass/components/_search.scss
@@ -0,0 +1,5 @@
+       #search-container {
+               div.search-results {
+                       overflow-y: scroll;
+               }
+       }

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 26fae48..6d26e38 100644 (file)
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -60,6 +60,7 @@
        @import 'components/tiles';
        @import 'components/contact-method';
        @import 'components/spotlights';
+       @import 'components/search';
 
 // Layout.
 

diff --git a/layouts/partials/footer-addition.html b/layouts/partials/footer-addition.html
index 0148109..e97077c 100644 (file)
--- a/layouts/partials/footer-addition.html
+++ b/layouts/partials/footer-addition.html
@@ -18,10 +18,8 @@
 <script defer src="{{ $contact.RelPermalink }}"></script>
 {{ end -}}
 
-{{ if .HasShortcode "search" -}}
 {{ $flexsearch := resources.Get "js/flexsearch.compact.js" | fingerprint -}}
 <script defer src="{{ $flexsearch.RelPermalink }}"></script>
 {{ $search_opts := dict "minify" true "params" (dict "searchLimit" (site.Params.searchLimit | default 20)) -}}
 {{ $search := resources.Get "js/search.js" | js.Build $search_opts | fingerprint -}}
 <script defer src="{{ $search.RelPermalink }}"></script>
-{{ end -}}

diff --git a/layouts/partials/main-menu.html b/layouts/partials/main-menu.html
index 573f030..dc57060 100644 (file)
--- a/layouts/partials/main-menu.html
+++ b/layouts/partials/main-menu.html
@@ -19,5 +19,6 @@
                 </li>
             {{ end }}
         {{ end }}
+        <li>{{- partial "search.html" . -}}</li>
     </ul>
 </nav>

diff --git a/layouts/partials/search.html b/layouts/partials/search.html
new file mode 100644 (file)
index 0000000..9d5d852
--- /dev/null
+++ b/layouts/partials/search.html
@@ -0,0 +1,22 @@
+<div id="search-container">
+  <p class="error message js-hidden">JavaScript is required for this form to work</p>
+  <p class="search-loading status message hidden">Loading Search Results</p>
+
+  <div class="search-input hidden">
+    <form id="search-form" class="search-form" action="#" method="post" accept-charset="UTF-8" role="search">
+      <label for="query" >Search this site</label>
+      <input type="search" id="query" name="query" class="search-text" placeholder="Search this site..." maxlength="128">
+      <input type="submit" name="submit" class="form-submit hidden" value="Search" />
+    </form>
+  </div>
+
+  <div class="search-results"></div>
+
+  <template>
+    <article class="search-result list-view">
+      <header>
+        <h3 class="title title-submitted"><a href="#">Title here</a></h3>
+      </header>
+    </article>
+  </template>
+</div>