diff options
| author | tyler71 <4926565+tyler71@users.noreply.github.com> | 2020-01-13 08:44:24 -0800 |
|---|---|---|
| committer | Alex Shpak <alex-shpak@users.noreply.github.com> | 2020-01-13 17:44:24 +0100 |
| commit | e037b7c70f3800a2cd38715ca31cd4cdca71c96e (patch) | |
| tree | 26c10b149fbb929272338ae3d4e9a2b3b6b8f469 | |
| parent | d6290dcf509c84a38df667813ad3acdcf58c09f5 (diff) | |
mobile toc menu (#121)
* Implement TOC for mobile
* Uses Page title as label
* Label entries so that tapping TOC will hide menu
* Switch to medium breakpoint
* Correct tos -> toc
* toc-menu-control -> toc-control
| -rw-r--r-- | assets/_main.scss | 32 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 1 | ||||
| -rw-r--r-- | layouts/partials/docs/menu.html | 2 | ||||
| -rw-r--r-- | layouts/partials/docs/mobile-header.html | 4 | ||||
| -rw-r--r-- | layouts/partials/docs/toc.html | 6 |
5 files changed, 29 insertions, 16 deletions
diff --git a/assets/_main.scss b/assets/_main.scss index 309c691..9553f61 100644 --- a/assets/_main.scss +++ b/assets/_main.scss @@ -291,36 +291,42 @@ aside nav, .book-page, .markdown { transition: 0.2s ease-in-out; - transition-property: transform, margin-left, opacity; - will-change: transform, margin-left; + transition-property: transform, margin, opacity; + will-change: transform, margin; } @media screen and (max-width: $md-breakpoint) { - .book-toc { - display: none; - } -} - -@media screen and (max-width: $sm-breakpoint) { .book-menu { margin-left: -$menu-width; font-size: $font-size-base; } + .book-toc { + margin-right: -$toc-width; + font-size: $font-size-base; + } .book-header { display: flex; } - #menu-control:checked + main { - .book-menu nav, + + #menu-control:checked ~ main { + .book-menu #BookMenu, .book-page { transform: translateX($menu-width); } - - .book-header label { + .markdown { + opacity: 0.25; + } + .book-header #menu-control { transform: rotate(90deg); } - + } + #toc-control:checked ~ main { + aside #TableOfContents, + .book-page { + transform: translateX(-$menu-width); + } .markdown { opacity: 0.25; } diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 38630a7..0d28f76 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,6 +7,7 @@ </head> <body> + <input type="checkbox" class="hidden" id="toc-control" /> <input type="checkbox" class="hidden" id="menu-control" /> <main class="flex container"> diff --git a/layouts/partials/docs/menu.html b/layouts/partials/docs/menu.html index 6a72ac9..6e41096 100644 --- a/layouts/partials/docs/menu.html +++ b/layouts/partials/docs/menu.html @@ -1,4 +1,4 @@ -<nav> +<nav id="BookMenu"> {{ partial "docs/brand" . }} {{ partial "docs/search" . }} {{ partial "docs/inject/menu-before" . }} diff --git a/layouts/partials/docs/mobile-header.html b/layouts/partials/docs/mobile-header.html index b69f58c..4212a8e 100644 --- a/layouts/partials/docs/mobile-header.html +++ b/layouts/partials/docs/mobile-header.html @@ -1,6 +1,8 @@ <header class="flex align-center justify-between book-header"> - <label for="menu-control"> + <label id="menu-control" for="menu-control"> <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" /> </label> + <label id="toc-control" for="toc-control"> <strong>{{ partial "docs/title" . }}</strong> + </label> </header> diff --git a/layouts/partials/docs/toc.html b/layouts/partials/docs/toc.html index 256a370..79bfc0a 100644 --- a/layouts/partials/docs/toc.html +++ b/layouts/partials/docs/toc.html @@ -1,6 +1,10 @@ {{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }} {{ if and $tocLevels .Page.TableOfContents }} <aside class="book-toc levels-{{$tocLevels}} fixed"> - {{ .Page.TableOfContents }} + {{ with .Page.TableOfContents }} + <label id="toc-control" for="toc-control"> + {{ . }} + </label> + {{ end }} </aside> {{ end }} |