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

#207 #206 #206 new param `hideSingleContentsWhenJSDisabled` added
2020-02-27 22:29:54 +09:00 · 2020-02-27 22:29:54 +09:00 · c4ab5ffeb0
parent f5581d6eb5
commit c4ab5ffeb0
10 changed files with 73 additions and 31 deletions
--- a/assets/sass/layout/_navigation.scss
+++ b/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 {
--- a/assets/sass/pages/_single.scss
+++ b/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');
--- a/exampleSite/config/_default/params.toml
+++ b/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
--- a/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
+++ b/exampleSite/resources/_gen/assets/scss/sass/main.scss_b4f67ac5085b89b62b54c1923e5a9145.content
--- a/i18n/en.toml
+++ b/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"
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@ -95,7 +95,7 @@ other = "개요"
 other = "고정"

 [nojs-message]
-other = "내용을 보시려면 자바스크립트를 활성화 해주세요"
+other = "자바스크립트를 활성화 해주세요"

 [posts-by-order]
 other = "TOP POSTS"
--- a/layouts/_default/single.html
+++ b/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">
-    <script>document.querySelector('.single').classList.remove('hide')</script>
+  {{ end }}
+  <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" . }}
--- a/layouts/partials/navbar/nav-menu-mobile.html
+++ b/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>
-      </li>
+
+      {{ if $menu.HasChildren }}
+        <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 }}
--- a/layouts/partials/navbar/nav-menu.html
+++ b/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) }}
-      </span>
+      {{ partial "svgs/arrow/keyboard-arrow-down.svg" (dict "width" 18 "height" 18) }}
    </a>
    <div class="navbar__dropdown--content">
      {{ range .Children }}
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@ -1,22 +1,5 @@
 {{ $base := (findRE "/[a-zA-Z0-9_]+/" .Site.BaseURL | default "/") }}
-{{ if .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 }}
+{{ if not (.Get "lazy") }}
 <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 }}