mobile search added
This commit is contained in:
		
							parent
							
								
									732660c361
								
							
						
					
					
						commit
						840d72831e
					
				|  | @ -80,6 +80,7 @@ $(document).ready(function() { | |||
|       } | ||||
|       $('.navbar__burger').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); | ||||
|     } | ||||
|   }); | ||||
| }); | ||||
|  |  | |||
|  | @ -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; | ||||
|   } | ||||
| } | ||||
|  | @ -25,42 +25,12 @@ | |||
|     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; | ||||
|     } | ||||
|   } | ||||
| 
 | ||||
|   &__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
											
										
									
								
							|  | @ -13,10 +13,9 @@ | |||
|       {{ .Content }} | ||||
|     </article> | ||||
|     {{ partial "body/whoami" . }} | ||||
|     {{ partial "comments/comments.html" . }} | ||||
| 
 | ||||
|     {{ partial "body/related" . }} | ||||
|     {{ partial "pagination/pagination-single" . }} | ||||
|     {{ partial "comments/comments.html" . }} | ||||
|     {{ partial "body/photoswipe" . }} | ||||
|     {{ partial "body/lib" . }} | ||||
|   </div> | ||||
|  |  | |||
|  | @ -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,8 +1,11 @@ | |||
| <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"/> | ||||
|  | @ -10,7 +13,9 @@ | |||
|   {{ 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__icon"> | ||||
|         {{ partial "svgs/arrow/arrow-forward.svg" (dict "width" 27 "height" 27) }} | ||||
|       </div> | ||||
|     </a> | ||||
|     <hr class="hr-vertical-lines" /> | ||||
|   {{ end }} | ||||
|  |  | |||
|  | @ -1,5 +1,6 @@ | |||
| {{ if $.Param "enableBio" }} | ||||
| <div class="bio"> | ||||
|   <hr class="hr-slash bio-hr"/> | ||||
|   <div class="bio__photo-wrapper">     | ||||
|     {{ $src := "" }} | ||||
|     {{ if site.Params.useGravatar }}     | ||||
|  | @ -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
	
	 zzossig
						zzossig