diff --git a/css/index.css b/css/index.css index 7eb8876..d38ff8d 100644 --- a/css/index.css +++ b/css/index.css @@ -565,6 +565,7 @@ a[href].direct-link:focus:visited, .search { align-items: center; display: flex; + flex-direction: column; position: absolute; right: 0; top: -6px; @@ -591,7 +592,7 @@ a[href].direct-link:focus:visited, .search-icon { position: absolute; right: 13px; - top: calc(50% - 8px); + top: 11px; fill: var(--graymedium); pointer-events: none; } @@ -609,6 +610,7 @@ a[href].direct-link:focus:visited, box-shadow: 0 0 10px rgba(68, 68, 68, 0.1); height: 85vh; overflow: auto; + width: 18rem; } #search-results li { padding: 0; @@ -642,6 +644,7 @@ a[href].direct-link:focus:visited, margin: 0; padding: 2rem; box-shadow: 0 0 10px rgba(68, 68, 68, 0.1); + width: 18rem; } #no-results-found p { @@ -882,6 +885,16 @@ table tr:nth-child(odd) { .search input:focus + .search-icon { display: none; } + + #search-results { + width: 100%; + } + + #no-results-found { + width: 100%; + } + + .preheader { padding: 1rem; } diff --git a/js/search.js b/js/search.js index b2c6194..286e092 100644 --- a/js/search.js +++ b/js/search.js @@ -7,14 +7,16 @@ expand: true, }); + const cleanResults = results.filter((r) => r.doc.title !== undefined) + const resEl = document.getElementById("search-results"); const noResultsEl = document.getElementById("no-results-found"); resEl.innerHTML = ""; - if (results.length > 0) { + if (cleanResults.length > 0) { resEl.style.display = "block"; noResultsEl.style.display = "none"; - results.map((r) => { + cleanResults.map((r) => { const { id, title, description } = r.doc; const el = document.createElement("li"); resEl.appendChild(el);