💄 Design search box footer with pagination & fixed toc enable in home page.

assets/css/_common/components/third-party/search.scss

@@ -78,37 +78,31 @@
       height: calc(100% - 55px);
       overflow: auto;
       padding: 0px 25px;
-
-      hr {
-        margin: 5px 0 10px;
-
-        &:first-child {
-          display: none;
-        }
-      }
     }
 
     .search-footer {
       background: var(--content-bg-color);
       border-bottom-left-radius: 5px;
       border-bottom-right-radius: 5px;
-      display: flex;
       padding: 0 5px;
-
-      div {
       color: var(--text-color);
-        padding: 5px;
-      }
+
+      .search-meta-info {
+        height: 26px;
+        display: flex;
+        padding: 5px 0;
         
         .search-hit-stats {
-        width: 65%;
           font-size: $font-size-smaller;
-        
+          width: 65%;
+          padding: 2px 8px;
         }
+
         .search-vendor {
-        width: 35%;
+          width: 34%;
           text-align: right;
           font-size: $font-size-small;
+          font-weight: bold;
           
           img {
             width: 68px;
@@ -119,6 +113,8 @@
         }
       }
 
+    }
+
     .search-result-list {
       margin: 0 5px;
       padding: 0;
@@ -164,9 +160,11 @@
 
   .algolia-pagination {
     // Override default style of ul
-    margin: 40px 0;
+    //margin: 40px 0;
     opacity: 1;
     padding: 0;
+    font-size: $font-size-smallest;
+    margin-bottom: -16px;
 
     .pagination {
       visibility: visible;

assets/js/next-boot.js

@@ -10,7 +10,9 @@ NexT.boot.registerEvents = function() {
 
   NexT.utils.registerScrollPercent();
   // NexT.utils.registerCanIUseTag();
+  if (NexT.CONFIG.page.isPage) {
     NexT.utils.registerToolButtons();
+  }
 
   // Mobile top menu bar.
   document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => {

layouts/partials/_thirdparty/search/algolia.html

@@ -9,12 +9,14 @@
 </div>
 <div class="search-result-container">
   <div class="algolia-hits"></div>
-  <div class="algolia-pagination"></div>
 </div>
 <div class="search-footer">
+  <div class="algolia-pagination"></div>
+  <div class="search-meta-info">
     <div class="search-hit-stats algolia-stats"></div>
     <div class="search-vendor">
       <span>Search By</span>
       <img src="/imgs/algolia-logo.svg"/>
     </div>
+  </div>
 </div>