mobile search added

assets/js/zzo.js

@@ -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);
+    }
   });
 });

assets/sass/components/_bio.scss

@@ -81,4 +81,8 @@
   &__hr {
     margin: 1rem 0;
   }
+
+  &-hr {
+    border-radius: 0.5rem;
+  }
 }

assets/sass/components/_pagination.scss

@@ -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');
+    }
   }
 }
 

assets/sass/components/_search.scss

@@ -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');
+      }
+    }
   }
 }

assets/sass/components/_whoami.scss

@@ -65,4 +65,8 @@
       }   
     }
   }
+
+  &-hr {
+    border-radius: 0.5rem;
+  }
 }

assets/sass/layout/_navigation.scss

@@ -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 {        

assets/sass/main.scss

@@ -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" }};

assets/sass/pages/_archive.scss

@@ -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();

assets/sass/pages/_gallery.scss

@@ -50,6 +50,8 @@
 
 .gallery {
   padding: 1rem;
+  @include flexbox();
+  @include flex-direction(column);
   
   &__contents {
       padding: 1rem;

assets/sass/themes/_dark.scss

@@ -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%),

assets/sass/themes/_hacker.scss

@@ -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%),

assets/sass/themes/_light.scss

@@ -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,

assets/sass/themes/_solarized.scss

@@ -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,

data/skin.toml

@@ -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"

exampleSite/config/_default/config.toml

@@ -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"

exampleSite/config/_default/languages.toml

@@ -0,0 +1,9 @@
+[en]
+  title = "Hugo Zzo Theme"
+  languageName = "English"
+  weight = 1
+
+[ko]
+  title = "Hugo Zzo Theme"
+  languageName = "한국어"
+  weight = 2

exampleSite/config/_default/menus.en.toml

@@ -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

exampleSite/config/_default/params.toml

@@ -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 = ""

layouts/_default/single.html

@@ -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>

layouts/partials/body/whoami.html

@@ -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 }}

layouts/partials/functions/parse_theme.html

@@ -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 -}}

layouts/partials/navbar/site-nav-mobile.html

@@ -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>

layouts/partials/navbar/site-nav.html

@@ -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">

layouts/partials/navbar/site-search-mobile.html

@@ -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 }}

layouts/partials/pagination/pagination-single.html

@@ -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 }}

layouts/partials/sidebar/site-bio.html

@@ -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>

layouts/partials/sidebar/site-search.html

@@ -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 }}

layouts/partials/svgs/etc/cancel.svg

@@ -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>

resources/_gen/assets/css/css/custom.css_b95b077eb505d5c0aff8055eaced30ad.json

@@ -1 +0,0 @@
-{"Target":"css/custom.min.css","MediaType":"text/css","Data":{}}

resources/_gen/assets/scss/scss/custom.scss_b95b077eb505d5c0aff8055eaced30ad.json

@@ -1 +0,0 @@
-{"Target":"scss/custom.min.css","MediaType":"text/css","Data":{}}