client, css: "you are here" indicator

2 files changed, 43 insertions, 2 deletions

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;
 }