add docs mobile style

550331e7 · edisonxiang · ec49b854 · 550331e7 · 550331e7 · 550331e7
6 changed file
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -36,4 +36,7 @@ other = "News"
 [404_title]
 other = "Page Not Found"
 [404_homepage]
-other = "Go to Homepage"
\ No newline at end of file
+other = "Go to Homepage"
+
+[docs_nav_menu_name]
+other = "MENU"
\ No newline at end of file
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@@ -37,3 +37,6 @@ other = "新闻"
 other = "没有找到页面"
 [404_homepage]
 other = "返回主页"
+
+[docs_nav_menu_name]
+other = "目录"
\ No newline at end of file
--- a/themes/project/layouts/docs/baseof.html
+++ b/themes/project/layouts/docs/baseof.html
 <!DOCTYPE html>
 <html lang="{{ .Site.Language.Lang }}">

-  {{ partial "head.html" . }}
-  {{ partial "docs/html-head" . }}
-  {{ partial "docs/inject/head" . }}
+{{ partial "head.html" . }}
+{{ partial "docs/html-head" . }}
+{{ partial "docs/inject/head" . }}
+
 <body>
  <div id="all">

@@ -18,20 +19,23 @@
    <div id="content">
      <div class="container">
        <input type="checkbox" style="display: none" id="menu-control" />
+        <div class="slide_nav" id="slideNav">
+          <img src="/svg/menu.svg" alt="Menu"><p>{{ i18n "docs_nav_menu_name" }}</p>
+        </div>
        <main class="flex container">

-            <aside class="book-menu fixed">
-              {{ partial "docs/menu" . }}
-            </aside>
+          <aside class="book-menu fixed" id="menu">
+            {{ partial "docs/menu" . }}
+          </aside>

-            <div class="book-page">
-              {{ partial "docs/mobile-header" . }}
-              {{ template "main" . }}
-              {{ partial "docs/git-footer" . }}
-              {{ partial "docs/inject/footer" . }}
-            </div>
+          <div class="book-page" id="page">
+            <!-- {{ partial "docs/mobile-header" . }} -->
+            {{ template "main" . }}
+            {{ partial "docs/git-footer" . }}
+            {{ partial "docs/inject/footer" . }}
+          </div>

-            {{ template "toc" . }}
+          {{ template "toc" . }}
        </main>

        {{ partial "docs/inject/body" . }}
@@ -42,4 +46,4 @@
  {{ partial "scripts.html" . }}
 </body>

-</html>
+</html>
\ No newline at end of file
--- a/themes/project/layouts/partials/scripts.html
+++ b/themes/project/layouts/partials/scripts.html
@@ -31,5 +31,23 @@
                location.href = data.node.a_attr.href;
            });
        }
+        function showNav() {
+            $('#menu').css({
+                "transform": "translateX(0)"
+            }).attr("onoff", "on");
+        }
+        function hideNav() {
+            $('#menu').css({
+                "transform": "translateX(-100%)"
+            }).attr("onoff", "off");
+        }
+
+        $("#slideNav").bind('click' ,function(){
+            if ($('#menu').attr("onoff") == "on") {
+                hideNav();
+            } else {
+                showNav();
+            }
+        })
    });
 </script>
\ No newline at end of file
--- a/themes/project/static/css/custom.css
+++ b/themes/project/static/css/custom.css
@@ -513,6 +513,10 @@ footer .notice span {
  display: none;
 }

+#slideNav{
+  display: none;
+}
+
 html,
 body {
  position: relative;

--- a/themes/project/static/css/custommobile.css
+++ b/themes/project/static/css/custommobile.css
@@ -66,13 +66,13 @@
  }
  header #nav {
    position: absolute;
-    top: 53px;
+    top: 51px;
    left: 0;
    width: 100%;
    display: none;
    background: #fff;
    color: #333;
-    z-index: 100;
+    z-index: 1000;
    padding: 0 .3rem;
    box-shadow: 0 5px 10px 0 #D3D3D3;
  }
@@ -176,6 +176,44 @@
  .bannernew .cards ul li img {
    height: 30px;
  }
+
+
+/* doc_nav */
+#heading-breadcrumbs{
+  margin-bottom: 20px;
+}
+.container{
+  position: relative;
+  padding: 0;
+}
+.slide_nav {
+  display: flex !important;
+  align-items: center;
+  padding: 10px 15px 5px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #b5b5b5;
+}
+.slide_nav p {
+  margin: 0;
+}
+
+.book-menu {
+  position: absolute;
+  width: 100%;
+  z-index: 100;
+  background: #fff;
+  top: 0;
+  left: 0;
+  padding: 0 15px;
+  transition: .3s;
+  transform: translateX(-100%);
+}
+
+.container div.book-page {
+  margin-left: 0;
+  padding: 0 15px;
+}
+
  .reason {
    padding: 6.7rem .6rem .6rem;
  }