[TEDEFO-712]: Made search result headers sticky and improved styling …

…of search filters.
OP-TED · Mar 24, 2022 · 1a48bce · 1a48bce
1 parent 5976900
commit 1a48bce
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/src/css/search.css b/src/css/search.css
@@ -64,7 +64,7 @@
   position: relative;
   border: 1px solid #d9d9d9;
   background: #fff;
-  border-radius: 4px;
+  /* border-radius: 4px; */
   overflow: auto;
   padding: 0 8px 8px;
   max-height: calc(100vh - 5.25rem);
@@ -73,9 +73,9 @@
 
 .search-filter {
   position: relative;
-  background: #fff;
+  background: #d9d9d9;
   padding: 0 8px 8px;
-  font-size: 0.75em;
+  font-size: 1em;
   color: #02060c;
   font-weight: normal;
 }
@@ -84,6 +84,10 @@
   display: inline-block;
 }
 
+.search-filter-component {
+  margin: 2px 8px 2px 4px
+}
+
 .search-result-highlight {
   color: #174d8c;
   background: rgba(143, 187, 237, 0.1);
@@ -142,3 +146,10 @@
 .search-result-document-hit > a:hover {
   background-color: rgba(69, 142, 225, 0.05);
 }
+
+.sticky {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 1000;
+}
diff --git a/src/js/vendor/search.js b/src/js/vendor/search.js
@@ -16,6 +16,8 @@ window.antoraLunr = (function (lunr) {
     var searchFilterEl = document.createElement('div')
     searchFilterEl.classList.add('search-filter')
 
+    var searchFilterSpan
+
     var searchAllSpan = document.createElement('span')
     searchAllSpan.innerText="Search in:"
     searchFilterEl.appendChild(searchAllSpan)
@@ -32,21 +34,27 @@ window.antoraLunr = (function (lunr) {
       if(!uniqueComponents.some(c => c.name == component.name)) {
         uniqueComponents.push(component)
 
+        searchFilterSpan = document.createElement('span')
+        searchFilterSpan.classList.add('search-filter-component')
         searchFilterInput = document.createElement('input')
         searchFilterInput.type = 'checkbox'
         searchFilterInput.id = 'search_filter_' + component.name
         searchFilterInput.name = 'search_filter'
         if(currentComponent.name == component.name || currentComponent.name == 'home') {
           searchFilterInput.checked = 'checked'
         }
-        searchFilterEl.appendChild(searchFilterInput)
+        searchFilterSpan.appendChild(searchFilterInput)
 
         searchFilterLabel = document.createElement('label')
         searchFilterLabel.innerText = component.title
-        searchFilterEl.appendChild(searchFilterLabel)
+        searchFilterLabel.setAttribute('for', 'search_filter_' + component.name)
+        searchFilterSpan.appendChild(searchFilterLabel)
+        searchFilterEl.appendChild(searchFilterSpan)
       }
     })
 
+    searchFilterSpan = document.createElement('span')
+    searchFilterSpan.classList.add('search-filter-component')
     searchFilterInput = document.createElement('input')
     searchFilterInput.type = 'checkbox'
     searchFilterInput.id = 'search_filter_all'
@@ -55,10 +63,14 @@ window.antoraLunr = (function (lunr) {
       searchFilterInput.checked = 'true'
     }
 
-    searchFilterEl.appendChild(searchFilterInput)
+    searchFilterSpan.appendChild(searchFilterInput)
+
     searchFilterLabel = document.createElement('label')
     searchFilterLabel.innerText = 'Everywhere'
-    searchFilterEl.appendChild(searchFilterLabel)
+    searchFilterLabel.setAttribute('for', 'search_filter_all')
+    searchFilterSpan.appendChild(searchFilterLabel)
+
+    searchFilterEl.appendChild(searchFilterSpan)
 
     return searchFilterEl
   }
@@ -194,7 +206,7 @@ window.antoraLunr = (function (lunr) {
     var searchResultGroup = document.createElement('div')
 
     var searchResultGroupName = document.createElement('div')
-    searchResultGroupName.classList.add('search-result-group')
+    searchResultGroupName.classList.add('search-result-group', 'sticky')
     searchResultGroupName.innerText = groupName
     searchResultGroup.appendChild(searchResultGroupName)