Fix overflow-x

next-theme · May 6, 2024 · c437189 · c437189
1 parent e9fe72b
commit c437189
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 18 deletions.
diff --git a/layout/_partials/search/algolia-search.njk b/layout/_partials/search/algolia-search.njk
@@ -11,7 +11,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div class="search-result-container no-result">
+<div class="search-result-container">
   <div class="search-result-icon">
     <i class="fab fa-algolia fa-5x"></i>
   </div>

diff --git a/layout/_partials/search/localsearch.njk b/layout/_partials/search/localsearch.njk
@@ -11,7 +11,7 @@
     <i class="fa fa-times-circle"></i>
   </span>
 </div>
-<div class="search-result-container no-result">
+<div class="search-result-container">
   <div class="search-result-icon">
     <i class="fa fa-spinner fa-pulse fa-5x"></i>
   </div>

diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
@@ -79,11 +79,14 @@ if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable'))
     }
 
     .search-result-container {
+      display: flex;
+      flex-direction: column;
       height: calc(100% - 55px);
       overflow: auto;
       padding: 5px 25px;
 
       hr {
+        flex-shrink: 0;
         margin: 5px 0 10px;
 
         &:first-child {
@@ -105,22 +108,12 @@ if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable'))
       border-bottom: 1px dashed $grey-light;
       padding: 5px 0;
     }
-  }
 
-  .search-popup {
     .search-input-container {
       flex-grow: 1;
       padding: 2px;
     }
 
-    .no-result {
-      display: flex;
-    }
-
-    .search-result-list {
-      width: 100%;
-    }
-
     .search-result-icon {
       color: $grey-light;
       margin: auto;

diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
@@ -28,7 +28,6 @@ document.addEventListener('DOMContentLoaded', () => {
       hitsPerPage          : hits.per_page || 10
     });
     if (data.nbHits === 0) {
-      container.classList.add('no-result');
       container.innerHTML = '<div class="search-result-icon"><i class="far fa-frown fa-5x"></i></div>';
     } else {
       const stats = CONFIG.i18n.hits_time
@@ -47,7 +46,6 @@ document.addEventListener('DOMContentLoaded', () => {
         pagination += '</nav>';
       }
 
-      container.classList.remove('no-result');
       container.innerHTML = `<div class="search-stats">
           <span>${stats}</span>
           <img src="${CONFIG.images}/logo-algolia-nebula-blue-full.svg" alt="Algolia">
@@ -68,7 +66,6 @@ document.addEventListener('DOMContentLoaded', () => {
   const inputEventFunction = async() => {
     const searchText = input.value.trim();
     if (searchText === '') {
-      container.classList.add('no-result');
       container.innerHTML = '<div class="search-result-icon"><i class="fab fa-algolia fa-5x"></i></div>';
       return;
     }

diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
@@ -25,10 +25,8 @@ document.addEventListener('DOMContentLoaded', () => {
       resultItems = localSearch.getResultItems(keywords);
     }
     if (keywords.length === 1 && keywords[0] === '') {
-      container.classList.add('no-result');
       container.innerHTML = '<div class="search-result-icon"><i class="fa fa-search fa-5x"></i></div>';
     } else if (resultItems.length === 0) {
-      container.classList.add('no-result');
       container.innerHTML = '<div class="search-result-icon"><i class="far fa-frown fa-5x"></i></div>';
     } else {
       resultItems.sort((left, right) => {
@@ -41,7 +39,6 @@ document.addEventListener('DOMContentLoaded', () => {
       });
       const stats = CONFIG.i18n.hits.replace('${hits}', resultItems.length);
 
-      container.classList.remove('no-result');
       container.innerHTML = `<div class="search-stats">${stats}</div>
         <hr>
         <ul class="search-result-list">${resultItems.map(result => result.item).join('')}</ul>`;