Fix search results slow scrolling (#273)

also:
- improve its responsive design
- fix the js path in gulp

_includes/search-results.html

@@ -2,7 +2,7 @@
   The Search results
 -->
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-xl-11 post-content">
+  <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
       <h4 class="text-muted mb-4">{{ site.data.label.panel.trending_tags | default: 'Trending Tags' }}</h4>
 

_sass/addon/commons.scss

@@ -811,9 +811,6 @@ $sidebar-display: "sidebar-display";
 
 #search-result-wrapper {
   display: none;
-  position: fixed;
-  top: 0;
-  padding-top: 3rem;
   height: 100%;
   overflow: auto;
   .post-content {
@@ -1257,6 +1254,10 @@ $sidebar-display: "sidebar-display";
     min-width: 150px;
   }
 
+  #search-result-wrapper {
+    margin-top: 3rem;
+  }
+
   div.post-content .table-wrapper > table {
     min-width: 70%;
   }
@@ -1311,10 +1312,6 @@ $sidebar-display: "sidebar-display";
     left: 210px;
   }
 
-  #search-result-wrapper {
-    width: calc(100% - 210px);
-  }
-
   #search-results > div {
     max-width: 700px;
   }
@@ -1392,10 +1389,6 @@ $sidebar-display: "sidebar-display";
     transition: all 0.3s ease-in-out;
   }
 
-  #search-result-wrapper {
-    width: calc(100% - 260px);
-  }
-
   #search-results > div {
     max-width: 46%;
     &:nth-child(odd) {
@@ -1608,7 +1601,6 @@ $sidebar-display: "sidebar-display";
   }
 
   #search-result-wrapper {
-    width: calc(100% - #{$sidebar-width-large});
     > div {
       max-width: #{$main-content-max-width};
     }
@@ -1651,7 +1643,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #search-result-wrapper {
-    padding-right: calc(100% - #{$sidebar-width-large} - 1530px);
+    padding-right: calc(100% - #{$sidebar-width-large} - 1180px);
   }
 
   #panel-wrapper {

assets/js/_commons/search-display.js

@@ -17,14 +17,12 @@ $(function() {
   const input = $("#search-input");
   const hints = $("#search-hints");
 
-
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
-
   const scrollBlocker = (function () {
     let offset = 0;
     return {
       block() {
-        offset = $(window).scrollTop();
+        offset = window.scrollY;
+        $("html,body").scrollTop(0);
       },
       release() {
         $("html,body").scrollTop(offset);
@@ -35,6 +33,9 @@ $(function() {
     };
   }());
 
+
+  /*--- Actions in small screens (Sidebar unloaded) ---*/
+
   const mobileSearchBar = (function () {
     return {
       on() {
@@ -60,11 +61,11 @@ $(function() {
     return {
       on() {
         if (!visible) {
+          // the block method must be called before $(#main) unloaded.
+          scrollBlocker.block();
           resultWrapper.removeClass("unloaded");
-          main.addClass("hidden");
-
+          main.addClass("unloaded");
           visible = true;
-          scrollBlocker.block();
         }
       },
       off() {
@@ -75,12 +76,13 @@ $(function() {
           }
           resultWrapper.addClass("unloaded");
           btnClear.removeClass("visible");
-          main.removeClass("hidden");
+          main.removeClass("unloaded");
+
+          // now the release method must be called after $(#main) display
+          scrollBlocker.release();
 
           input.val("");
           visible = false;
-
-          scrollBlocker.release();
         }
       },
       isVisible() {