[enhancement]mobile menu include child, new nojs param, better img shortcode

#207 #206 #206
new param `hideSingleContentsWhenJSDisabled` added

assets/sass/layout/_navigation.scss

@@ -495,10 +495,15 @@
         font-weight: bold;
         color: inherit;
         text-decoration: none !important;
+        padding: 0 1rem;
         
         @include flexbox();
         @include align-items(center);
-        @include justify-content(center);
+        @include justify-content(flex-start);
+      }
+
+      & svg {
+        margin: auto 0.25rem;
       }
 
       @include themify($themes) {
@@ -513,6 +518,15 @@
         }
       }
     }
+
+    &--subitem {
+      height: 30px;
+      padding: 0 2.5rem;
+      
+      & > a {
+        font-size: 0.9rem;
+      }
+    }
   }
 
   &__collapse {

assets/sass/pages/_single.scss

@@ -64,6 +64,12 @@
     padding: 0 0.125rem;
   }
 
+  &__nojs {
+    width: 100%;
+    color: red;
+    padding: 0.5rem 0;
+  }
+
   &__contents {
     &[data-ani="true"] {
       @include animation('slide-in-left-little .2s .6s 1 ease-in both');

exampleSite/config/_default/params.toml

@@ -14,6 +14,7 @@ notAllowedTypesInArchive = ["about", "talks", "showcase", "publication", "presen
 notAllowedTypesInHomeFeed = ["about", "archive", "contact", "talks", "showcase", "publication", "presentation", "resume", "gallery"]
 
 enableUiAnimation = true
+hideSingleContentsWhenJSDisabled = false
 
 # header
 homeHeaderType = "text" # text, img, slide

i18n/en.toml

@@ -95,7 +95,7 @@ other = "Overview"
 other = "Pinned"
 
 [nojs-message]
-other = "Please enable Javascript to view the contents"
+other = "This page looks best with JavaScript enabled"
 
 [posts-by-order]
 other = "TOP POSTS"

i18n/ko.toml

@@ -95,7 +95,7 @@ other = "개요"
 other = "고정"
 
 [nojs-message]
-other = "내용을 보시려면 자바스크립트를 활성화 해주세요"
+other = "자바스크립트를 활성화 해주세요"
 
 [posts-by-order]
 other = "TOP POSTS"

layouts/_default/single.html

@@ -4,11 +4,16 @@
   {{ if $.Param "enableBreadcrumb" }}
     {{ partial "body/breadcrumb" . }}
   {{ end }}
+  {{ if $.Param "hideSingleContentsWhenJSDisabled" }}
   <noscript>
-    {{ i18n "nojs-message" }}
+    <div class="single__nojs">
+      {{ i18n "nojs-message" }}
+    </div>
   </noscript>
-  <div class="single hide">
+  {{ end }}
-    <script>document.querySelector('.single').classList.remove('hide')</script>
+  <div class="single {{ if $.Param "hideSingleContentsWhenJSDisabled" }}hide{{ end }}">
+    <div class="single__nojs">{{ i18n "nojs-message" }}</div>
+    <script>document.querySelector('.single').classList.remove('hide'); document.querySelector('.single__nojs').classList.add('hide');</script>
     <h2 class="single__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Title }}</h2>
     <div class="single__meta">
       {{ partial "body/infos" . }}

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

@@ -15,9 +15,27 @@
       {{ $active = or $active (eq $menu.Name $current.Title) }}
       {{ $active = or $active (eq (lower $menu.URL) (lower $current.Title)) }}
       {{ $active = or $active (eq (lower $menu.URL) (lower $current.Type)) }}
-      <li class="navbarm__menu--item {{ if $active }}active{{ end }}">
+
-        <a href="{{ $menu.URL | relLangURL }}">{{ safeHTML $menu.Name }}</a>
+      {{ if $menu.HasChildren }}
-      </li>
+        <li class="navbarm__menu--item {{ if $active }}active{{ end }}">
+          <a href="{{ $menu.URL | relLangURL }}">
+            {{ safeHTML $menu.Name }}
+            {{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
+          </a>
+        </li>
+
+        {{ range .Children }}
+          <li class="navbarm__menu--item navbarm__menu--subitem">
+            <a href="{{ .URL | relLangURL }}">{{ safeHTML .Name }}</a>
+          </li>
+        {{ end }}
+
+      {{ else }}
+        <li class="navbarm__menu--item {{ if $active }}active{{ end }}">
+          <a href="{{ $menu.URL | relLangURL }}">{{ safeHTML $menu.Name }}</a>
+        </li>
+      {{ end }}
+      
     {{ end }}
 
     {{ range $index, $term := $.Site.Params.showMobileMenuTerms }}

layouts/partials/navbar/nav-menu.html

@@ -11,9 +11,7 @@
     <a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}"
       dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
       {{ safeHTML .Name }}
-      <span class="navbar__menu-icon">
+      {{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
-        {{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
-      </span>
     </a>
     <div class="navbar__dropdown--content">
       {{ range .Children }}

layouts/shortcodes/img.html

@@ -1,22 +1,5 @@
 {{ $base := (findRE "/[a-zA-Z0-9_]+/" .Site.BaseURL | default "/") }}
-{{ if .Get "lazy" }}
+{{ if not (.Get "lazy") }}
-<figure {{ with .Get "class" }}class="{{ . }}" {{ end }}>
-  {{ with .Get "link"}}<a href="{{ . }}">{{ end }}
-    <img data-src="{{ if eq $base "/" }}{{ .Get "src" }}{{ else }}{{ delimit $base "" }}{{ substr (.Get "src") 1 }}{{ end }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} data-caption="{{ .Get "caption" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='{{ if .Get "width" }}{{ .Get "width" }}{{ else }}32px{{ end }}' height='{{ if .Get "height" }}{{ .Get "height" }}{{ else }}{{ end }}' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:{{ .Get "width" }};height:{{ .Get "height" }};"/>
-    {{ if .Get "link"}}</a>{{ end }}
-  {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
-    <figcaption style="text-align: {{ with .Get "position" }}{{ . }};{{ end }}">{{ if isset .Params "title" }}
-    <strong>{{ .Get "title" }}</strong>:{{ end }}
-    {{ if or (.Get "caption") (.Get "attr")}}
-    {{ .Get "caption" }}
-    {{ with .Get "attrlink"}}<a href="{{ . }}"> {{ end }}
-      {{ .Get "attr" }}
-      {{ if .Get "attrlink"}}</a> {{ end }}
-    {{ end }}
-  </figcaption>
-  {{ end }}
-</figure>
-{{ else }}
 <figure {{ with .Get "class" }}class="{{ . }}" {{ end }}>
   {{ with .Get "link"}}<a href="{{ . }}">{{ end }}
     <img src="{{ if eq $base "/" }}{{ .Get "src" }}{{ else }}{{ delimit $base "" }}{{ substr (.Get "src") 1 }}{{ end }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} style="width:{{ .Get "width" }};height:{{ .Get "height" }};"/>
@@ -33,4 +16,21 @@
     </figcaption>
   {{ end }}
 </figure>
+{{ else }}
+<figure {{ with .Get "class" }}class="{{ . }}" {{ end }}>
+  {{ with .Get "link"}}<a href="{{ . }}">{{ end }}
+    <img data-src="{{ if eq $base "/" }}{{ .Get "src" }}{{ else }}{{ delimit $base "" }}{{ substr (.Get "src") 1 }}{{ end }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} data-caption="{{ .Get "caption" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='{{ if .Get "width" }}{{ .Get "width" }}{{ else }}{{ end }}' height='{{ if .Get "height" }}{{ .Get "height" }}{{ else }}{{ end }}' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" style="width:{{ .Get "width" }};height:{{ .Get "height" }};"/>
+    {{ if .Get "link"}}</a>{{ end }}
+  {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+    <figcaption style="text-align: {{ with .Get "position" }}{{ . }};{{ end }}">{{ if isset .Params "title" }}
+    <strong>{{ .Get "title" }}</strong>:{{ end }}
+    {{ if or (.Get "caption") (.Get "attr")}}
+    {{ .Get "caption" }}
+    {{ with .Get "attrlink"}}<a href="{{ . }}"> {{ end }}
+      {{ .Get "attr" }}
+      {{ if .Get "attrlink"}}</a> {{ end }}
+    {{ end }}
+  </figcaption>
+  {{ end }}
+</figure>
 {{ end }}