gallery fixes, new params

gallery folder check logic added
fix #326
fix #317
appbarSearchIcon = true
appbarLangIcon = true

README.ko.md

@@ -254,6 +254,10 @@ enableUiAnimation = true
 hideSingleContentsWhenJSDisabled = false
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
+# appbar
+enableAppbarSearchIcon = false
+enableAppbarLangIcon = false
+
 # header
 homeHeaderType = "text" # text, img, slide, typewriter
 hideHomeHeaderWhenMobile = false

README.md

@@ -266,6 +266,10 @@ enableUiAnimation = true
 hideSingleContentsWhenJSDisabled = false
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
+# appbar
+enableAppbarSearchIcon = false
+enableAppbarLangIcon = false
+
 # header
 homeHeaderType = "text" # text, img, slide, typewriter
 hideHomeHeaderWhenMobile = false

assets/sass/layout/_navigation.scss

@@ -55,7 +55,7 @@
 
     &[data-ani="true"] {
       @media only screen and (min-width: 769px) {
-        @for $i from 1 through 8 {
+        @for $i from 1 through 10 {
           &:nth-child(#{$i}) {
             @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
           }
@@ -356,7 +356,6 @@
       color: themed('burger-menu-color');  
       @include on-event {
         color: themed('navbar-title-hover-color');
-        background-color: themed('navbar-background-color');
       }
     }
 

assets/sass/pages/_gallery.scss

@@ -70,6 +70,7 @@
     
     @include flexbox();
     @include justify-content(center);
+    @include align-items(flex-start);
 
     &__desc {
       position: absolute;

exampleSite/config/_default/params.toml

@@ -19,6 +19,10 @@ hideSingleContentsWhenJSDisabled = false
 enablePinnedPosts = true
 minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud
 
+# appbar
+enableAppbarSearchIcon = false
+enableAppbarLangIcon = false
+
 # header
 homeHeaderType = "text" # text, img, slide, typewriter
 hideHomeHeaderWhenMobile = false

layouts/gallery/single.html

@@ -6,26 +6,22 @@
   </div>
 </header>
 
-{{ $root := . }}
 {{ if in (lower .Params.Mode) "one" }}
 <main class="gallery main">
   <div class="grid gallery__container">
     <div class="grid-sizer"></div>
-    {{ if .File.Dir }}
+    {{ $basename := (replace .File.Dir "\\" "/") }}
-      {{ $basename := (replace .File.Dir "\\" "/") }}
+    {{ range .Params.Images }}
-      {{ range .Params.Images }}
+    <div class="grid-item">
-      <div class="grid-item">
+      <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}" />
-        <img src="{{ $basename | relURL }}{{ .image }}" alt="{{ print .caption }}" />
+      <div class="grid-item__desc hide">
-        <div class="grid-item__desc hide">
+        <span class="grid-item__desc--text">
-          <span class="grid-item__desc--text">
+          {{ .caption }}
-            {{ .caption }}
+        </span>
-          </span>
-        </div>
       </div>
-      {{ end }}
+    </div>
     {{ end }}
   </div>
-  {{ partial "pagination/pagination-single" . }}
 </main>
 
 {{ else if eq (lower .Params.mode) "remote" }}
@@ -43,28 +39,31 @@
     </div>
     {{ end }}
   </div>
-  {{ partial "pagination/pagination-single" . }}
 </main>
 
 {{ else }}
 <main class="gallery main">
   <div class="grid gallery__container">
     <div class="grid-sizer"></div>
-    {{ if .File.Dir }}
+    {{ $basename := (replace .File.Dir "\\" "/") }}
-      {{ $basename := (replace .File.Dir "\\" "/") }}
+    {{ $galleryFolderPath := (print "./static/" $basename) }}
-      {{ range (readDir (print "./static/" $basename)) }}
+    {{ if (fileExists $galleryFolderPath) }}
-      <div class="grid-item">
+      {{ range readDir $galleryFolderPath }}
-        <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}"/>
+        <div class="grid-item">
-        <div class="grid-item__desc hide">
+          <img src="{{ $basename | relURL }}{{ .Name }}" alt="{{ index (split .Name ".") 0 }}" />
-          <span class="grid-item__desc--text">
+          <div class="grid-item__desc hide">
-            {{ index (split .Name ".") 0 }}
+            <span class="grid-item__desc--text">
-          </span>
+              {{ index (split .Name ".") 0 }}
+            </span>
+          </div>
         </div>
-      </div>
       {{ end }}
+    {{ else }}
+    <div class="basicflex">
+      Make a gallery folder first.
+    </div>
     {{ end }}
   </div>
-  {{ partial "pagination/pagination-single" . }}
 </main>
 
 {{ end }}

layouts/partials/footer/select-lang.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableLangChange" }}
 <div class="dropdown">
-  <button class="dropdown-trigger" aria-label="Select Theme Button">
+  <button class="dropdown-trigger" aria-label="Select Language Button">
     {{ partial "svgs/etc/translate.svg" (dict "width" 24 "height" 24) }}
   </button>
   <div class="dropdown-content">

layouts/partials/head/scripts.html

@@ -1099,7 +1099,7 @@
   // ====================== mobile search =======================
     var mobileSearchInputElem = document.querySelector('#search-mobile');
     var mobileSearchClassElem = document.querySelector('.mobile-search');
-    var mobileSearchBtnElem = document.querySelector('#mobileSearchBtn');
+    var mobileSearchBtnElems = document.querySelectorAll('.navbar-search');
     var mobileSearchCloseBtnElem = document.querySelector('#search-mobile-close');
     var mobileSearchContainer = document.querySelector('#search-mobile-container');
     var mobileSearchResultsElem = document.querySelector('#search-mobile-results');
@@ -1109,19 +1109,21 @@
       mobileSearchClassElem.style.display = 'none';
     }
 
-    mobileSearchBtnElem ? 
+    mobileSearchBtnElems ? 
-    mobileSearchBtnElem.addEventListener('click', function () {
+    mobileSearchBtnElems.forEach(function (elem, idx) {
-      if (mobileSearchContainer) {
+      elem.addEventListener('click', function () {
-        mobileSearchContainer.style.display = 'block';
+        if (mobileSearchContainer) {
-      }
+          mobileSearchContainer.style.display = 'block';
+        }
 
-      if (mobileSearchInputElem) {
+        if (mobileSearchInputElem) {
-        mobileSearchInputElem.focus();
+          mobileSearchInputElem.focus();
-      }
+        }
 
-      if (htmlElem) {
+        if (htmlElem) {
-        htmlElem.style.overflowY = 'hidden';
+          htmlElem.style.overflowY = 'hidden';
-      }
+        }
+      });
     }) : null;
 
     mobileSearchCloseBtnElem ? 

layouts/partials/navbar/language-icon.html

@@ -0,0 +1,28 @@
+<div class="theme">
+  <div class="dropdown">
+    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Language Button" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
+      {{ partial "svgs/etc/translate.svg" (dict "width" 22 "height" 22) }}      
+    </button>
+    <div class="dropdown-content select-theme">
+      {{ $siteLanguages := .Site.Languages }}
+      {{ $pageLang := .Page.Lang }}
+      {{ range .Page.AllTranslations }}
+        {{ $translation := . }}
+        {{ range $siteLanguages }}
+          {{ if eq $translation.Lang .Lang }}
+          {{ $selected := false }}
+            {{ if eq $pageLang .Lang }}
+              {{ if .LanguageName }}
+                <a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item select-theme__item is-active">{{ .LanguageName }}</a>
+              {{ end }}
+            {{ else }}
+              {{ if .LanguageName }}
+                <a href="{{ $translation.Permalink }}" data-lang="{{ .Lang }}" class="dropdown-item ">{{ .LanguageName }}</a>
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</div>

layouts/partials/navbar/nav-menu.html

@@ -1,4 +1,10 @@
 <div class="navbar__menu">
+  {{ if $.Site.Params.enableAppbarSearchIcon }}
+    {{ partial "navbar/search-icon" . }}
+  {{ end }}
+  {{ if $.Site.Params.enableAppbarLangIcon }}
+    {{ partial "navbar/language-icon" . }}
+  {{ end }}
   {{ partial "navbar/select-theme" . }}
   {{ $current := . }}
   {{ range .Site.Menus.main }}

layouts/partials/navbar/search-icon.html

@@ -0,0 +1,9 @@
+<div class="theme">
+  <div class="dropdown">
+    <button class="dropdown-trigger navbar__slide-down navbar-search" aria-label="Search Button" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
+      {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
+    </button>
+    <div class="dropdown-content select-theme">
+    </div>
+  </div>
+</div>

layouts/partials/pagination/pagination.html

@@ -20,11 +20,8 @@
   <ul class="pagination">
     {{ range $pag.Pagers }}
       {{ $cur := .PageNumber }}
-      <script>
-      </script>
       {{ if in ($.Scratch.Get "show") $cur }}
-        <li
+        <li {{ if eq . $pag }}class="active"{{ end }}><a href="{{ .URL }}">{{ .PageNumber }}</a></li>
-        {{ if eq . $pag }}class="active"{{ end }}><a href="{{ .URL }}">{{ .PageNumber }}</a></li>
       {{ else if in (slice 2 (sub $total 1)) $cur }}
         <li class="disabled"><a name="">&hellip;</a></li>
       {{ end }}

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

@@ -1,5 +1,5 @@
 {{ if $.Param "enableSearch" }}
-<div id="mobileSearchBtn" class="mobile-search__btn" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
+<div class="mobile-search__btn navbar-search" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
 </div>