From 0dd27ef9bbe41370d859ae48dcecd5c87303d567 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Mon, 6 May 2024 17:37:42 -0300 Subject: client, css: "you are here" indicator --- .../dependencies/generateSearchSidebarBox.js | 3 +++ src/static/css/site.css | 20 ++++++++++++++++- src/static/js/client.js | 25 +++++++++++++++++++++- src/strings-default.yaml | 3 +++ 4 files changed, 49 insertions(+), 2 deletions(-) diff --git a/src/content/dependencies/generateSearchSidebarBox.js b/src/content/dependencies/generateSearchSidebarBox.js index d4d6b4e0..7dd0b3c8 100644 --- a/src/content/dependencies/generateSearchSidebarBox.js +++ b/src/content/dependencies/generateSearchSidebarBox.js @@ -22,6 +22,9 @@ export default { html.tag('template', {class: 'wiki-search-no-results-string'}, language.$('misc.search.noResults')), + + html.tag('template', {class: 'wiki-search-current-result-string'}, + language.$('misc.search.currentResult')), ], }), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 17a85170..c8fe9cde 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -511,6 +511,10 @@ summary .group-name { padding: 4px 3px 4px 6px; } +.wiki-search-result:hover { + text-decoration: none !important; +} + .wiki-search-result::before { content: ''; position: absolute; @@ -529,12 +533,26 @@ summary .group-name { background: var(--light-ghost-color); } -.wiki-search-result-name { +.wiki-search-result-text-area { align-self: center; flex-grow: 1; padding-bottom: 2px; } +.wiki-search-result-name { + margin-right: 0.25em; +} + +.wiki-search-result:hover .wiki-search-result-name { + text-decoration: underline; +} + +.wiki-search-current-result-text { + font-style: oblique; + opacity: 0.9; + display: inline-block; +} + .wiki-search-result-image, .wiki-search-result-image-placeholder { align-self: flex-start; diff --git a/src/static/js/client.js b/src/static/js/client.js index 1b98137a..de90285c 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -3580,6 +3580,7 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', { results: null, noResultsString: null, + currentResultString: null, state: { stoppedTypingTimeout: null, @@ -3605,6 +3606,9 @@ function getSidebarSearchReferences() { info.noResultsString = info.searchBox.querySelector('.wiki-search-no-results-string'); + + info.currentResultString = + info.searchBox.querySelector('.wiki-search-current-result-string'); } function mutateSidebarSearchContent() { @@ -3803,6 +3807,8 @@ function getSearchResultImageSource(result) { } function generateSidebarSearchResultTemplate(slots) { + const info = sidebarSearchInfo; + const link = document.createElement('a'); link.classList.add('wiki-search-result'); @@ -3832,13 +3838,30 @@ function generateSidebarSearchResultTemplate(slots) { link.appendChild(placeholder); } + const text = document.createElement('span'); + text.classList.add('wiki-search-result-text-area'); + if (slots.name) { const span = document.createElement('span'); span.classList.add('wiki-search-result-name'); span.appendChild(document.createTextNode(slots.name)); - link.appendChild(span); + text.appendChild(span); + } + + if (link.href) { + const here = location.href.replace(/\/$/, ''); + const there = link.href.replace(/\/$/, ''); + if (here === there) { + const span = document.createElement('span'); + span.classList.add('wiki-search-current-result-text'); + span.appendChild(templateContent(info.currentResultString)); + text.appendChild(document.createTextNode(' ')); + text.appendChild(span); + } } + link.appendChild(text); + return link; } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index ec298749..47e96a97 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -621,10 +621,13 @@ misc: search: placeholder: "Search for anything" + noResults: >- No results for this query, sorry! Check spelling and use complete words. + currentResult: "(you are here)" + # skippers: # # These are navigational links that only show up when you're -- cgit 1.3.0-6-gf8a5