mobile search added
This commit is contained in:
zzossig
parent
732660c361
commit
840d72831e
|
|
@ -79,7 +79,8 @@ $(document).ready(function() {
|
|||
$('aside').removeClass('main-side').removeClass('hide').addClass('main-side');
|
||||
}
|
||||
$('.navbar__burger').removeClass('is-active');
|
||||
$('.navbar__menu').removeClass('is-active');
|
||||
$('.navbar__menu').removeClass('is-active');
|
||||
$('.mobile-search').hide();
|
||||
},
|
||||
setup: function () { },
|
||||
deferSetup: true,
|
||||
|
|
@ -121,6 +122,16 @@ $(document).ready(function() {
|
|||
// mobile search
|
||||
$('.mobile-search').hide();
|
||||
$('#mobileSearchBtn').click(function() {
|
||||
$('#mobileSearchContainer').show();
|
||||
$('#search-mobile-container').fadeIn(250);
|
||||
$('#search-mobile').focus();
|
||||
});
|
||||
$('#search-mobile-close').click(function() {
|
||||
$('#search-mobile-container').fadeOut(250);
|
||||
});
|
||||
$('#search-mobile').keydown(function(e) {
|
||||
// e.key === "Enter"
|
||||
if (e.key === "Escape") {
|
||||
$('#search-mobile-container').fadeOut(250);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -209,4 +209,4 @@
|
|||
@mixin clippy() {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
|
||||
<path style="stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,4 +81,8 @@
|
|||
&__hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
&-hr {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -70,6 +70,30 @@
|
|||
&-title {
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
@include on-event {
|
||||
.pagination-single__icon {
|
||||
@include themify($themes) {
|
||||
color: themed('gtt-hover-color');
|
||||
background-color: themed('gtt-hover-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 30px;
|
||||
height :30px;
|
||||
border-radius: 100%;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
@include themify($themes) {
|
||||
color: themed('gtt-color');
|
||||
background-color: themed('gtt-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,12 @@
|
|||
border-radius: 0.25rem;
|
||||
height: $search-height;
|
||||
z-index: z('search');
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include themify($themes) {
|
||||
border: 2px solid themed('search-border-color');
|
||||
background-color: themed("search-background-color");
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +22,6 @@
|
|||
}
|
||||
|
||||
.input {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
border: none;
|
||||
|
|
@ -51,8 +52,11 @@
|
|||
|
||||
&__title {
|
||||
font-size: 1rem;
|
||||
// @include themify($themes) {
|
||||
// color: themed('search-color');
|
||||
// }
|
||||
@include themify($themes) {
|
||||
color: themed('search-color');
|
||||
color: themed('body-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,16 +115,117 @@
|
|||
|
||||
.mobile-search {
|
||||
position: absolute;
|
||||
z-index: z('navbar');
|
||||
z-index: z('modal');
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: red;
|
||||
|
||||
&__input-wrapper {
|
||||
&__top {
|
||||
width: 100%;
|
||||
height: $grid_navbar_height;
|
||||
text-align: right;
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include themify($themes) {
|
||||
border-bottom: 1px solid themed('navbar-border-bottom-color');
|
||||
background-color: themed('navbar-background-color');
|
||||
}
|
||||
|
||||
&--icon {
|
||||
width: 50px;
|
||||
height: $grid_navbar_height;
|
||||
cursor: pointer;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--input {
|
||||
width: calc(100% - 70px);
|
||||
height: 70%;
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 1rem;
|
||||
font-size: 1.1rem;
|
||||
@include themify($themes) {
|
||||
color: themed('body-color');
|
||||
background-color: themed('navbar-background-color');
|
||||
|
||||
@include input-placeholder {
|
||||
font-family: $search_placeholder_font;
|
||||
color: themed("search-placeholder-color");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('body-color');
|
||||
background-color: themed('body-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
&__btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: $grid_navbar_height;
|
||||
border: 5px solid blue;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
@include respond-to(sm) {
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
}
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
padding: 0.5rem;
|
||||
&--title {
|
||||
font-size: 1.2rem;
|
||||
@include themify($themes) {
|
||||
color: themed('body-color');
|
||||
}
|
||||
}
|
||||
|
||||
&--desc {
|
||||
font-size: 0.9rem;
|
||||
@include themify($themes) {
|
||||
color: themed('search-color');
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
@include on-event {
|
||||
@include themify($themes) {
|
||||
background-color: themed('search-hover-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,4 +65,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-hr {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -24,43 +24,13 @@
|
|||
&--show {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
&--search {
|
||||
display: none;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 50px);
|
||||
height: $grid_navbar_height;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
cursor: pointer;
|
||||
|
||||
@include respond-to(sm) {
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&__brand {
|
||||
height: $grid_navbar_height;
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include flex-shrink(0);
|
||||
@include respond-to(sm) {
|
||||
display: none;
|
||||
}
|
||||
@include flex-shrink(0);
|
||||
}
|
||||
|
||||
&__burger {
|
||||
|
|
|
|||
|
|
@ -110,6 +110,7 @@ $toc_vertical_line_active: {{ $scr.Get "toc_vertical_line_active" }};
|
|||
$search_placeholder_color: {{ $scr.Get "search_placeholder_color" }};
|
||||
$search_color: {{ $scr.Get "search_color" }};
|
||||
$search_icon_color: {{ $scr.Get "search_icon_color" }};
|
||||
$search_border_color: {{ $scr.Get "search_border_color" }};
|
||||
$search_background_color: {{ $scr.Get "search_background_color" }};
|
||||
$search_content_background_color: {{ $scr.Get "search_content_background_color" }};
|
||||
$search_hover_background_color: {{ $scr.Get "search_hover_background_color" }};
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
margin-right: 0.5rem;
|
||||
border-radius: 2px;
|
||||
height: 18px;
|
||||
width: 75px;
|
||||
min-width: 75px;
|
||||
padding: 0;
|
||||
font-size: 0.8rem;
|
||||
@include flexbox();
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@
|
|||
|
||||
.gallery {
|
||||
padding: 1rem;
|
||||
@include flexbox();
|
||||
@include flex-direction(column);
|
||||
|
||||
&__contents {
|
||||
padding: 1rem;
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ $dark: (
|
|||
search-placeholder-color: #727072,
|
||||
search-color: #FCFCFA,
|
||||
search-icon-color: #727072,
|
||||
search-border-color: #1e1e1e,
|
||||
search-content-color: inherit,
|
||||
search-background-color: #212121,
|
||||
search-content-background-color: lighten(#403E41, 5%),
|
||||
|
|
|
|||
|
|
@ -81,6 +81,7 @@ $hacker: (
|
|||
search-placeholder-color: #727072,
|
||||
search-color: $primary-color,
|
||||
search-icon-color: #727072,
|
||||
search-border-color: #111111,
|
||||
search-background-color: #252526,
|
||||
search-content-color: $primary-color,
|
||||
search-content-background-color: lighten(#252526, 7%),
|
||||
|
|
|
|||
|
|
@ -78,6 +78,7 @@ $light: (
|
|||
search-placeholder-color: #bdbdbd,
|
||||
search-color: #424242,
|
||||
search-icon-color: #bdbdbd,
|
||||
search-border-color: darken(#eee, 3%),
|
||||
search-background-color: #eeeeee,
|
||||
search-content-color: #424242,
|
||||
search-content-background-color: #eeeeee,
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ $solarized: (
|
|||
toc-vertical-line-active: #FF6188,
|
||||
search-placeholder-color: $primary-color,
|
||||
search-color: $primary-color,
|
||||
search-border-color: darken(#FBF1D1, 10%),
|
||||
search-icon-color: $primary-color,
|
||||
search-background-color: #FBF1D1,
|
||||
search-content-color: $primary-color,
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@ toc_vertical_line_active = "inherit"
|
|||
search_placeholder_color = "inherit"
|
||||
search_color = "inherit"
|
||||
search_icon_color = "inherit"
|
||||
search_border_color = "inherit"
|
||||
search_background_color = "inherit"
|
||||
search_content_color = "inherit"
|
||||
search_content_background_color = "inherit"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
baseURL = "http://example.org/"
|
||||
title = "Hugo Zzo Theme"
|
||||
theme = "zzo"
|
||||
|
||||
defaultContentLanguage = "en"
|
||||
defaultContentLanguageInSubdir = true
|
||||
hasCJKLanguage = true
|
||||
|
||||
summaryLength = 70
|
||||
|
||||
copyright = "©{year}, All Rights Reserved"
|
||||
timeout = 10000
|
||||
enableEmoji = true
|
||||
paginate = 13
|
||||
rssLimit = 100
|
||||
|
||||
pygmentsOptions = "linenos=table"
|
||||
pygmentsCodefences = true
|
||||
pygmentsUseClasses = true
|
||||
pygmentsCodefencesGuessSyntax = true
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS", "JSON", "WebAppManifest"]
|
||||
|
||||
[mediaTypes."application/manifest+json"]
|
||||
suffixes = ["webmanifest"]
|
||||
|
||||
[outputFormats.WebAppManifest]
|
||||
mediaType = "application/manifest+json"
|
||||
rel = "manifest"
|
||||
|
||||
[taxonomies]
|
||||
category = "categories"
|
||||
tag = "tags"
|
||||
series = "series"
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
[en]
|
||||
title = "Hugo Zzo Theme"
|
||||
languageName = "English"
|
||||
weight = 1
|
||||
|
||||
[ko]
|
||||
title = "Hugo Zzo Theme"
|
||||
languageName = "한국어"
|
||||
weight = 2
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
[[main]]
|
||||
identifier = "about"
|
||||
name = "about"
|
||||
url = "about"
|
||||
weight = 1
|
||||
|
||||
[[main]]
|
||||
identifier = "archive"
|
||||
name = "archive"
|
||||
url = "archive"
|
||||
weight = 2
|
||||
|
||||
[[main]]
|
||||
identifier = "gallery"
|
||||
name = "gallery"
|
||||
url = "gallery"
|
||||
weight = 3
|
||||
|
||||
[[main]]
|
||||
parent = "gallery"
|
||||
name = "cartoon"
|
||||
url = "gallery/cartoon"
|
||||
|
||||
[[main]]
|
||||
parent = "gallery"
|
||||
name = "photo"
|
||||
url = "gallery/photo"
|
||||
|
||||
[[main]]
|
||||
identifier = "posts"
|
||||
name = "posts"
|
||||
url = "posts"
|
||||
weight = 4
|
||||
|
||||
[[main]]
|
||||
identifier = "notes"
|
||||
name = "notes"
|
||||
url = "notes"
|
||||
weight = 5
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
logoText = "Zzo"
|
||||
description = "The Zzo theme for Hugo example site."
|
||||
custom_css = []
|
||||
custom_js = []
|
||||
|
||||
# header
|
||||
homeHeaderType = "slide" # text, img, slide
|
||||
|
||||
# body
|
||||
enableBreadcrumb = true
|
||||
enablePhotoSwipe = true
|
||||
enableSearch = true
|
||||
enableMark = true
|
||||
enableGoToTop = true
|
||||
enableWhoami = true
|
||||
summaryShape = "classic" # card, classic, compact
|
||||
archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
|
||||
archivePaginate = 13
|
||||
paginateWindow = 1
|
||||
|
||||
# whoami
|
||||
myname = "zzossig"
|
||||
email = "zzossig@gmail.com"
|
||||
whoami = "Web Developer"
|
||||
useGravatar = false
|
||||
location = "Seoul, Korea"
|
||||
organization = "Hugo"
|
||||
link = "https://github.com/zzossig/hugo-theme-zzo"
|
||||
|
||||
# sidebar
|
||||
enableBio = true
|
||||
enableSidebar = true
|
||||
enableSidebarTags = true
|
||||
enableSidebarSeries = true
|
||||
enableSidebarCategories = true
|
||||
enableToc = true
|
||||
enableTocSwitch = true
|
||||
itemsPerCategory = 5
|
||||
enableSideSubscribe = false
|
||||
searchLanguages = ['en']
|
||||
|
||||
# footer
|
||||
showPoweredBy = true
|
||||
showFeedLinks = true
|
||||
showSocialLinks = true
|
||||
enableLangChange = true
|
||||
enableThemeChange = true
|
||||
themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
|
||||
|
||||
# comment
|
||||
enableComment = true
|
||||
disqus_shortname = ""
|
||||
commento = false
|
||||
|
||||
[gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
|
||||
owner = "" # Your GitHub ID
|
||||
repo = "" # The repo to store comments
|
||||
clientId = "" # Your client ID
|
||||
clientSecret = "" # Your client secret
|
||||
|
||||
[utterances] # https://utteranc.es/
|
||||
owner = "" # Your GitHub ID
|
||||
repo = "" # The repo to store comments
|
||||
|
||||
[gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk
|
||||
owner = "" # Your GitHub ID
|
||||
repo = "" # The repo to store comments
|
||||
clientId = "" # Your client ID
|
||||
clientSecret = "" # Your client secret
|
||||
|
||||
# Valine.
|
||||
# You can get your appid and appkey from https://leancloud.cn
|
||||
# more info please open https://valine.js.org
|
||||
[valine]
|
||||
enable = false
|
||||
appId = '你的appId'
|
||||
appKey = '你的appKey'
|
||||
notify = false # mail notifier , https://github.com/xCss/Valine/wiki
|
||||
verify = false # Verification code
|
||||
avatar = 'mm'
|
||||
placeholder = '说点什么吧...'
|
||||
visitor = false
|
||||
|
||||
[changyan]
|
||||
changyanAppid = "" # Changyan app id # 畅言
|
||||
changyanAppkey = "" # Changyan app key
|
||||
|
||||
[livere]
|
||||
livereUID = "" # LiveRe UID # 来必力
|
||||
|
||||
# Isso: https://posativ.org/isso/
|
||||
[isso]
|
||||
enable = false
|
||||
scriptSrc = "" # "https://isso.example.com/js/embed.min.js"
|
||||
dataAttrs = "" # "data-isso='https://isso.example.com' data-isso-require-author='true'"
|
||||
|
||||
[marketing]
|
||||
google_analytics = ""
|
||||
google_tag_manager = ""
|
||||
|
||||
[socialOptions]
|
||||
email = "mailto:your@email.com"
|
||||
facebook = "http://example.org/"
|
||||
twitter = "http://example.org/"
|
||||
github = "https://github.com/zzossig/hugo-theme-zzo"
|
||||
stack-overflow = ""
|
||||
instagram = ""
|
||||
google-plus = ""
|
||||
youtube = ""
|
||||
medium = ""
|
||||
tumblr = ""
|
||||
linkedin = ""
|
||||
pinterest = ""
|
||||
stack-exchange = ""
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -12,11 +12,10 @@
|
|||
<article class="single__contents">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
{{ partial "body/whoami" . }}
|
||||
{{ partial "comments/comments.html" . }}
|
||||
|
||||
{{ partial "body/whoami" . }}
|
||||
{{ partial "body/related" . }}
|
||||
{{ partial "pagination/pagination-single" . }}
|
||||
{{ partial "comments/comments.html" . }}
|
||||
{{ partial "body/photoswipe" . }}
|
||||
{{ partial "body/lib" . }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "pagination/pagination-single" . }}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{ if $.Param "enableWhoami" }}
|
||||
<div class="whoami__gutter"></div>
|
||||
<hr class="hr-slash"/>
|
||||
<hr class="hr-slash whoami-hr"/>
|
||||
<div class="whoami">
|
||||
<div class="whoami__image-wrapper">
|
||||
{{ $src := "" }}
|
||||
|
|
@ -35,5 +35,5 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr-slash" />
|
||||
<hr class="hr-slash whoami-hr" />
|
||||
{{ end }}
|
||||
|
|
@ -80,6 +80,7 @@
|
|||
{{- $scr.Set "search_placeholder_color" $skin.search_placeholder_color -}}
|
||||
{{- $scr.Set "search_color" $skin.search_color -}}
|
||||
{{- $scr.Set "search_icon_color" $skin.search_icon_color -}}
|
||||
{{- $scr.Set "search_border_color" $skin.search_border_color -}}
|
||||
{{- $scr.Set "search_background_color" $skin.search_background_color -}}
|
||||
{{- $scr.Set "search_content_background_color" $skin.search_content_background_color -}}
|
||||
{{- $scr.Set "search_hover_background_color" $skin.search_hover_background_color -}}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
<div id="mobileSearchBtn" class="navbar__mobile--search">
|
||||
<div class="navbar__mobile--search-icon">
|
||||
{{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
|
||||
</div>
|
||||
{{T "search-placeholder"}}
|
||||
</div>
|
||||
|
||||
<div id="mobileSearchContainer" class="mobile-search hide">
|
||||
<div class="mobile-search__input-wrapper">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -9,13 +9,16 @@
|
|||
<h6 class="navbar__title">{{ .Site.Params.logoText }}</h6>
|
||||
</a>
|
||||
</div>
|
||||
<!-- {{ partial "navbar/site-nav-mobile" . }} -->
|
||||
{{ partial "navbar/site-search-mobile" . }}
|
||||
<a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="navbar__menu">
|
||||
<div id="mobileSearchBtn" class="mobile-search__btn">
|
||||
{{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
|
||||
</div>
|
||||
{{ range .Site.Menus.main -}}
|
||||
{{ if .HasChildren }}
|
||||
<div class="navbar__dropdown">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
{{ if $.Param "enableSearch" }}
|
||||
<div id="search-mobile-container" class="mobile-search hide">
|
||||
<div class="mobile-search__top">
|
||||
<input id="search-mobile" type="text" placeholder="{{T "search-placeholder"}}" class="mobile-search__top--input"/>
|
||||
<div id="search-mobile-close" class="mobile-search__top--icon">
|
||||
{{ partial "svgs/etc/cancel.svg" (dict "width" 22 "height" 22) }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="search-mobile-results" class="mobile-search__body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -1,16 +1,21 @@
|
|||
<div class="grow"></div>
|
||||
<div class="pagination-single">
|
||||
{{ if .PrevPage }}
|
||||
<hr class="hr-vertical-lines" />
|
||||
<a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
|
||||
{{ partial "svgs/arrow/arrow-back.svg" (dict "width" 30 "height" 30) }}
|
||||
<div class="pagination-single__icon">
|
||||
{{ partial "svgs/arrow/arrow-back.svg" (dict "width" 27 "height" 27) }}
|
||||
</div>
|
||||
<div class="pagination-single__left-title p1">{{ .PrevPage.Title }}</div>
|
||||
</a>
|
||||
<hr class="hr-vertical-lines"/>
|
||||
{{ end }}
|
||||
{{ if .NextPage }}
|
||||
<a href="{{ .NextPage.Permalink }}" class="pagination-single__right">
|
||||
<div class="pagination-single__right-title p1">{{ .NextPage.Title }}</div>
|
||||
{{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 30 "height" 30) }}
|
||||
<div class="pagination-single__right-title p1">{{ .NextPage.Title }}</div>
|
||||
<div class="pagination-single__icon">
|
||||
{{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 27 "height" 27) }}
|
||||
</div>
|
||||
</a>
|
||||
<hr class="hr-vertical-lines" />
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{{ if $.Param "enableBio" }}
|
||||
<div class="bio">
|
||||
<div class="bio__photo-wrapper">
|
||||
<hr class="hr-slash bio-hr"/>
|
||||
<div class="bio__photo-wrapper">
|
||||
{{ $src := "" }}
|
||||
{{ if site.Params.useGravatar }}
|
||||
{{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 .Site.Params.email) }}
|
||||
|
|
@ -15,6 +16,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<hr class="hr-slash bio-hr"/>
|
||||
<div class="bio__name">
|
||||
{{ .Site.Params.myname }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -122,6 +122,28 @@
|
|||
searchMenu.appendChild(content);
|
||||
}
|
||||
|
||||
function renderSearchResultsMobile(results) {
|
||||
searchResults = document.getElementById('search-mobile-results');
|
||||
|
||||
var content = document.createElement('div');
|
||||
content.setAttribute('class', 'mobile-search__content');
|
||||
|
||||
if (results.length > 0) {
|
||||
results.forEach(function (result) {
|
||||
var item = document.createElement('a');
|
||||
item.setAttribute('href', result.uri);
|
||||
item.innerHTML = `<div class="mobile-search__item"><div class="mobile-search__item--title">» ${result.title}</div><div class="mobile-search__item--desc">${result.description ? result.description : result.content}</div></div>`;
|
||||
content.appendChild(item);
|
||||
});
|
||||
} else {
|
||||
var item = document.createElement('span');
|
||||
content.appendChild(item);
|
||||
}
|
||||
|
||||
$('#search-mobile-results').empty();
|
||||
searchResults.appendChild(content);
|
||||
}
|
||||
|
||||
initLunr();
|
||||
|
||||
$("#search").on('input', function (e) {
|
||||
|
|
@ -129,17 +151,28 @@
|
|||
$('#search-results').attr('class', 'dropdown');
|
||||
return null;
|
||||
}
|
||||
|
||||
if ($(window).width() < 770) {
|
||||
return null;
|
||||
}
|
||||
|
||||
var results = search(e.target.value);
|
||||
renderSearchResults(results);
|
||||
});
|
||||
|
||||
$('#search').on('blur', function () {
|
||||
if ($(window).width() < 770) {
|
||||
return null;
|
||||
}
|
||||
setTimeout(function () {
|
||||
$('#search-results').attr('class', 'dropdown');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
$('#search').on('click', function (e) {
|
||||
if ($(window).width() < 770) {
|
||||
return null;
|
||||
}
|
||||
if (!e.target.value) {
|
||||
$('#search-results').attr('class', 'dropdown');
|
||||
return null;
|
||||
|
|
@ -149,6 +182,9 @@
|
|||
});
|
||||
|
||||
$('#search').on('keydown', function (e) {
|
||||
if ($(window).width() < 770) {
|
||||
return null;
|
||||
}
|
||||
var items = $('#search-menu .dropdown-item');
|
||||
var activeIndex = $('#search-menu .dropdown-item.is-active').index();
|
||||
|
||||
|
|
@ -164,6 +200,17 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#search-mobile").on('input', function(e) {
|
||||
if (!e.target.value) {
|
||||
$('#search-mobile-results').empty();
|
||||
return null;
|
||||
}
|
||||
|
||||
var results = search(e.target.value);
|
||||
renderSearchResultsMobile(results);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
|
||||
|
After Width: | Height: | Size: 420 B |
|
|
@ -1 +0,0 @@
|
|||
{"Target":"css/custom.min.css","MediaType":"text/css","Data":{}}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"Target":"scss/custom.min.css","MediaType":"text/css","Data":{}}
|
||||
Loading…
Reference in New Issue