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.
This commit is contained in:
Cotes Chung
parent
83526cd67e
commit
3248343c22
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -14,7 +14,7 @@ layout: compress
|
|||
<div id="sidebar" class="d-flex flex-column">
|
||||
{% include sidebar.html %}
|
||||
</div>
|
||||
<div id="main-wrap" class="bg-white">
|
||||
<div id="main-wrapper" class="bg-white">
|
||||
{% include topbar.html %}
|
||||
<div id="main">
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ layout: compress
|
|||
{% include google-analytics.html %}
|
||||
{% endif %}
|
||||
|
||||
{% include search.html %}
|
||||
{% include search-loader.html %}
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ layout: page
|
|||
<i class="far fa-clock fa-fw"></i>
|
||||
<span class="timeago" data-toggle="tooltip" title="{{ post.date | date: TOOLTIP_DATE }}">
|
||||
{{ post.date | date: POST_DATE }}
|
||||
<i class="hidden">{{ post.date | date_to_xmlschema }}</i>
|
||||
<i class="unloaded">{{ post.date | date_to_xmlschema }}</i>
|
||||
</span>
|
||||
<!-- page views -->
|
||||
{% if site.google_analytics.pv %}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ layout: default
|
|||
<div class="row">
|
||||
{% include date-format.html %}
|
||||
|
||||
<div id="post-wrap" class="col-12 col-lg-11 col-xl-8">
|
||||
<div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
|
||||
<div class="post pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
|
||||
<h1 data-toc-skip>{{ page.title }}</h1>
|
||||
<div class="post-meta text-muted d-flex flex-column">
|
||||
|
|
@ -16,7 +16,7 @@ layout: default
|
|||
<div>
|
||||
<span class="timeago" data-toggle="tooltip" title="{{ page.date | date: TOOLTIP_DATE }}">
|
||||
{{ page.date | date: POST_DATE }}
|
||||
<i class="hidden">{{ page.date | date_to_xmlschema }}</i>
|
||||
<i class="unloaded">{{ page.date | date_to_xmlschema }}</i>
|
||||
</span>
|
||||
{% if page.categories.size > 0 %}on{% endif %}
|
||||
{% for category in page.categories %}
|
||||
|
|
@ -31,7 +31,7 @@ layout: default
|
|||
Updated
|
||||
<span class="timeago lastmod" data-toggle="tooltip" title="{{ page.seo.date_modified | date: TOOLTIP_DATE }}">
|
||||
{{ page.seo.date_modified | date: POST_DATE }}
|
||||
<i class="hidden">{{ page.seo.date_modified | date_to_xmlschema}}</i>
|
||||
<i class="unloaded">{{ page.seo.date_modified | date_to_xmlschema}}</i>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -72,14 +72,14 @@ layout: default
|
|||
</div><!-- div.post-tail -->
|
||||
|
||||
</div> <!-- .post -->
|
||||
</div> <!-- #post-wrap -->
|
||||
</div> <!-- #post-wrapper -->
|
||||
|
||||
{% include panel.html %}
|
||||
|
||||
</div> <!-- .row -->
|
||||
|
||||
<div class="row">
|
||||
<div id="post-extend-wrap" class="col-12 col-lg-11 col-xl-8">
|
||||
<div id="post-extend-wrapper" class="col-12 col-lg-11 col-xl-8">
|
||||
|
||||
<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-md-4 pr-md-4">
|
||||
{% include related-posts.html %}
|
||||
|
|
@ -110,7 +110,7 @@ layout: default
|
|||
|
||||
</div> <!-- .pl-1 pr-1 -->
|
||||
|
||||
</div> <!-- wrap -->
|
||||
</div> <!-- #post-extend-wrapper -->
|
||||
|
||||
</div> <!-- .row -->
|
||||
|
||||
|
|
|
|||
|
|
@ -133,12 +133,12 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#nav-wrap {
|
||||
#nav-wrapper {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#profile-wrap {
|
||||
#profile-wrapper {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -205,20 +205,16 @@ body {
|
|||
box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2), 6px 0 20px 0 rgba(0, 0, 0, 0.19) !important;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
#search-result-wrapper {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 3rem;
|
||||
top: 0;
|
||||
padding-top: 3rem;
|
||||
height: 100%;
|
||||
width: calc(100% - 260px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#search-result-wrap>div.row>div {
|
||||
min-height: calc(100vh - 3rem - 2rem);
|
||||
}
|
||||
|
||||
#search-result-wrap .post-content {
|
||||
#search-result-wrapper .post-content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -237,7 +233,7 @@ body {
|
|||
|
||||
/*--- top-bar ---*/
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
height: 3rem;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -249,7 +245,7 @@ body {
|
|||
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
#topbar i.fas { // icons
|
||||
#topbar i { // icons
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -266,32 +262,45 @@ body {
|
|||
|
||||
#sidebar-trigger,
|
||||
#search-trigger {
|
||||
margin: 0 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-wrap i.fas {
|
||||
position: relative;
|
||||
top: 1rem;
|
||||
left: .5rem;
|
||||
#search-wrapper {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
border-radius: 1rem;
|
||||
border: 1px solid #fff;
|
||||
background: #f5f5f5;
|
||||
padding: 0 .5rem;
|
||||
transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
|
||||
}
|
||||
|
||||
#search-wrapper i {
|
||||
z-index: 2;
|
||||
font-size: .9rem;
|
||||
color: #c2c6cc;
|
||||
}
|
||||
|
||||
#search-wrapper .fa-times-circle { /* button 'clean up' */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#search-wrapper+a { /* 'Cancel' link */
|
||||
color: #2a408e;
|
||||
margin-left: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
position: relative;
|
||||
top: -.86rem;
|
||||
background: #f5f5f5;
|
||||
border-color: #fff;
|
||||
border-radius: 0.9rem;
|
||||
padding: .18rem .75rem .18rem 2rem;
|
||||
background: center;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: .18rem .3rem;
|
||||
}
|
||||
|
||||
#search-input:focus {
|
||||
box-shadow: none;
|
||||
background: center;
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
#search-input:focus.form-control::-webkit-input-placeholder { opacity: 0.6; }
|
||||
|
|
@ -299,6 +308,57 @@ body {
|
|||
#search-input:focus.form-control:-ms-input-placeholder { opacity: 0.6; }
|
||||
#search-input:focus.form-control::placeholder { opacity: 0.6; }
|
||||
|
||||
#search-hints {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#search-hints .post-tag {
|
||||
display: inline-block;
|
||||
line-height: 1rem;
|
||||
font-size: 1rem;
|
||||
background: #f8f9fa;
|
||||
border: none;
|
||||
padding: .5rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
}
|
||||
|
||||
#search-hints .post-tag::before {
|
||||
content: "#";
|
||||
padding-right: .2rem;
|
||||
}
|
||||
|
||||
#search-results {
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
#search-results a {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#search-results>div i { /* icons */
|
||||
color: #818182;
|
||||
margin-right: .15rem;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
#search-results>div i:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#search-results>div>p{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
#topbar-title {
|
||||
display: none;
|
||||
font-size: 1.1rem;
|
||||
|
|
@ -313,11 +373,6 @@ body {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#search-wrap+a {
|
||||
color: #2a408e;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
|
@ -336,9 +391,9 @@ body {
|
|||
display: block!important;
|
||||
}
|
||||
|
||||
/*--- main wrap ---*/
|
||||
/*--- main wrapper ---*/
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
padding-bottom: 6rem; /* equals to or greatter than footer's height */
|
||||
|
|
@ -359,14 +414,14 @@ body {
|
|||
min-height: calc(100vh - 3rem - 6rem);
|
||||
}
|
||||
|
||||
#post-wrap {
|
||||
#post-wrapper {
|
||||
/* 350px for post extended block */
|
||||
min-height: calc(100vh - 3rem - 6rem - 470px) !important;
|
||||
}
|
||||
|
||||
#topbar.row,
|
||||
#topbar-wrapper.row,
|
||||
#main>.row,
|
||||
#search-result-wrap>.row {
|
||||
#search-result-wrapper>.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -374,7 +429,7 @@ body {
|
|||
footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 6rem; /* see the height of #main-wrap */
|
||||
height: 6rem; /* see the height of #main-wrapper */
|
||||
padding: 1rem;
|
||||
font-size: 0.8rem;
|
||||
color: #7a7b7d;
|
||||
|
|
@ -602,11 +657,6 @@ a.reversefootnote {
|
|||
border-bottom: 1px dotted #c2c6cc;
|
||||
}
|
||||
|
||||
#search-results a {
|
||||
font-size: 1.1rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
p>a, span>a,
|
||||
.post-preview a,
|
||||
.categories a,
|
||||
|
|
@ -638,7 +688,7 @@ p>a, span>a,
|
|||
.post-content a:hover,
|
||||
.post a:hover code,
|
||||
footer a:hover,
|
||||
#post-wrap .post-content a:hover,
|
||||
#post-wrapper .post-content a:hover,
|
||||
#page .post-content a:hover,
|
||||
#access-lastmod a:hover {
|
||||
color: #d2603a;
|
||||
|
|
@ -732,12 +782,24 @@ table tbody td {
|
|||
|
||||
/* --- Effects classes --- */
|
||||
|
||||
.hidden {
|
||||
.loaded {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.d-flex.loaded {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.unloaded {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.shown {
|
||||
display: block!important;
|
||||
.visable {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
.no-scroll {
|
||||
|
|
@ -777,12 +839,17 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
border-bottom: none!important;
|
||||
}
|
||||
|
||||
.input-focus {
|
||||
box-shadow: none;
|
||||
border-color: #e9ecef !important;
|
||||
background: center !important;
|
||||
}
|
||||
|
||||
/*--- Responsive Design ---*/
|
||||
|
||||
@media all and (max-width: 576px) {
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
padding-bottom: 10rem; /* footer height */
|
||||
}
|
||||
|
||||
|
|
@ -790,7 +857,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
min-height: calc(100vh - 3rem - 10rem); /* topbar is 3rem and footer is 10rem */
|
||||
}
|
||||
|
||||
#post-wrap {
|
||||
#post-wrapper {
|
||||
min-height: calc(100vh - 3rem - 10rem - 470px) !important;
|
||||
}
|
||||
|
||||
|
|
@ -804,7 +871,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
margin-right: 1.8rem;
|
||||
}
|
||||
|
||||
#post-wrap h1 {
|
||||
#post-wrapper h1 {
|
||||
margin-top: 2.2rem;
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
|
|
@ -820,7 +887,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* footer and #main-wrap expand vertical */
|
||||
/* footer and #main-wrapper expand vertical */
|
||||
footer {
|
||||
height: 10rem;
|
||||
}
|
||||
|
|
@ -841,7 +908,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
}
|
||||
|
||||
|
||||
/* Sidebar is visibal */
|
||||
@media all and (min-width: 831px) {
|
||||
#search-wrapper {
|
||||
width: 22%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
/* button 'back-to-Top' position */
|
||||
#back-to-top {
|
||||
bottom: 9.2rem;
|
||||
|
|
@ -864,7 +937,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
|
||||
/* iPad 9.7" horizontal */
|
||||
@media all and (min-width: 992px) and (max-width: 1024px) {
|
||||
#main-wrap .col-lg-11 {
|
||||
#main-wrapper .col-lg-11 {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 96%;
|
||||
flex: 0 0 96%;
|
||||
|
|
@ -880,7 +953,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
transform: translateX(0) !important;
|
||||
}
|
||||
|
||||
.sidebar-expand~#main-wrap {
|
||||
.sidebar-expand~#main-wrapper {
|
||||
transform: translateX(260px) !important;
|
||||
}
|
||||
|
||||
|
|
@ -895,12 +968,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
transition: none;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
width: 100%
|
||||
#search-result-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#page h1.dynamic-title {
|
||||
|
|
@ -912,11 +985,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
}
|
||||
|
||||
#breadcrumb,
|
||||
#search-wrap {
|
||||
#search-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
left: 0;
|
||||
|
|
@ -937,12 +1010,12 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
display: block;
|
||||
}
|
||||
|
||||
#search-wrap.shown {
|
||||
padding-left: 1rem;
|
||||
#search-wrapper.loaded~a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#search-wrap.shown~a {
|
||||
padding-right: 1rem;
|
||||
#search-wrapper .fa-times-circle {
|
||||
right: 5.2rem;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
|
|
@ -950,10 +1023,15 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
width: 95%;
|
||||
}
|
||||
|
||||
#search-result-wrap .post-content {
|
||||
#search-result-wrapper .post-content {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
#search-hints {
|
||||
display: block;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
#tags {
|
||||
-webkit-box-pack: center!important;
|
||||
-ms-flex-pack: center!important;
|
||||
|
|
@ -981,11 +1059,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
width: 210px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
left: 210px;
|
||||
}
|
||||
|
||||
#search-result-wrap {
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 210px);
|
||||
}
|
||||
|
||||
|
|
@ -1004,7 +1082,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 210px;
|
||||
}
|
||||
|
||||
|
|
@ -1020,11 +1098,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
|
||||
/* Pannel hidden */
|
||||
@media all and (max-width: 1199px) {
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
#topbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -1033,6 +1111,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
-ms-flex-pack: center!important;
|
||||
justify-content: center!important;
|
||||
}
|
||||
|
||||
#search-results>div {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1048,12 +1130,13 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
padding-left: 3%;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
max-width: 300px;
|
||||
#topbar {
|
||||
padding: 0;
|
||||
max-width: 1070px;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px) / 2)!important;
|
||||
#panel-wrapper {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
|
|
@ -1061,17 +1144,32 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
right: 4.3rem;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
width: 22%;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 260px);
|
||||
}
|
||||
|
||||
#search-results>div {
|
||||
max-width: 46%;
|
||||
}
|
||||
|
||||
#search-results>div:nth-child(odd) {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:nth-child(even) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
#search-results>div:last-child:nth-child(odd) {
|
||||
position: relative;
|
||||
right: 24.3%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) {
|
||||
|
|
@ -1084,6 +1182,24 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
max-width: 850px;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
#search-wrapper .fa-times-circle {
|
||||
right: 2.6rem;
|
||||
}
|
||||
|
||||
#search-result-wrapper>div {
|
||||
max-width: 1110px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1400px) and (max-width: 1650px) {
|
||||
#topbar {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
|
|
@ -1101,23 +1217,23 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
padding-right: 1.9rem !important;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
#main-wrapper {
|
||||
margin-left: 350px;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
margin-left: calc((100% - 1150px) / 10);
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
left: 350px;
|
||||
}
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px - 8%) / 2) !important;
|
||||
#topbar {
|
||||
max-width: 1150px;
|
||||
}
|
||||
|
||||
#search-wrap {
|
||||
#search-wrapper {
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
|
|
@ -1125,7 +1241,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
width: 350px;
|
||||
}
|
||||
|
||||
#profile-wrap {
|
||||
#profile-wrapper {
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 5rem;
|
||||
-ms-flex-direction: column!important;
|
||||
|
|
@ -1218,15 +1334,19 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
max-width: 1130px;
|
||||
}
|
||||
|
||||
#search-result-wrapper {
|
||||
width: calc(100% - 350px); // 350px is the with of sidebar
|
||||
}
|
||||
|
||||
#search-result-wrapper>div {
|
||||
max-width: 1150px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
|
||||
#topbar-main {
|
||||
padding: 0 calc((100% - 1150px - 10%) / 2) !important;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
#topbar-wrapper {
|
||||
padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */
|
||||
}
|
||||
|
||||
|
|
@ -1234,7 +1354,7 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
padding-left: calc((100% - 1150px - 2%) / 2);
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#panel-wrapper {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
|
|
@ -1258,7 +1378,11 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
|
|||
padding-left: 190px;
|
||||
}
|
||||
|
||||
#panel-wrap {
|
||||
#search-result-wrapper {
|
||||
padding-right: calc(100% - 350px - 1530px);
|
||||
}
|
||||
|
||||
#panel-wrapper {
|
||||
margin-left: 41px;
|
||||
}
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#toc-wrap {
|
||||
#toc-wrapper {
|
||||
border-left: 1px solid rgba(158, 158, 158, 0.17);
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
|
@ -65,11 +65,11 @@
|
|||
animation: fade-up .8s;
|
||||
}
|
||||
|
||||
#toc-wrap.topbar-down {
|
||||
#toc-wrapper.topbar-down {
|
||||
top: 6rem;
|
||||
}
|
||||
|
||||
#toc-wrap>h3 {
|
||||
#toc-wrapper>h3 {
|
||||
font-size: 1rem;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: gray;
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
right: 1rem;
|
||||
}
|
||||
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
min-height: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -190,28 +190,28 @@
|
|||
}
|
||||
|
||||
/*
|
||||
The following resposive design aim to make #post-extend-wrap margin-right same as pannel's width
|
||||
The following resposive design aim to make #post-extend-wrapper margin-right same as pannel's width
|
||||
*/
|
||||
@media all and (min-width: 1200px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1460px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1650px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: calc((100% - 1150px) / 10 + 300px);
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1700px) {
|
||||
#post-extend-wrap {
|
||||
#post-extend-wrapper {
|
||||
margin-right: calc((100% - 1150px) / 8 + 300px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,88 +1,154 @@
|
|||
/*
|
||||
* This script make #search-result-wrap switch to hidden or shown automatically.
|
||||
* This script make #search-result-wrapper switch to unloaded or shown automatically.
|
||||
* © 2018-2019 Cotes Chung
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
|
||||
var offset = 0;
|
||||
|
||||
var btnCancel = $('#search-wrap + a');
|
||||
var btnSbTrigger = $('#sidebar-trigger');
|
||||
var btnSearchTrigger = $('#search-trigger');
|
||||
var btnCloseSearch = $('#search-wrap + a');
|
||||
var topbarTitle = $('#topbar-title');
|
||||
var searchWrap = $('#search-wrap');
|
||||
var btnCancel = $('#search-wrapper + a');
|
||||
var btnClear = $('#search-cleaner');
|
||||
|
||||
/*--- Actions in small screens ---*/
|
||||
var main = $('#main');
|
||||
var topbarTitle = $('#topbar-title');
|
||||
var searchWrapper = $('#search-wrapper');
|
||||
var resultWrapper = $('#search-result-wrapper');
|
||||
var results = $('#search-results');
|
||||
var input = $('#search-input');
|
||||
var hints = $('#search-hints');
|
||||
|
||||
|
||||
/*--- Actions in small screens (Sidebar unloaded) ---*/
|
||||
|
||||
var scrollBlocker = (function() {
|
||||
var offset = 0;
|
||||
return {
|
||||
block: function() {
|
||||
offset = $(window).scrollTop();
|
||||
$('body').addClass('no-scroll');
|
||||
},
|
||||
release: function() {
|
||||
$('body').removeClass('no-scroll');
|
||||
$('html,body').scrollTop(offset);
|
||||
},
|
||||
getOffset: function() {
|
||||
return offset;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
var mobileSearchBar = (function() {
|
||||
return {
|
||||
on: function() {
|
||||
btnSbTrigger.addClass('unloaded');
|
||||
topbarTitle.addClass('unloaded');
|
||||
btnSearchTrigger.addClass('unloaded');
|
||||
searchWrapper.addClass('d-flex');
|
||||
btnCancel.addClass('loaded');
|
||||
},
|
||||
off: function() {
|
||||
btnCancel.removeClass('loaded');
|
||||
searchWrapper.removeClass('d-flex');
|
||||
btnSbTrigger.removeClass('unloaded');
|
||||
topbarTitle.removeClass('unloaded');
|
||||
btnSearchTrigger.removeClass('unloaded');
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
var resultSwitch = (function() {
|
||||
var visable = false;
|
||||
|
||||
return {
|
||||
on: function() {
|
||||
if (!visable) {
|
||||
resultWrapper.removeClass('unloaded');
|
||||
main.addClass('hidden');
|
||||
|
||||
visable = true;
|
||||
scrollBlocker.block();
|
||||
}
|
||||
},
|
||||
off: function() {
|
||||
if (visable) {
|
||||
results.empty();
|
||||
if (hints.hasClass('unloaded')) {
|
||||
hints.removeClass('unloaded');
|
||||
}
|
||||
resultWrapper.addClass('unloaded');
|
||||
btnClear.removeClass('visable');
|
||||
main.removeClass('hidden');
|
||||
|
||||
input.val('');
|
||||
visable = false;
|
||||
|
||||
scrollBlocker.release();
|
||||
}
|
||||
},
|
||||
isVisable: function() {
|
||||
return visable;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
function isMobileView() {
|
||||
return btnCancel.hasClass('loaded');
|
||||
}
|
||||
|
||||
btnSearchTrigger.click(function() {
|
||||
|
||||
offset = $(window).scrollTop();
|
||||
|
||||
$('body').addClass('no-scroll');
|
||||
// $('body').css('top', -offset + 'px');
|
||||
// $('html,body').addClass('input-focus');
|
||||
|
||||
btnSbTrigger.addClass('hidden');
|
||||
topbarTitle.addClass('hidden');
|
||||
btnSearchTrigger.addClass('hidden');
|
||||
|
||||
searchWrap.addClass('shown flex-grow-1');
|
||||
btnCancel.addClass('shown');
|
||||
|
||||
$('#main').addClass('hidden');
|
||||
$('#search-result-wrap').addClass('shown');
|
||||
$('#search-input').focus();
|
||||
|
||||
mobileSearchBar.on();
|
||||
resultSwitch.on();
|
||||
input.focus();
|
||||
});
|
||||
|
||||
btnCancel.click(function() {
|
||||
|
||||
btnCancel.removeClass('shown');
|
||||
|
||||
$('#search-input').val('');
|
||||
$('#search-results').empty();
|
||||
|
||||
searchWrap.removeClass('shown flex-grow-1');
|
||||
|
||||
btnSbTrigger.removeClass('hidden');
|
||||
topbarTitle.removeClass('hidden');
|
||||
btnSearchTrigger.removeClass('hidden');
|
||||
|
||||
$('#main').removeClass('hidden');
|
||||
$('#search-result-wrap').removeClass('shown');
|
||||
|
||||
$('body').removeClass('no-scroll');
|
||||
// $('html,body').removeClass('input-focus');
|
||||
|
||||
$('html,body').scrollTop(offset);
|
||||
|
||||
mobileSearchBar.off();
|
||||
resultSwitch.off();
|
||||
});
|
||||
|
||||
/*--- Actions in large screens. ---*/
|
||||
input.focus(function() {
|
||||
searchWrapper.addClass('input-focus');
|
||||
});
|
||||
|
||||
var isShown = false;
|
||||
input.focusout(function() {
|
||||
searchWrapper.removeClass('input-focus');
|
||||
});
|
||||
|
||||
$('#search-input').on('input', function(){
|
||||
if (isShown == false) {
|
||||
offset = $(window).scrollTop();
|
||||
$('body,html').scrollTop(0);
|
||||
$('#search-result-wrap').addClass('shown');
|
||||
$('#main').addClass('hidden');
|
||||
isShown = true;
|
||||
input.on('keyup', function(e) {
|
||||
if (e.keyCode == 8 && input.val() == '') {
|
||||
if (!isMobileView()) {
|
||||
resultSwitch.off();
|
||||
} else {
|
||||
hints.removeClass('unloaded');
|
||||
}
|
||||
} else {
|
||||
if (input.val() != '') {
|
||||
resultSwitch.on();
|
||||
|
||||
if (!btnClear.hasClass('visible')) {
|
||||
btnClear.addClass('visable');
|
||||
}
|
||||
|
||||
if (isMobileView()) {
|
||||
hints.addClass('unloaded');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#search-input').on('keyup', function(e){
|
||||
var input = $('#search-input').val();
|
||||
if (e.keyCode == 8 && input == '' && btnCloseSearch.css('display') == 'none') {
|
||||
$('#main').removeClass('hidden');
|
||||
$('#search-result-wrap').removeClass('shown');
|
||||
$('body,html').scrollTop(offset);
|
||||
isShown = false;
|
||||
btnClear.on('click', function() {
|
||||
input.val('');
|
||||
if (isMobileView()) {
|
||||
hints.removeClass('unloaded');
|
||||
results.empty();
|
||||
} else {
|
||||
resultSwitch.off();
|
||||
}
|
||||
input.focus();
|
||||
btnClear.removeClass('visable');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -8,7 +8,7 @@ $(function() {
|
|||
var didScroll;
|
||||
var lastScrollTop = 0;
|
||||
var delta = 5;
|
||||
var topbarHeight = $('#topbar').outerHeight();
|
||||
var topbarHeight = $('#topbar-wrapper').outerHeight();
|
||||
|
||||
$(window).scroll(function(event) {
|
||||
if ($("#topbar-title").is(":hidden")) { // Not in small screens
|
||||
|
|
@ -32,10 +32,10 @@ $(function() {
|
|||
|
||||
if (st > lastScrollTop && st > topbarHeight) {
|
||||
// Scroll Down
|
||||
$('#topbar').removeClass('topbar-down').addClass('topbar-up');
|
||||
$('#topbar-wrapper').removeClass('topbar-down').addClass('topbar-up');
|
||||
|
||||
if ( $('#toc-wrap').length > 0) {
|
||||
$('#toc-wrap').removeClass('topbar-down');
|
||||
if ( $('#toc-wrapper').length > 0) {
|
||||
$('#toc-wrapper').removeClass('topbar-down');
|
||||
}
|
||||
|
||||
if ( $('.access').length > 0) {
|
||||
|
|
@ -49,9 +49,9 @@ $(function() {
|
|||
} else {
|
||||
// Scroll Up
|
||||
if (st + $(window).height() < $(document).height()) {
|
||||
$('#topbar').removeClass('topbar-up').addClass('topbar-down');
|
||||
if ( $('#toc-wrap').length > 0) {
|
||||
$('#toc-wrap').addClass('topbar-down');
|
||||
$('#topbar-wrapper').removeClass('topbar-up').addClass('topbar-down');
|
||||
if ( $('#toc-wrapper').length > 0) {
|
||||
$('#toc-wrapper').addClass('topbar-down');
|
||||
}
|
||||
if ( $('.access').length > 0) {
|
||||
$('.access').addClass('topbar-down');
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
*/
|
||||
|
||||
$(function() {
|
||||
if ($("#post-wrap .post-content h1").length == 0
|
||||
&& $("#post-wrap .post-content h2").length == 0) {
|
||||
$("#toc-wrap").addClass("hidden");
|
||||
if ($("#post-wrapper .post-content h1").length == 0
|
||||
&& $("#post-wrapper .post-content h2").length == 0) {
|
||||
$("#toc-wrapper").addClass("unloaded");
|
||||
}
|
||||
});
|
||||
|
|
@ -1 +1 @@
|
|||
$(function(){var g=0;var e=$("#search-wrap + a");var c=$("#sidebar-trigger");var h=$("#search-trigger");var d=$("#search-wrap + a");var a=$("#topbar-title");var b=$("#search-wrap");h.click(function(){g=$(window).scrollTop();$("body").addClass("no-scroll");c.addClass("hidden");a.addClass("hidden");h.addClass("hidden");b.addClass("shown flex-grow-1");e.addClass("shown");$("#main").addClass("hidden");$("#search-result-wrap").addClass("shown");$("#search-input").focus()});e.click(function(){e.removeClass("shown");$("#search-input").val("");$("#search-results").empty();b.removeClass("shown flex-grow-1");c.removeClass("hidden");a.removeClass("hidden");h.removeClass("hidden");$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body").removeClass("no-scroll");$("html,body").scrollTop(g)});var f=false;$("#search-input").on("input",function(){if(f==false){g=$(window).scrollTop();$("body,html").scrollTop(0);$("#search-result-wrap").addClass("shown");$("#main").addClass("hidden");f=true}});$("#search-input").on("keyup",function(j){var i=$("#search-input").val();if(j.keyCode==8&&i==""&&d.css("display")=="none"){$("#main").removeClass("hidden");$("#search-result-wrap").removeClass("shown");$("body,html").scrollTop(g);f=false}})});
|
||||
$(function(){var j=$("#sidebar-trigger");var o=$("#search-trigger");var h=$("#search-wrapper + a");var b=$("#search-cleaner");var e=$("#main");var c=$("#topbar-title");var k=$("#search-wrapper");var i=$("#search-result-wrapper");var g=$("#search-results");var l=$("#search-input");var a=$("#search-hints");var d=(function(){var p=0;return{block:function(){p=$(window).scrollTop();$("body").addClass("no-scroll")},release:function(){$("body").removeClass("no-scroll");$("html,body").scrollTop(p)},getOffset:function(){return p}}})();var m=(function(){return{on:function(){j.addClass("unloaded");c.addClass("unloaded");o.addClass("unloaded");k.addClass("d-flex");h.addClass("loaded")},off:function(){h.removeClass("loaded");k.removeClass("d-flex");j.removeClass("unloaded");c.removeClass("unloaded");o.removeClass("unloaded")}}})();var n=(function(){var p=false;return{on:function(){if(!p){i.removeClass("unloaded");e.addClass("hidden");p=true;d.block()}},off:function(){if(p){g.empty();if(a.hasClass("unloaded")){a.removeClass("unloaded")}i.addClass("unloaded");b.removeClass("visable");e.removeClass("hidden");l.val("");p=false;d.release()}},isVisable:function(){return p}}})();function f(){return h.hasClass("loaded")}o.click(function(){m.on();n.on();l.focus()});h.click(function(){m.off();n.off()});l.focus(function(){k.addClass("input-focus")});l.focusout(function(){k.removeClass("input-focus")});l.on("keyup",function(p){if(p.keyCode==8&&l.val()==""){if(!f()){n.off()}else{a.removeClass("unloaded")}}else{if(l.val()!=""){n.on();if(!b.hasClass("visible")){b.addClass("visable")}if(f()){a.addClass("unloaded")}}}});b.on("click",function(){l.val("");if(f()){a.removeClass("unloaded");g.empty()}else{n.off()}l.focus();b.removeClass("visable")})});
|
||||
|
|
@ -1 +1 @@
|
|||
$(function(){var d;var c=0;var e=5;var b=$("#topbar").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrap").length>0){$("#toc-wrap").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrap").length>0){$("#toc-wrap").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});
|
||||
$(function(){var d;var c=0;var e=5;var b=$("#topbar-wrapper").outerHeight();$(window).scroll(function(f){if($("#topbar-title").is(":hidden")){d=true}});setInterval(function(){if(d){a();d=false}},250);function a(){var f=$(this).scrollTop();if(Math.abs(c-f)<=e){return}if(f>c&&f>b){$("#topbar-wrapper").removeClass("topbar-down").addClass("topbar-up");if($("#toc-wrapper").length>0){$("#toc-wrapper").removeClass("topbar-down")}if($(".access").length>0){$(".access").removeClass("topbar-down")}if($("#search-input").is(":focus")){$("#search-input").blur()}}else{if(f+$(window).height()<$(document).height()){$("#topbar-wrapper").removeClass("topbar-up").addClass("topbar-down");if($("#toc-wrapper").length>0){$("#toc-wrapper").addClass("topbar-down")}if($(".access").length>0){$(".access").addClass("topbar-down")}}}c=f}});
|
||||
|
|
@ -1 +1 @@
|
|||
$(function(){if($("#post-wrap .post-content h1").length==0&&$("#post-wrap .post-content h2").length==0){$("#toc-wrap").addClass("hidden")}});
|
||||
$(function(){if($("#post-wrapper .post-content h1").length==0&&$("#post-wrapper .post-content h2").length==0){$("#toc-wrapper").addClass("unloaded")}});
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
/*!
|
||||
* Simple-Jekyll-Search v1.7.1 (https://github.com/christian-fei/Simple-Jekyll-Search)
|
||||
* Copyright 2015-2018, Christian Fei
|
||||
* Licensed under the MIT License.
|
||||
*/
|
||||
!function(){"use strict";var f={load:function(t,e){var n=window.XMLHttpRequest?new window.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");n.open("GET",t,!0),n.onreadystatechange=(r=n,i=e,function(){if(4===r.readyState&&200===r.status)try{i(null,JSON.parse(r.responseText))}catch(t){i(t,null)}}),n.send();var r,i}};var n=function(t,e){var n=e.length,r=t.length;if(n<r)return!1;if(r===n)return t===e;t:for(var i=0,o=0;i<r;i++){for(var u=t.charCodeAt(i);o<n;)if(e.charCodeAt(o++)===u)continue t;return!1}return!0},e=new function(){this.matches=function(t,e){return n(e.toLowerCase(),t.toLowerCase())}};var r=new function(){this.matches=function(e,t){return!!e&&(e=e.trim().toLowerCase(),0<(t=t.toLowerCase()).split(" ").filter(function(t){return 0<=e.indexOf(t)}).length)}};var l={put:function(t){if(s(t))return c(t);if(e=t,Boolean(e)&&"[object Array]"===Object.prototype.toString.call(e))return function(t){var e=[];a();for(var n=0,r=t.length;n<r;n++)s(t[n])&&e.push(c(t[n]));return e}(t);var e;return undefined},clear:a,search:function(t){if(!t)return[];return function(t,e,n,r){for(var i=[],o=0;o<t.length&&i.length<r.limit;o++){var u=p(t[o],e,n,r);u&&i.push(u)}return i}(o,t,u.searchStrategy,u).sort(u.sort)},setOptions:function(t){(u=t||{}).fuzzy=t.fuzzy||!1,u.limit=t.limit||10,u.searchStrategy=t.fuzzy?e:r,u.sort=t.sort||i}};function i(){return 0}var o=[],u={};function a(){return o.length=0,o}function s(t){return Boolean(t)&&"[object Object]"===Object.prototype.toString.call(t)}function c(t){return o.push(t),o}function p(t,e,n,r){for(var i in t)if(!d(t[i],r.exclude)&&n.matches(t[i],e))return t}function d(t,e){for(var n=!1,r=0,i=(e=e||[]).length;r<i;r++){var o=e[r];!n&&new RegExp(t).test(o)&&(n=!0)}return n}u.fuzzy=!1,u.limit=10,u.searchStrategy=u.fuzzy?e:r,u.sort=i;var h={compile:function(r){return v.template.replace(v.pattern,function(t,e){var n=v.middleware(e,r[e],v.template);return void 0!==n?n:r[e]||t})},setOptions:function(t){v.pattern=t.pattern||v.pattern,v.template=t.template||v.template,"function"==typeof t.middleware&&(v.middleware=t.middleware)}},v={};v.pattern=/\{(.*?)\}/g,v.template="",v.middleware=function(){};var m={merge:function(t,e){var n={};for(var r in t)n[r]=t[r],"undefined"!=typeof e[r]&&(n[r]=e[r]);return n},isJSON:function(t){try{return!!(t instanceof Object&&JSON.parse(JSON.stringify(t)))}catch(e){return!1}}};!function(e){var r={searchInput:null,resultsContainer:null,json:[],success:Function.prototype,searchResultTemplate:'<li><a href="{url}" title="{desc}">{title}</a></li>',templateMiddleware:Function.prototype,sortMiddleware:function(){return 0},noResultsText:"No results found",limit:10,fuzzy:!1,exclude:[]},i=["searchInput","resultsContainer","json"],o=function t(e){if(n=e,!(n&&"undefined"!=typeof n.required&&n.required instanceof Array))throw new Error("-- OptionsValidator: required options missing");var n;if(!(this instanceof t))return new t(e);var r=e.required;this.getRequiredOptions=function(){return r},this.validate=function(e){var n=[];return r.forEach(function(t){"undefined"==typeof e[t]&&n.push(t)}),n}}({required:i});function u(t){r.success(t),l.put(t),r.searchInput.addEventListener("keyup",function(t){var e;e=t.which,-1===[13,16,20,37,38,39,40,91].indexOf(e)&&(n(),s(t.target.value))})}function n(){r.resultsContainer.innerHTML=""}function a(t){r.resultsContainer.innerHTML+=t}function s(t){var e;(e=t)&&0<e.length&&(n(),function(t){var e=t.length;if(0===e)return a(r.noResultsText);for(var n=0;n<e;n++)a(h.compile(t[n]))}(l.search(t)))}function c(t){throw new Error("SimpleJekyllSearch --- "+t)}e.SimpleJekyllSearch=function(t){var n;return 0<o.validate(t).length&&c("You must specify the following required options: "+i),r=m.merge(r,t),h.setOptions({template:r.searchResultTemplate,middleware:r.templateMiddleware}),l.setOptions({fuzzy:r.fuzzy,limit:r.limit,sort:r.sortMiddleware}),m.isJSON(r.json)?u(r.json):(n=r.json,f.load(n,function(t,e){t&&c("failed to get JSON ("+n+")"),u(e)})),{search:s}}}(window)}();
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: compress
|
||||
---
|
||||
|
||||
[
|
||||
{% for post in site.posts %}
|
||||
{
|
||||
|
|
@ -8,7 +9,8 @@ layout: compress
|
|||
"url": "{{ site.baseurl }}{{ post.url }}",
|
||||
"categories": "{{ post.categories | join: ', '}}",
|
||||
"tags": "{{ post.tags | join: ', ' }}",
|
||||
"date": "{{ post.date }}"
|
||||
"date": "{{ post.date }}",
|
||||
"snippet": "{{ post.content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 }}"
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{% endfor %}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue