@healthcatalyst/catalyst-docfx-template 1.0.153 → 1.0.155

package/layout/_master.tmpl

@@ -19,7 +19,12 @@
         {{>partials/breadcrumb}}
         {{/_enableBreadcrumb}}
       </header>
-        <div role="main" class="docs-container body-content">
+            {{#_enableSearch}}
+      <div class="container-fluid body-content">
+        {{>partials/searchResults}}
+      </div>
+      {{/_enableSearch}}
+        <div role="main" class="docs-container body-content hide-when-search">
       {{^_enableToc}}
         <div class="article row grid">
       {{/_enableToc}}
@@ -44,9 +49,6 @@
             <article class="content wrap" id="_content" data-uid="{{uid}}">
                 {{!body}}
             </article>
-            {{#_enableSearch}}
-                {{>partials/searchResults}}
-            {{/_enableSearch}}
             {{#_enableFeedback}}
             {{>partials/feedback}}
             {{/_enableFeedback}}

package/package.json

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

package/partials/breadcrumb.tmpl.partial

@@ -17,5 +17,13 @@
         </ul>
       </div>
 	    </div>
+		<div class="docs-subnav-right" id="subnav-right">
+			<div class="docs-search">
+				<span class="docs-subnav-search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
+				<form role="search" id="search" style="display: block;">
+					<input type="text" id="search-query" placeholder="Search">
+				</form>
+			</div>
+		</div>
     </div>
 </div>

package/styles/main.css

@@ -739,7 +739,6 @@ output {
 
 #search {
     border: none;
-    display:block;
 }
 
 
@@ -1159,8 +1158,8 @@ output {
     border: 1px lightgray solid;
     display: flex;
     align-items: center;
-    width: 100%;
-    /*padding: 2px 2px 2px 10px;*/
+    width: 180px;
+    padding: 2px 2px 2px 10px;
     margin: 6px 5px 6px auto;
 }
 
@@ -2101,77 +2100,9 @@ article .tabGroup > ul > li {
   background-color: #f1f1f1;
 }
 
-/* Side search styling */
-.sidefilter .docs-search {
-  padding: 0px;
-  background: transparent;
-  border: 0px;
-}
-
-.sidefilter .side-search {
-  position: relative;
-  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;
-  font-size: 14px;
-  box-sizing: border-box;
-  background-color: #fff;
-  outline: none;
-}
-
-.sidefilter #search-query:focus {
-  border-color: #00aeff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 174, 255, 0.25);
-}
-
-.sidefilter #search-query::placeholder {
-  color: #a1a1a1;
-  opacity: 1;
-}
-
-/* Search icon */
-.sidefilter .side-search::before {
-  content: "\f002"; /* FontAwesome search icon */
-  font-family: "FontAwesome", "Font Awesome 5 Free";
-  font-weight: 900;
-  position: absolute;
-  left: 12px;
-  top:50%;
-  transform: translateY(-50%);
-  color: #6c757d;
-  pointer-events: none;
-  z-index: 1;
-}
-
-#search-results {
-  max-width: 935px;
-  margin: 0;
-  padding: 0 0 32px;
-  position: relative;
-  z-index: 1;
-}
-
-#search { position:relative; }
-#search-clear {
-  position:absolute;
-  top:50%;
-  right:8px;
-  transform:translateY(-50%);
-  background:none;
-  border:0;
-  padding:0;
-  font-size:18px;
-  line-height:1;
-  cursor:pointer;
-  color:#666;
-}
-#search-clear:hover { color:#000; }
+/* Make the right-hand In-This-Topic panel scrollable */
+.sideaffix .affix {
+    max-height: calc(100vh - 150px); /* adjust based on header/footer */
+    overflow-y: auto;
+    overflow-x: hidden;
+}

package/partials/searchResults.tmpl.partial

@@ -1,9 +0,0 @@
-{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
-
-<div id="search-results" style="display:none;">
-  <div class="search-list">{{__global.searchResults}} <span></span></div>
-  <div class="sr-items">
-    <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
-  </div>
-  <ul id="pagination" data-first={{__global.pageFirst}} data-prev={{__global.pagePrev}} data-next={{__global.pageNext}} data-last={{__global.pageLast}}></ul>
-</div>