Style search input and search page

avisi-cloud · Apr 12, 2023 · 1554eb4 · 1554eb4
1 parent 6b1740c
commit 1554eb4
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/PageHeader.kt
@@ -27,7 +27,9 @@ fun BODY.pageHeader(viewModel: HeaderBarViewModel) {
                     input(classes = "input is-small is-rounded has-site-branding") {
                         id = "search"
                         type = InputType.search
-                        placeholder = "Search (3 characters required)..."
+                        size = "20"
+                        maxLength = "50"
+                        placeholder = "Search (requires 3 characters)..."
                         onKeyUp = "redirect(event, value, '${viewModel.searchLink.relativeHref}')"
                     }
                 }

diff --git a/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SearchPage.kt b/src/main/kotlin/nl/avisi/structurizr/site/generatr/site/views/SearchPage.kt
@@ -51,7 +51,7 @@ fun HTML.searchPage(viewModel: SearchViewModel) {
                 type = ScriptType.textJavaScript,
                 src = "../" + "/search.js".asUrlToFile(viewModel.url)
             ) { }
-            ul { id = "search-results" }
+            div { id = "search-results" }
         }
     }
 }

diff --git a/src/main/resources/assets/js/search.js b/src/main/resources/assets/js/search.js
@@ -17,27 +17,41 @@ function search(terms) {
     return { score: item.score, href: document.href, type: document.type, title: document.title };
   });
 
-  const ul = document.getElementById('search-results');
-  results.forEach(result => {
-    ul.appendChild(createLi(result));
-  });
+  const div = document.getElementById('search-results');
+
+  if (results.length === 0) {
+    div.appendChild(createNoResultsElement());
+  } else {
+    results.forEach(result => {
+      div.appendChild(createResultElement(result));
+    });
+  }
 }
 
-function createLi(result) {
-  const li = document.createElement('li');
-  const a1 = document.createElement('a');
-  a1.href = result.href;
-  a1.innerText = result.href;
-
-  const a2 = document.createElement('a');
-  a2.href = result.href;
-  const h = document.createElement('h3');
-  h.innerText = result.title;
-  h.className = 'mb-0';
-
-  a2.appendChild(h);
-  li.appendChild(a1);
-  li.appendChild(a2);
-  li.append(result.type);
-  return li;
+function createResultElement(result) {
+  const p = document.createElement('p');
+
+  const link = document.createElement('a');
+  link.href = result.href;
+  const title = document.createElement('p');
+  title.innerText = result.title;
+  title.className = 'mb-0';
+
+  const type = document.createElement('small');
+  type.innerText = result.type;
+
+  link.appendChild(title);
+  p.appendChild(link);
+  p.appendChild(type);
+  return p;
+}
+
+function createNoResultsElement() {
+  const p = document.createElement('p');
+  const small = document.createElement('small');
+  small.className = 'is-italic';
+  small.innerText = 'Your search yielded no results';
+
+  p.appendChild(small);
+  return p;
 }