fix: mobile nav (#1001)

- Fix broken nav layout on small screens - Update baseof template with latest changes from book theme - Add the ⨎ilecoin logo - fix the in page toc nav
filecoin-project · Jul 22, 2020 · 55ebbe1 · 55ebbe1
1 parent 83227b9
commit 55ebbe1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 45 deletions.
diff --git a/assets/_custom.scss b/assets/_custom.scss
@@ -145,54 +145,28 @@ blockquote {
 }
 
 @media screen and (max-width: 56rem) {
-    .book-page {
-        margin-top: 50px;
+    .toc {
+        text-align: right;
     }
-    .book-header {
-        display: block;
-        position: fixed;
-        width: 100%;
-        height: 50px;
-        padding-left: 12px;
-        padding-right: 12px;
-        line-height: 50px;
-        background-color: #090909;
-        z-index: 20;
-        border-bottom: 1px solid #232323;
-        margin-bottom: 0;
-        aside {
-            p {
-                font-size: 12px;
-                font-weight: 700;
-            }
-            i[class^=gg-] {
-                display: inline-block;
-                margin-left: 0;
-                margin-right: 0;
-                vertical-align: text-top;
-                font-size: 10px;
-                transform: scale(0.7);
-            }
+    .toc-label {
+        margin: 0 0 2rem;
+        font-weight:700;
+        font-size:10px;
+        .gg-menu-motion {
+            display: none;
         }
     }
-    .book-menu nav {
-        z-index: 21;
-    }
-    #toc-control:checked+aside {
-        line-height: 1.15;
-        background-color: #090909;
-        width: 100%;
-        height: auto;
-        position: absolute;
+    .book-header {
+        margin-bottom: 2rem;
     }
 }
 
 .book-toc {
-    p {
+    .toc-label {
         font-size: 10px;
         font-weight: 700;
     }
-    i[class^=gg-] {
+    .gg-menu-motion {
         display: inline-block;
         margin-left: 0;
         margin-right: 0;

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -7,16 +7,17 @@
 </head>
 
 <body dir={{ .Site.Language.LanguageDirection }}>
-  <input type="checkbox" class="hidden" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="menu-control" />
+  <input type="checkbox" class="hidden toggle" id="toc-control" />
   <main class="container flex">
-    <header class="book-header">
-      {{ template "header" . }} <!-- Mobile layout header -->
-    </header>
     <aside class="book-menu">
       {{ template "menu" . }} <!-- Left menu Content -->
     </aside>
 
     <div class="book-page">
+      <header class="book-header">
+        {{ template "header" . }} <!-- Mobile layout header -->
+      </header>
 
       {{ partial "docs/inject/content-before" . }}
       {{ template "main" . }} <!-- Page Content -->
@@ -52,7 +53,6 @@
   {{ partial "docs/header" . }}
 
   {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-    <input type="checkbox" class="hidden" id="toc-control" />
     <aside class="hidden clearfix">
       {{ template "toc" . }}
     </aside>

diff --git a/layouts/partials/docs/header.html b/layouts/partials/docs/header.html
@@ -0,0 +1,17 @@
+<div class="flex align-center justify-between">
+  <label for="menu-control">
+    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
+  </label>
+
+  <a href="{{ .Site.BaseURL | relLangURL }}">
+    <img src="{{ "filecoin-logo.svg" | relURL }}" alt="" style="height:40px;" />
+  </a>
+  <div style="width:24px;">
+    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
+      <label for="toc-control">
+        {{ .Params.BookToC }}
+        <i class="gg-menu-motion" alt="Table of Contents"></i>
+      </label>
+    {{ end }}
+  </div>
+</div>
diff --git a/layouts/partials/docs/toc.html b/layouts/partials/docs/toc.html
@@ -1,4 +1,4 @@
-<div>
-    <p><i class="gg-menu-motion"></i> CONTENTS</p>
+<div class="toc">
+    <p class="toc-label"><i class="gg-menu-motion"></i> CONTENTS</p>
     {{ .TableOfContents }}
 </div>