A super huge improvement in search.

- Added a cleanup button within input form.
- Optimized TopBar responsive effect(for search layout).
- Redesign the search results layout.

_includes/panel.html

@@ -4,7 +4,7 @@
   MIT License
 -->
 
-<div id="panel-wrap" class="col-xl-3 pl-2 topbar-down">
+<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
 
   <div class="access">
   {% assign lastmod_list = "" | split: "" %}
@@ -43,37 +43,18 @@
   {% endif %}
 
     <div id="access-tags">
-
       <h3 data-toc-skip>
         {{- site.data.label.panel.trending_tags -}}
       </h3>
-
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-      {% capture tags_array %}
-        {% for tag in site.tags %}
-          {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
-        {% endfor %}
-      {% endcapture %}
+       {% include trending-tags.html %}
+      </div>
+    </div>
 
-      {% assign MAX = 10 %}
-      {% assign count = 0 %}
-      {% assign trends = tags_array | split: " " | sort | reverse %}
-
-      {% for trend in trends %}
-        {% assign count = count | plus: 1 %}
-        {% assign tag = trend | split: ":" | last %}
-        <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase | url_encode }}/">{{ tag | replace: '-', ' ' }}</a>
-        {% if count >= MAX %}
-          {% break %}
-        {% endif %}
-      {% endfor %}
-
-      </div> <!-- div.d-flex.flex-wrap -->
-    </div> <!-- #access-tags -->
   </div> <!-- .access -->
 
   {% if page.layout == 'post' and site.toc and page.toc %}
-  <div id="toc-wrap" class="pl-0 pr-4 mb-5">
+  <div id="toc-wrapper" class="pl-0 pr-4 mb-5">
     <h3 data-toc-skip class="pl-3 pt-2">
       {{- site.data.label.panel.toc -}}
     </h3>
@@ -81,4 +62,4 @@
   </div>
   {% endif %}
 
-</div> <!-- #panel-wrap -->
+</div> <!-- #panel-wrapper -->

_includes/related-posts.html

@@ -52,7 +52,7 @@
           <div class="card-body">
             <span class="timeago small">
                 {{ post.date | date: POST_DATE }}
-                <i class="hidden">{{ post.date | date_to_xmlschema }}</i>
+                <i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
             </span>
             <h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
             <div class="text-muted small">

_includes/search-loader.html

@@ -0,0 +1,27 @@
+<!--
+  Jekyll Simple Search loader
+  © 2017-2019 Cotes Chung
+  MIT License
+-->
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js" integrity="sha256-qcLR00zq6pJk4je3MLgAri8Nn+ZumUlXgTKR2H/xCY0=" crossorigin="anonymous"></script>
+
+{% capture result_elem %}
+<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
+  <a href="{{ site.url }}{url}">{title}</a>
+  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+    <div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
+    <div><i class="fa fa-tag fa-fw"></i>{tags}</div>
+  </div>
+  <p>{snippet}</p>
+</div>
+{% endcapture %}
+
+<script>
+SimpleJekyllSearch({
+  searchInput: document.getElementById('search-input'),
+  resultsContainer: document.getElementById('search-results'),
+  json: '{{ site.baseurl }}/search.json',
+  searchResultTemplate: '{{ result_elem }}',
+  noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
+});
+</script>

_includes/search-results.html

@@ -3,13 +3,12 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="search-result-wrap">
-  <div class="row justify-content-center bg-white">
-    <div class="col-12 col-md-12 col-lg-11 col-xl-9 pl-xl-5 pr-xl-5 pb-5 mt-3 mb-3">
-      <h2 class="mt-3 pt-3 ml-3 ml-md-5 ml-lg-0" data-toc-skip>Search Results</h2>
-      <div class="post-content ml-1 ml-md-5 ml-lg-0">
-        <ul id="search-results" ></ul>
-      </div>
+<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
+  <div class="col-12 col-xl-11 post-content">
+    <div id="search-hints">
+      <h4 class="text-muted">Trending Tags</h4>
+      {% include trending-tags.html %}
     </div>
+    <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>
 </div>

_includes/search.html

@@ -1,13 +0,0 @@
-<!--
-  The Search
-  © 2017-2019 Cotes Chung
-  MIT License
--->
-<script src="{{ site.baseurl }}/assets/lib/simple-jekyll-search-1.7.1.min.js"></script>
-<script>
-SimpleJekyllSearch({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('search-results'),
-  json: '{{ site.baseurl }}/search.json'
-})
-</script>

_includes/sidebar.html

@@ -4,8 +4,8 @@
   MIT License
 -->
 
-<div id="nav-wrap">
-  <div id="profile-wrap" class="d-flex flex-column">
+<div id="nav-wrapper">
+  <div id="profile-wrapper" class="d-flex flex-column">
     <div id="avatar" class="d-flex justify-content-center">
       <a href="{{ site.baseurl }}/" alt="avatar">
         {% assign avatar = site.avatar %}
@@ -41,7 +41,7 @@
       {% if item.url == page_urls.last or
         item.name == "Home" and page.layout == "home" %}active{% endif %}">
       <a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
-        <i class="fa-fw {{ item.icon }} ml-3 mr-4 hidden"></i>
+        <i class="fa-fw {{ item.icon }} ml-3 mr-4 unloaded"></i>
         <span>{{ item.name | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
@@ -49,7 +49,7 @@
 
   </ul> <!-- ul.nav.flex-column -->
 
-</div><!-- #nav-wrap -->
+</div><!-- #nav-wrapper -->
 
 <div class="contact d-flex justify-content-around mt-4">
   <a href="https://github.com/{{ site.github.username }}" target="_blank">

_includes/topbar.html

@@ -3,10 +3,8 @@
   © 2017-2019 Cotes Chung
   MIT License
 -->
-<div id="topbar" class="bg-white row justify-content-center topbar-down">
-
-  <div id="topbar-main" class="d-flex h-100 align-items-center justify-content-between col-12 col-md-12 col-lg-11 col-xl-11 pl-md-2 pr-md-2 pl-lg-2 pr-lg-2">
-
+<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
+  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
       {% for item in page.breadcrumb %}
         {% if item.url %}
@@ -39,9 +37,10 @@
     </div>
 
     <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrap">
+    <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
+      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <a href="javascript:;">Cancel</a>
   </div>

_includes/trending-tags.html

@@ -0,0 +1,26 @@
+<!--
+  The trending tags list
+
+  © 2019 Cotes Chung
+  MIT Licensed
+-->
+
+{% assign MAX = 10 %}
+
+{% capture tags_array %}
+  {% for tag in site.tags %}
+    {{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
+  {% endfor %}
+{% endcapture %}
+
+{% assign trends = tags_array | split: " " | sort | reverse %}
+{% assign count = 0 %}
+
+{% for trend in trends %}
+  {% assign count = count | plus: 1 %}
+  {% assign tag = trend | split: ":" | last  %}
+  <a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
+  {% if count >= MAX %}
+    {% break %}
+  {% endif %}
+{% endfor %}