feat: improve mobile experience (#1145)

filecoin-project · Sep 7, 2020 · ac0c824 · ac0c824
1 parent 7af8f8c
commit ac0c824
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 75 deletions.
diff --git a/assets/_code.scss b/assets/_code.scss
@@ -1,5 +1,13 @@
 .markdown pre {
-    // max-height: 450px;
-    // overflow: auto;
-
+    max-height: 450px;
+    overflow: auto;
+}
+
+.markdown code, code {
+    margin: 0 1px;
+    padding: 3px 6px;
+    font-size: 85%;
+    border-radius: 3px;
+    line-height: 16px;
+    box-decoration-break: clone;
 }
diff --git a/assets/_custom.scss b/assets/_custom.scss
@@ -16,12 +16,18 @@
 @import "icons";
 @import "code";
 
+input.toggle {
+    height: 20px;
+    width: 20px;
+    overflow: hidden;
+    opacity: 1;
+    position: fixed;
+    visibility: hidden;
+}
+
 
 .markdown {
-    overflow-x: hidden;
     h1, h2, h3, h4, h5, h6 {
-        padding-top: 1.5rem;
-        margin-bottom: 1rem;
         a {
             color: inherit;
             text-decoration: none;
@@ -110,15 +116,8 @@ html {
     touch-action: auto;
 }
 .container {
-    max-width: 89rem;
-}
-.book-menu {
-    flex: 0 0 20rem;
-}
-.book-page {
-    padding-top: 0rem;
-    padding-left: 2rem;
-    max-width: 52rem;
+    margin-left: 20rem;
+    overflow-x: hidden;
 }
 
 summary {
@@ -129,51 +128,76 @@ blockquote {
     overflow: auto;
 }
 
+.book-page {
+    max-width: 52rem;
+    margin: 0 auto;
+}
 .book-menu nav {
     width: 20rem;
-    height: 100%;
-    padding: 1rem 0.2rem 1rem 1rem;
-    position: fixed;
-    top: 0;
-    bottom: 0;
     overflow: hidden;
 }
+
 .book-menu > nav > ul {
     height: 90vh;
     overflow: auto;
 }
 
-.markdown>h1:first-of-type {
-    margin-top: 0;
-}
-
-.markdown code, code {
-    margin: 0 1px;
-    padding: 3px 6px;
-    font-size: 85%;
-    border-radius: 3px;
-    line-height: 16px;
-    box-decoration-break: clone;
-}
 .book-brand img {
     height: 40px;
     width: auto;
     vertical-align: middle;
     margin-inline-end: .5rem;
 }
 
+.book-header label {
+    height: 43px;
+    width: 43px;
+    display: flex;
+    align-items: center;
+}
+
+
+.book-menu {
+    position: fixed;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 20rem;
+    visibility: initial;
+    margin-inline-start: initial;
+    transition: 0.2s ease-in-out;
+    transition-property: transform;
+    will-change: transform;
+}
 
 @media screen and (max-width: 56rem) {
-    .book-page {
-        padding-left:1rem;
+    .container {
+        margin-left: 0;
     }
     .book-menu {
-        visibility: hidden;
-        margin-inline-start: -20rem;
+        transform: translateX(-20rem);
     }
-    #menu-control:checked~main .book-menu nav {
-        transform: translateX(20rem);
+    #menu-control:checked~main .book-page {
+        opacity: initial;
+    }
+
+    #menu-control:checked~.book-menu {
+        transform: translateX(0);
+        box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1);
     }
+
+    #menu-control:checked~.book-menu-overlay {
+        display: block;
+        position: fixed;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, 0.4);
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+
     .toc-label {
         font-weight:700;
         font-size:10px;

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -60,4 +60,14 @@ window.addEventListener('DOMContentLoaded', () => {
   });
   document.querySelectorAll('.math-mode').forEach(img => { observer.observe(img) });
 
+  const toggle = document.querySelector('#menu-control')
+
+  toggle.addEventListener('click', (e) => {
+    if(e.target.checked) {
+      document.body.classList.add('lightbox-body-scroll-stop')
+    } else {
+      document.body.classList.remove('lightbox-body-scroll-stop')
+    }
+  })
+
 });
diff --git a/layouts/partials/docs/brand.html → layouts/partials/single/brand.html b/layouts/partials/docs/brand.html → layouts/partials/single/brand.html
diff --git a/layouts/partials/docs/header.html → layouts/partials/single/header.html b/layouts/partials/docs/header.html → layouts/partials/single/header.html
diff --git a/layouts/partials/single/inject/body.html b/layouts/partials/single/inject/body.html
@@ -1,6 +1,7 @@
 {{ $opts := dict "targetPath" "main.js" "minify" "true" }}
 {{ $js := resources.Get "js/main.js" | js.Build $opts}}
 <script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+
 {{ if ne .Site.IsServer true }}
-<pwa-update swpath="{{ "/sw.js" | relURL }}" ></pwa-update>
+    <pwa-update swpath="{{ "/sw.js" | relURL }}" ></pwa-update>
 {{end}}
diff --git a/layouts/partials/single/menu.html b/layouts/partials/single/menu.html
@@ -1,15 +1,5 @@
 <nav>
-    {{ partial "docs/brand" . }}
+    {{ partial "single/brand" . }}
 
-    {{ partial "docs/inject/menu-before" . }}
-    {{ partial "docs/menu-hugo" .Site.Menus.before }}
-
-    {{ if .Site.Params.BookMenuBundle }}
-      {{ partial "docs/menu-bundle" . }}
-    {{ else }}
-      {{ partial "single/menu-single" . }}
-    {{ end }}
-
-    {{ partial "docs/menu-hugo" .Site.Menus.after }}
-    {{ partial "docs/inject/menu-after" . }}
+    {{ partial "single/menu-single" . }}
 </nav>
diff --git a/layouts/single/baseof.html b/layouts/single/baseof.html
@@ -3,45 +3,32 @@
 
 <head>
   {{ partial "single/html-head" . }}
-  {{ partial "docs/inject/head" . }}
 </head>
 
 <body dir={{ .Site.Language.LanguageDirection }}>
   <input type="checkbox" class="hidden toggle" id="menu-control" />
+
   <header class="book-header">
     {{ template "header" . }} <!-- Mobile layout header -->
   </header>
+
+  <aside class="book-menu">
+    {{ template "menu" . }} <!-- Left menu Content -->
+  </aside>
+
   <main class="container flex">
-    <aside class="book-menu">
-      {{ template "menu" . }} <!-- Left menu Content -->
-    </aside>
 
     <div class="book-page">
-      {{ partial "docs/inject/content-before" . }}
       {{ template "main" . }} <!-- Page Content -->
-      {{ partial "docs/inject/content-after" . }}
 
-      <footer class="book-footer">
+      {{/*  <footer class="book-footer">
         {{ template "footer" . }} <!-- Footer under page content -->
-        {{ partial "docs/inject/footer" . }}
-      </footer>
+      </footer>  */}}
 
-      <label for="menu-control" class="hidden book-menu-overlay"></label>
     </div>
-
-
-    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-    <aside class="book-toc">
-      <div class="book-toc-toggles">
-        <label class="dark-mode-toggle-label" for="dark-mode-toggle">
-          <i class="gg-dark-mode"></i> DARK MODE
-        </label>
-        <button id="dark-mode-toggle" class="dark-mode-toggle toggle" type="button" aria-pressed="false"></button>
-      </div>
-    </aside>
-    {{ end }}
   </main>
-
+
+  <label for="menu-control" class="hidden book-menu-overlay"></label>
   {{ partial "single/inject/body" . }}
 </script>
 </body>
@@ -53,7 +40,7 @@
 {{ end }}
 
 {{ define "header" }}
-  {{ partial "docs/header" . }}
+  {{ partial "single/header" . }}
 {{ end }}
 
 {{ define "footer" }}