[opt] search

layout/_partial/widgets/search.ejs

@@ -2,7 +2,7 @@
 function layoutDiv() {
   var el = '<widget class="widget-wrapper search">'
   el += '<div class="widget-body">'
-  el += '<div class="search-wrapper" id="search">'
+  el += '<div class="search-wrapper" id="search-wrapper">'
   el += '<form class="search-form">'
   var filter = ''
   if (item.filter == 'auto') {
@@ -27,7 +27,7 @@ function layoutDiv() {
   } else {
     el += ' placeholder="' + (item.placeholder || __('search.search')) + '">'
   }
-  el += '<svg t="1670596976048" class="icon search-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M938.2 832.6L723.8 618.1c-2.5-2.5-5.3-4.4-7.9-6.4 36.2-55.6 57.3-121.8 57.3-193.1C773.3 222.8 614.6 64 418.7 64S64 222.8 64 418.6c0 195.9 158.8 354.6 354.6 354.6 71.3 0 137.5-21.2 193.2-57.4 2 2.7 3.9 5.4 6.3 7.8L832.5 938c14.6 14.6 33.7 21.9 52.8 21.9 19.1 0 38.2-7.3 52.8-21.8 29.2-29.1 29.2-76.4 0.1-105.5M418.7 661.3C284.9 661.3 176 552.4 176 418.6 176 284.9 284.9 176 418.7 176c133.8 0 242.6 108.9 242.6 242.7 0 133.7-108.9 242.6-242.6 242.6" p-id="2677"></path></svg>'
+  el += '<svg t="1705074644177" class="icon search-icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1560" width="200" height="200"><path d="M1008.839137 935.96571L792.364903 719.491476a56.783488 56.783488 0 0 0-80.152866 0 358.53545 358.53545 0 1 1 100.857314-335.166073 362.840335 362.840335 0 0 1-3.689902 170.145468 51.248635 51.248635 0 1 0 99.217358 26.444296 462.057693 462.057693 0 1 0-158.255785 242.303546l185.930047 185.725053a51.248635 51.248635 0 0 0 72.568068 0 51.248635 51.248635 0 0 0 0-72.978056z" fill="#111111" p-id="1561"></path><path d="M616.479587 615.969233a50.428657 50.428657 0 0 0-61.498362-5.534852 174.655348 174.655348 0 0 1-177.525271 3.484907 49.403684 49.403684 0 0 0-58.833433 6.76482l-3.074918 2.869923a49.403684 49.403684 0 0 0 8.609771 78.10292 277.767601 277.767601 0 0 0 286.992355-5.739847 49.403684 49.403684 0 0 0 8.404776-76.667958z" fill="#00C569" p-id="1562"></path></svg>'
   el += '</form>'
   el += '<div id="search-result"></div>'
   el += '<div class="search-no-result">' + __('search.no_results') + '</div>'

source/css/_layout/widgets/search.styl

@@ -1,5 +1,4 @@
 .widgets .widget-wrapper.search
-  margin-top: 1rem
   margin-bottom: 0
 
 .search-wrapper
@@ -12,36 +11,21 @@
     align-items: center
     transition: 0.38s ease-out
     z-index: 0
-    &:after
-      content: ''
-      position absolute
-      left: 0
-      right: 0
-      bottom: 0
-      height: 2px
-      border-radius: 4px
-      background: convert(hexo-config('style.gradient.search'))
-      background-size: 200%
-      animation: glow 10s linear infinite
-      @keyframes glow {
-        from {
-          background-position: 0%
-        }
-        to {
-          background-position: 200%
-        }
-      }
   .search-input
     width: 100%
     padding: 0.5rem 0
-    line-height: 1
+    line-height: 1.5
     box-sizing: border-box
     font-family: $ff-body
+    font-size: $fs-13
     color: var(--text-p0)
     
-  &.noresult
+  
+  &.noresult[searching='true']
     .search-icon
       color: $c-red
+    .search-form
+      border: 1px solid $c-red
 
   .search-no-result
     display: none
@@ -88,22 +72,27 @@
 
 
 
-.search-wrapper.noresult
+.search-wrapper.noresult[searching='true']
   .search-no-result
     display: block
 
 .widget-wrapper
   .search-form
     top: 0
-    background: var(--site-bg)
+    background: var(--card)
+    border: 1px solid var(--block-border)
+    border-radius: $border-bar
   .search-input
-    padding-left: 1.5rem
+    text-indent: 0.75rem
+    padding-right: 2rem
   .search-icon 
-    position: absolute
+    margin: 2px
-    margin-left: 0.25rem
+    position absolute
-    left: 0
+    right: 0
     pointer-events: none
     color: var(--text-p2)
+    padding: 0.5rem
+    border-radius: 'calc(%s - 2px)' % $border-bar
     
   #search-result,.search-no-result
     margin-top: 1rem

source/js/main.js

@@ -362,7 +362,7 @@ if (stellar.search.service) {
           }
           path = stellar.config.root + path;
           const filter = $inputArea.attr('data-filter') || '';
-          searchFunc(path, filter, 'search-input', 'search-result');
+          searchFunc(path, filter, 'search-wrapper', 'search-input', 'search-result');
         });
         $inputArea.keydown(function(e) {
           if (e.which == 13) {

source/js/search/local-search.js

@@ -22,7 +22,7 @@
 // Pieter Robberechts <http://github.com/probberechts>
 
 /*exported searchFunc*/
-var searchFunc = function(path, filter, searchId, contentId) {
+var searchFunc = function(path, filter, wrapperId, searchId, contentId) {
 
   function getAllCombinations(keywords) {
     var i, j, result = [];
@@ -43,6 +43,7 @@ var searchFunc = function(path, filter, searchId, contentId) {
       var $input = document.getElementById(searchId);
       if (!$input) { return; }
       var $resultContent = document.getElementById(contentId);
+      var $wrapper = document.getElementById(wrapperId);
 
       $input.addEventListener("input", function(){
         var resultList = [];
@@ -50,8 +51,10 @@ var searchFunc = function(path, filter, searchId, contentId) {
           .sort(function(a,b) { return b.split(" ").length - a.split(" ").length; });
         $resultContent.innerHTML = "";
         if (this.value.trim().length <= 0) {
+          $wrapper.setAttribute('searching', 'false');
           return;
         }
+        $wrapper.setAttribute('searching', 'true');
         // perform local searching
         datas.forEach(function(data) {
           if (!data.content?.trim().length) { return }