git: 97c1f5601c - main - Rework book menu

The branch main has been updated by carlavilla:

URL: https://cgit.FreeBSD.org/doc/commit/?id=97c1f5601c51dbd56796c0b82da9ef60f1f81ff1

commit 97c1f5601c51dbd56796c0b82da9ef60f1f81ff1
Author:     Sergio Carlavilla Delgado <[email protected]>
AuthorDate: 2021-12-29 13:35:36 +0000
Commit:     Sergio Carlavilla Delgado <[email protected]>
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 }}