Skip to content

Commit b614341

Browse files
cotes2020cotes2020
committed
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.
1 parent 03cf89d commit b614341

21 files changed

+451
-246
lines changed

‎_includes/panel.html‎

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
MIT License
55
-->
66

7-
<div id="panel-wrap" class="col-xl-3 pl-2 topbar-down">
7+
<div id="panel-wrapper" class="col-xl-3 pl-2 topbar-down">
88

99
<div class="access">
1010
{% assign lastmod_list = "" | split: "" %}
@@ -43,42 +43,23 @@ <h3 data-toc-skip>
4343
{% endif %}
4444

4545
<div id="access-tags">
46-
4746
<h3 data-toc-skip>
4847
{{- site.data.label.panel.trending_tags -}}
4948
</h3>
50-
5149
<div class="d-flex flex-wrap mt-3 mb-1 mr-3">
52-
{% capture tags_array %}
53-
{% for tag in site.tags %}
54-
{{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
55-
{% endfor %}
56-
{% endcapture %}
57-
58-
{% assign MAX = 10 %}
59-
{% assign count = 0 %}
60-
{% assign trends = tags_array | split: " " | sort | reverse %}
61-
62-
{% for trend in trends %}
63-
{% assign count = count | plus: 1 %}
64-
{% assign tag = trend | split: ":" | last %}
65-
<a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase | url_encode }}/">{{ tag | replace: '-', ' ' }}</a>
66-
{% if count >= MAX %}
67-
{% break %}
68-
{% endif %}
69-
{% endfor %}
50+
{% include trending-tags.html %}
51+
</div>
52+
</div>
7053

71-
</div> <!-- div.d-flex.flex-wrap -->
72-
</div> <!-- #access-tags -->
7354
</div> <!-- .access -->
7455

7556
{% if page.layout == 'post' and site.toc and page.toc %}
76-
<div id="toc-wrap" class="pl-0 pr-4 mb-5">
57+
<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
7758
<h3 data-toc-skip class="pl-3 pt-2">
7859
{{- site.data.label.panel.toc -}}
7960
</h3>
8061
<nav id="toc" data-toggle="toc"></nav>
8162
</div>
8263
{% endif %}
8364

84-
</div> <!-- #panel-wrap -->
65+
</div> <!-- #panel-wrapper -->

‎_includes/related-posts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ <h3 class="pt-2 mt-1 mb-4" data-toc-skip>Related Posts</h3>
5252
<div class="card-body">
5353
<span class="timeago small">
5454
{{ post.date | date: POST_DATE }}
55-
<i class="hidden">{{ post.date | date_to_xmlschema }}</i>
55+
<i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
5656
</span>
5757
<h3 class="pt-0 mt-2 mb-3" data-toc-skip>{{ post.title }}</h3>
5858
<div class="text-muted small">

‎_includes/search-loader.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!--
2+
Jekyll Simple Search loader
3+
© 2017-2019 Cotes Chung
4+
MIT License
5+
-->
6+
<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>
7+
8+
{% capture result_elem %}
9+
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
10+
<a href="{{ site.url }}{url}">{title}</a>
11+
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
12+
<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>{categories}</div>
13+
<div><i class="fa fa-tag fa-fw"></i>{tags}</div>
14+
</div>
15+
<p>{snippet}</p>
16+
</div>
17+
{% endcapture %}
18+
19+
<script>
20+
SimpleJekyllSearch({
21+
searchInput: document.getElementById('search-input'),
22+
resultsContainer: document.getElementById('search-results'),
23+
json: '{{ site.baseurl }}/search.json',
24+
searchResultTemplate: '{{ result_elem }}',
25+
noResultsText: '<p class="mt-5">Oops! No result founds.</p>'
26+
});
27+
</script>

‎_includes/search-results.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@
33
© 2017-2019 Cotes Chung
44
MIT License
55
-->
6-
<div id="search-result-wrap">
7-
<div class="row justify-content-center bg-white">
8-
<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">
9-
<h2 class="mt-3 pt-3 ml-3 ml-md-5 ml-lg-0" data-toc-skip>Search Results</h2>
10-
<div class="post-content ml-1 ml-md-5 ml-lg-0">
11-
<ul id="search-results" ></ul>
12-
</div>
6+
<div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
7+
<div class="col-12 col-xl-11 post-content">
8+
<div id="search-hints">
9+
<h4 class="text-muted">Trending Tags</h4>
10+
{% include trending-tags.html %}
1311
</div>
12+
<div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
1413
</div>
1514
</div>

