git: 97c1f5601c - main - Rework book menu
- Go to: [ bottom of page ] [ top of archives ] [ this month ]
Date: Wed, 29 Dec 2021 13:38:01 UTC
The branch main has been updated by carlavilla:
URL: https://cgit.FreeBSD.org/doc/commit/?id=97c1f5601c51dbd56796c0b82da9ef60f1f81ff1
commit 97c1f5601c51dbd56796c0b82da9ef60f1f81ff1
Author: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2021-12-29 13:35:36 +0000
Commit: Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
CommitDate: 2021-12-29 13:35:36 +0000
Rework book menu
* Allow to open the chapter by their title
* Fix problems with the orientation of the elements in the menu
PR: 260464
Submitted by: PauAmma <pauamma (AT) gundo.com>
---
.../beastie/assets/styles/documentation.scss | 180 +++++++++++----------
.../themes/beastie/assets/styles/global.scss | 8 +-
.../themes/beastie/layouts/books/list.html | 2 +-
.../themes/beastie/layouts/books/single.html | 2 +-
.../themes/beastie/layouts/partials/menu.html | 9 +-
5 files changed, 104 insertions(+), 97 deletions(-)
diff --git a/documentation/themes/beastie/assets/styles/documentation.scss b/documentation/themes/beastie/assets/styles/documentation.scss
index 347fd470d6..292589023c 100644
--- a/documentation/themes/beastie/assets/styles/documentation.scss
+++ b/documentation/themes/beastie/assets/styles/documentation.scss
@@ -156,6 +156,78 @@
display: flex;
margin-top: var(--header-height);
+ .book-menu {
+ flex: 0 0 16rem;
+ font-size: .75rem;
+ background-color: var(--global-background-color);
+
+ .book-menu-content {
+ width: 16rem;
+ position: sticky;
+ top: var(--header-height);
+ bottom: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: var(--global-background-color);
+ transition: .2s ease-in-out;
+
+ h3 {
+ margin: 1rem 0;
+ border-bottom: none;
+ padding-left: .5rem;
+ }
+
+ input.toggle ~ .icon::after {
+ display: inline-block;
+ font: 1rem FontAwesome;
+ text-rendering: auto;
+ content: "\f105";
+ }
+
+ input.toggle:checked ~ .icon::after {
+ display: inline-block;
+ font: 1rem FontAwesome;
+ text-rendering: auto;
+ content: "\f107";
+ }
+
+ input.toggle ~ ul {
+ display:none
+ }
+
+ input.toggle:checked ~ ul {
+ display:block
+ }
+
+ #MenuContents {
+ position: sticky;
+ overflow: auto;
+ max-height: calc(90vh);
+
+ ul {
+ margin: 0 0 0 .75rem;
+ padding: 0;
+
+ li {
+ list-style: none;
+ margin: 0;
+
+ label {
+ position: absolute;
+ cursor: pointer;
+ }
+
+ a {
+ color: var(--global-font-color);
+ display: block;
+ padding-left: 1rem;
+ }
+ }
+ }
+ }
+ }
+ }
+
.book {
flex-grow: 1;
padding: var(--documentation-padding);
@@ -168,6 +240,10 @@
transition-duration: 0.2s;
background-color: var(--global-background-color);
+ h1 {
+ margin: .8rem 0;
+ }
+
.book-menu-mobile {
margin-top: 10px;
@@ -225,32 +301,35 @@
h3 {
border-bottom: none;
+ margin: 1rem 0;
}
#TableOfContents {
position: sticky;
overflow: auto;
max-height: calc(90vh);
- }
-
- #TableOfContents, .resources {
+
ul {
- list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
+ list-style: none;
a {
color: var(--global-font-color);
display: inline-block;
padding: .25rem 0 .25rem .5rem;
+ margin-left: .5rem;
text-decoration: none;
- border-left: 1px solid var(--lines-color);
+
+ i {
+ margin-right: .5rem;
+ }
&:hover {
- font-weight: bolder;
+ font-weight: 500;
}
}
@@ -259,98 +338,26 @@
}
.resources {
- .contents {
- i {
- margin-right: 5px;
- }
+ h3 {
+ margin: 1rem 0;
}
- }
- }
- }
-
- .book-menu input.toggle+label+ul {
- display:none
- }
- .book-menu input.toggle:checked+label+ul {
- display:block
- }
-
- .book-menu {
- flex: 0 0 16rem;
- font-size: .75rem;
- background-color: var(--global-background-color);
-
- .book-menu-content {
- width: 16rem;
- position: sticky;
- top: var(--header-height);
- bottom: 0;
- overflow-x: hidden;
- overflow-y: auto;
- background-color: var(--global-background-color);
- transition: .2s ease-in-out;
-
- h3 {
- border-bottom: none;
- padding-left: .5rem;
- }
-
- input.toggle + .icon::after {
- display: flex;
- align-items: center;
- font: 1rem FontAwesome;
- text-rendering: auto;
- content: "\f105";
- }
-
- input.toggle:checked + .icon::after {
- display: flex;
- align-items: center;
- font: 1rem FontAwesome;
- text-rendering: auto;
- content: "\f107";
- }
-
- #MenuContents {
- position: sticky;
- overflow: auto;
- max-height: calc(90vh);
ul {
- list-style: none;
margin: 0;
padding: 0;
- padding-right: 10px;
li {
+ list-style: none;
margin: 0;
- label {
- display: flex;
- justify-content: space-between;
- cursor: pointer;
- }
-
a {
color: var(--global-font-color);
- display: flex;
- width: 90%;
+ display: inline-block;
padding: .25rem 0 .25rem .5rem;
- text-decoration: none;
- border-left: 1px solid var(--lines-color);
- font-weight: bolder;
}
- ul {
- li {
- padding-left: 10px;
-
- a {
- font-weight: normal;
- border-left: 3px solid var(--lines-color);
- }
- }
-
+ i {
+ margin-left: 1rem;
}
}
@@ -423,11 +430,6 @@ input.toggle {
z-index: 1;
}
- #menu-control:focus ~ main label[for="menu-control"] {
- outline-style: auto;
- outline-color: currentColor;
- }
-
#menu-control:checked ~ main {
.book-menu {
visibility: initial;
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index 72d1919a12..7446ec9fa6 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/documentation/themes/beastie/assets/styles/global.scss
@@ -38,6 +38,13 @@ html {
}
}
+@supports (scrollbar-width:thin) {
+ body * {
+ scrollbar-width: thin;
+ scrollbar-color: #D9D9D9 transparent;
+ }
+}
+
html, body {
text-rendering: optimizeLegibility;
line-height: calc(1ex / 0.32);
@@ -53,7 +60,6 @@ body {
font-weight: 400;
font-style: normal;
cursor: auto;
- scrollbar-width: thin;
background-color: var(--global-background-color);
}
diff --git a/documentation/themes/beastie/layouts/books/list.html b/documentation/themes/beastie/layouts/books/list.html
index 251a7a625e..8694ff66ac 100644
--- a/documentation/themes/beastie/layouts/books/list.html
+++ b/documentation/themes/beastie/layouts/books/list.html
@@ -85,7 +85,7 @@
<ul class="contents">
<!--<li><a href="#"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>{{ i18n "download-pdf" }}</a></li>-->
{{ $editUrl := printf "%s%s/%s" $.Site.Params.editBaseUrl $.Site.Home.Language .Page.File }}
- <li><a href="{{ $editUrl }}" target="_blank"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>{{ i18n "edit-page" }}</a></li>
+ <li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="{{ $editUrl }}" target="_blank">{{ i18n "edit-page" }}</a></li>
</ul>
</div>
</div>
diff --git a/documentation/themes/beastie/layouts/books/single.html b/documentation/themes/beastie/layouts/books/single.html
index 251a7a625e..8694ff66ac 100644
--- a/documentation/themes/beastie/layouts/books/single.html
+++ b/documentation/themes/beastie/layouts/books/single.html
@@ -85,7 +85,7 @@
<ul class="contents">
<!--<li><a href="#"><i class="fa fa-file-pdf-o" aria-hidden="true"></i>{{ i18n "download-pdf" }}</a></li>-->
{{ $editUrl := printf "%s%s/%s" $.Site.Params.editBaseUrl $.Site.Home.Language .Page.File }}
- <li><a href="{{ $editUrl }}" target="_blank"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>{{ i18n "edit-page" }}</a></li>
+ <li><i class="fa fa-pencil-square-o" aria-hidden="true"></i><a href="{{ $editUrl }}" target="_blank">{{ i18n "edit-page" }}</a></li>
</ul>
</div>
</div>
diff --git a/documentation/themes/beastie/layouts/partials/menu.html b/documentation/themes/beastie/layouts/partials/menu.html
index 4c4261ef52..1d118e85e4 100644
--- a/documentation/themes/beastie/layouts/partials/menu.html
+++ b/documentation/themes/beastie/layouts/partials/menu.html
@@ -10,11 +10,10 @@
{{ $toc = replace $toc "</nav>" "" }}
<input type="checkbox" id="chapter-{{ md5 .Page }}" class="toggle" {{ if eq .Page.Permalink $.Permalink }} checked {{ end }} />
- <label {{ if gt (len $toc) 0 }} class="icon" {{ end }} for="chapter-{{ md5 .Page }}">
- <a {{ if eq (len $toc) 0 }} href="{{ .Page.Permalink }}" {{ else }} role="button" {{ end }} class="cursor" >
- <span>{{ .Page.Title }}</span>
- </a>
- </label>
+ <label {{ if gt (len $toc) 0 }} class="icon cursor" {{ end }} for="chapter-{{ md5 .Page }}"><a role="button"></a></label>
+ <a href="{{ .Page.Permalink }}">
+ {{ .Page.Title }}
+ </a>
{{ $toc = replace $toc "#" $finalPath }}
{{ $toc | safeHTML }}