Soper
/
hugo-book
forked from gitbot/hugo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases 2 Wiki Activity

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
soper-book
tyler71 2020-01-13 08:44:24 -08:00 committed by Alex Shpak
parent d6290dcf50
commit e037b7c70f
5 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/_main.scss
View File

@ -291,36 +291,42 @@ aside nav,
.book-page, .book-page,
.markdown { .markdown {
transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
transition-property: transform, margin-left, opacity; transition-property: transform, margin, opacity;
will-change: transform, margin-left; will-change: transform, margin;
} }
@media screen and (max-width: $md-breakpoint) { @media screen and (max-width: $md-breakpoint) {
.book-toc {
display: none;
}
}
@media screen and (max-width: $sm-breakpoint) {
.book-menu { .book-menu {
margin-left: -$menu-width; margin-left: -$menu-width;
font-size: $font-size-base; font-size: $font-size-base;
} }
.book-toc {
margin-right: -$toc-width;
font-size: $font-size-base;
}
.book-header { .book-header {
display: flex; display: flex;
} }
#menu-control:checked + main {
.book-menu nav, #menu-control:checked ~ main {
.book-menu #BookMenu,
.book-page { .book-page {
transform: translateX($menu-width); transform: translateX($menu-width);
} }
.markdown {
.book-header label { opacity: 0.25;
}
.book-header #menu-control {
transform: rotate(90deg); transform: rotate(90deg);
} }
}
#toc-control:checked ~ main {
aside #TableOfContents,
.book-page {
transform: translateX(-$menu-width);
}
.markdown { .markdown {
opacity: 0.25; opacity: 0.25;
} }

1
layouts/_default/baseof.html
View File

@ -7,6 +7,7 @@
</head> </head>
<body> <body>
<input type="checkbox" class="hidden" id="toc-control" />
<input type="checkbox" class="hidden" id="menu-control" /> <input type="checkbox" class="hidden" id="menu-control" />
<main class="flex container"> <main class="flex container">

2
layouts/partials/docs/menu.html
View File

@ -1,4 +1,4 @@
<nav> <nav id="BookMenu">
{{ partial "docs/brand" . }} {{ partial "docs/brand" . }}
{{ partial "docs/search" . }} {{ partial "docs/search" . }}
{{ partial "docs/inject/menu-before" . }} {{ partial "docs/inject/menu-before" . }}

4
layouts/partials/docs/mobile-header.html
View File

@ -1,6 +1,8 @@
<header class="flex align-center justify-between book-header"> <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" /> <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
</label> </label>
<label id="toc-control" for="toc-control">
<strong>{{ partial "docs/title" . }}</strong> <strong>{{ partial "docs/title" . }}</strong>
</label>
</header> </header>

6
layouts/partials/docs/toc.html
View File

@ -1,6 +1,10 @@
{{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }} {{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }}
{{ if and $tocLevels .Page.TableOfContents }} {{ if and $tocLevels .Page.TableOfContents }}
<aside class="book-toc levels-{{$tocLevels}} fixed"> <aside class="book-toc levels-{{$tocLevels}} fixed">
{{ .Page.TableOfContents }} {{ with .Page.TableOfContents }}
<label id="toc-control" for="toc-control">
{{ . }}
</label>
{{ end }}
</aside> </aside>
{{ end }} {{ end }}