‎_includes/search.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎_includes/sidebar.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
MIT License
55
-->
66

7-
<div id="nav-wrap">
8-
<div id="profile-wrap" class="d-flex flex-column">
7+
<div id="nav-wrapper">
8+
<div id="profile-wrapper" class="d-flex flex-column">
99
<div id="avatar" class="d-flex justify-content-center">
1010
<a href="{{ site.baseurl }}/" alt="avatar">
1111
{% assign avatar = site.avatar %}
@@ -41,15 +41,15 @@
4141
{% if item.url == page_urls.last or
4242
item.name == "Home" and page.layout == "home" %}active{% endif %}">
4343
<a href="{{ ref }}" class="nav-link d-flex justify-content-center align-items-center w-100">
44-
<i class="fa-fw {{ item.icon }} ml-3 mr-4 hidden"></i>
44+
<i class="fa-fw {{ item.icon }} ml-3 mr-4 unloaded"></i>
4545
<span>{{ item.name | upcase }}</span>
4646
</a>
4747
</li> <!-- .nav-item -->
4848
{% endfor %}
4949

5050
</ul> <!-- ul.nav.flex-column -->
5151

52-
</div><!-- #nav-wrap -->
52+
</div><!-- #nav-wrapper -->
5353

5454
<div class="contact d-flex justify-content-around mt-4">
5555
<a href="https://github.com/{{ site.github.username }}" target="_blank">

‎_includes/topbar.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
© 2017-2019 Cotes Chung
44
MIT License
55
-->
6-
<div id="topbar" class="bg-white row justify-content-center topbar-down">
7-
8-
<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">
9-
6+
<div id="topbar-wrapper" class="row justify-content-center bg-white topbar-down">
7+
<div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
108
<span id="breadcrumb">
119
{% for item in page.breadcrumb %}
1210
{% if item.url %}
@@ -39,9 +37,10 @@
3937
</div>
4038

4139
<i id="search-trigger" class="fas fa-search fa-fw"></i>
42-
<span id="search-wrap">
40+
<span id="search-wrapper" class="align-items-center">
4341
<i class="fas fa-search fa-fw"></i>
4442
<input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
43+
<i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
4544
</span>
4645
<a href="javascript:;">Cancel</a>
4746
</div>

‎_includes/trending-tags.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!--
2+
The trending tags list
3+
4+
© 2019 Cotes Chung
5+
MIT Licensed
6+
-->
7+
8+
{% assign MAX = 10 %}
9+
10+
{% capture tags_array %}
11+
{% for tag in site.tags %}
12+
{{ tag[1] | size }}:{{ tag[0] | replace: ' ', '-' }}
13+
{% endfor %}
14+
{% endcapture %}
15+
16+
{% assign trends = tags_array | split: " " | sort | reverse %}
17+
{% assign count = 0 %}
18+
19+
{% for trend in trends %}
20+
{% assign count = count | plus: 1 %}
21+
{% assign tag = trend | split: ":" | last %}
22+
<a class="post-tag" href="{{ site.baseurl }}/tags/{{ tag | downcase }}/">{{ tag | replace: '-', ' ' }}</a>
23+
{% if count >= MAX %}
24+
{% break %}
25+
{% endif %}
26+
{% endfor %}

‎_layouts/default.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<div id="sidebar" class="d-flex flex-column">
1515
{% include sidebar.html %}
1616
</div>
17-
<div id="main-wrap" class="bg-white">
17+
<div id="main-wrapper" class="bg-white">
1818
{% include topbar.html %}
1919
<div id="main">
2020

@@ -40,7 +40,7 @@
4040
{% include google-analytics.html %}
4141
{% endif %}
4242

43-
{% include search.html %}
43+
{% include search-loader.html %}
4444

4545
</body>
4646

‎_layouts/home.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ <h1>
2424
<i class="far fa-clock fa-fw"></i>
2525
<span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
2626
{{ post.date | date: POST_DATE }}
27-
<i class="hidden">{{ post.date | date_to_xmlschema }}</i>
27+
<i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
2828
</span>
2929
<!-- page views -->
3030
{% if site.google_analytics.pv %}

0 commit comments

Comments
 (0)