@healthcatalyst/catalyst-docfx-template 1.0.151 → 1.0.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@healthcatalyst/catalyst-docfx-template",
-  "version": "1.0.151",
+  "version": "1.0.153",
   "license": "MIT",
   "description": "A DocFX Template patching the Default template.",
   "publishConfig": {

package/styles/main.css

@@ -2103,9 +2103,9 @@ article .tabGroup > ul > li {
 
 /* Side search styling */
 .sidefilter .docs-search {
-  padding: 10px;
-  background: #f8f9fa;
-  border-bottom: 1px solid #dee2e6;
+  padding: 0px;
+  background: transparent;
+  border: 0px;
 }
 
 .sidefilter .side-search {
@@ -2113,10 +2113,12 @@ article .tabGroup > ul > li {
   display: flex;
   align-items: center;
   margin: 0;
+  width:100%;
 }
 
 .sidefilter #search-query {
   width: 100%;
+  height:35px;
   padding: 8px 12px 8px 35px;
   border: 1px solid #ced4da;
   border-radius: 4px;
@@ -2143,6 +2145,8 @@ article .tabGroup > ul > li {
   font-weight: 900;
   position: absolute;
   left: 12px;
+  top:50%;
+  transform: translateY(-50%);
   color: #6c757d;
   pointer-events: none;
   z-index: 1;

package/toc.html.primary.tmpl

@@ -0,0 +1,48 @@
+{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
+
+<div id="sidetoggle">
+  <div>
+    {{^_disableSideFilter}}
+    <div class="sidefilter">
+      <div class="docs-search">
+        <form role="search" id="search" class="side-search">
+          <input type="text" id="search-query" placeholder="Search this site" autocomplete="off" aria-label="Search the site">
+          <button type="button" id="search-clear" aria-label="Clear search" style="position:absolute;right:8px;background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:#666;">×</button>
+        </form>
+      </div>
+    </div>
+    {{/_disableSideFilter}}
+    <div class="sidetoc">
+      <div class="toc" id="toc">
+        {{^leaf}}
+          {{>partials/li}}
+        {{/leaf}}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  // Wait for DOM and search to be ready
+  $(document).ready(function() {
+    var searchInput = $('#search-query');
+    if (!searchInput.length) return;
+    
+    // Trigger the existing searchEvent
+    $('body').trigger('searchEvent');
+    
+    // Ensure search input triggers query
+    searchInput.on('input', function() {
+      var query = $(this).val();
+      if (query && query.length >= 3) {
+        $('body').trigger('queryReady');
+        $('#search-results>.search-list>span').text('"' + query + '"');
+      } else if (query === '') {
+        $('.hide-when-search').show();
+        $('#search-results').hide();
+      }
+    });
+  });
+})();
+</script>