From 19bf043cf80db134211857bfabd68bdeb6ce7e88 Mon Sep 17 00:00:00 2001 From: "cinwell.li" Date: Tue, 29 Nov 2016 23:09:59 +0800 Subject: [PATCH 0001/1006] Fix sidebar animation (#14) --- 404.dev.html | 2 +- CHANGELOG.md | 6 +++++ src/event.js | 9 +++++-- themes/buble.css | 65 +++++++++++++++++++++++++++------------------ themes/pure.css | 62 ++++++++++++++++++++++++++----------------- themes/vue.css | 68 +++++++++++++++++++++++++++++------------------- 6 files changed, 132 insertions(+), 80 deletions(-) diff --git a/404.dev.html b/404.dev.html index 81e930d..a2b9bee 100644 --- a/404.dev.html +++ b/404.dev.html @@ -8,5 +8,5 @@
- + diff --git a/CHANGELOG.md b/CHANGELOG.md index ea38ec9..25575c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.6.1 +### Bug fixes +- In the mobile, it should collapse the sidebar when toggle is clicked. +- Fix the dropdown list style. +- Fix sidebar animation. + ## 0.6.0 ### Features - Navbar support dropdown list, #6 diff --git a/src/event.js b/src/event.js index 357c64c..1b20b36 100644 --- a/src/event.js +++ b/src/event.js @@ -77,7 +77,12 @@ export function activeLink (dom, activeParent) { export function bindToggle (dom) { dom = typeof dom === 'object' ? dom : document.querySelector(dom) if (!dom) return - const main = document.querySelector('main') + const body = document.body - dom.addEventListener('click', () => main.classList.toggle('close')) + dom.addEventListener('click', () => body.classList.toggle('close')) + + if (!/mobile/i.test(navigator.userAgent)) return + document.querySelector('aside').addEventListener('click', event => { + body.classList.toggle('close') + }) } diff --git a/themes/buble.css b/themes/buble.css index 725a087..78debb3 100644 --- a/themes/buble.css +++ b/themes/buble.css @@ -17,7 +17,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -32,36 +32,41 @@ nav li { } nav li ul { - padding: 0; - max-height: 0; - position: absolute; - top: 24px; background-color: rgba(255, 255, 255, .6); border: 1px solid #0074D9; - right: 0; - overflow: hidden; opacity: 0; - overflow-y: auto; - transition: opacity .3s ease, max-height .5s ease; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } nav li ul li { display: block; -} - -nav li ul a { - display: block; font-size: 14px; margin: 0; padding: 4px 10px; white-space: nowrap; } +nav li ul a { + display: block; + padding: 0; + margin: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -89,7 +94,7 @@ nav a.active { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -132,6 +137,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -154,7 +160,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -221,14 +227,13 @@ main { top: 0; overflow-x: hidden; padding-top: 20px; - transition: left 250ms ease; } -main.close .sidebar { - left: -16em; +body.close .sidebar { + transform: translateX(-16em); } -main.close .content { +body.close .content { left: 0; } @@ -243,21 +248,29 @@ main.close .content { .sidebar { left: -16em; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(16em); } - main.close .content { - left: 16em; + body.close .content { + transform: translateX(16em); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(16em); } } diff --git a/themes/pure.css b/themes/pure.css index b1e7516..031bd0e 100644 --- a/themes/pure.css +++ b/themes/pure.css @@ -15,7 +15,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -30,36 +30,41 @@ nav li { } nav li ul { - padding: 0; - max-height: 0; - position: absolute; - top: 24px; background-color: rgba(255, 255, 255, .6); border: 1px solid #000; - right: 0; - overflow: hidden; opacity: 0; - overflow-y: auto; - transition: opacity .3s ease, max-height .5s ease; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } nav li ul li { display: block; -} - -nav li ul a { - display: block; font-size: 14px; margin: 0; padding: 4px 10px; white-space: nowrap; } +nav li ul a { + display: block; + margin: 0; + padding: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -78,7 +83,7 @@ nav a { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -117,6 +122,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -137,7 +143,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -197,11 +203,11 @@ main { transition: left 250ms ease; } -main.close .sidebar { +body.close .sidebar { left: -300px; } -main.close .content { +body.close .content { left: 0; } @@ -216,21 +222,29 @@ main.close .content { .sidebar { left: -300px; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(300px); } - main.close .content { - left: 300px; + body.close .content { + transform: translateX(300px); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(300px); } } diff --git a/themes/vue.css b/themes/vue.css index e192351..e2468f7 100644 --- a/themes/vue.css +++ b/themes/vue.css @@ -17,7 +17,7 @@ nav { right: 0; left: 0; z-index: 10; - margin: 25px 60px 0 0; + margin: 15px 60px 0 0; text-align: right; } @@ -29,39 +29,45 @@ nav ul, nav li { /* navbar dropdown */ nav li { position: relative; + display: inline-block; } nav li ul { - padding: 0; - max-height: 0; - position: absolute; - top: 24px; background-color: rgba(255, 255, 255, .6); border: 1px solid #42b983; - right: 0; - overflow: hidden; opacity: 0; - overflow-y: auto; - transition: opacity .3s ease, max-height .5s ease; + overflow: hidden; + padding: 0; + position: absolute; + right: 0; + top: 26px; + transform-origin: 100% 0%; + transform: scale(1, 0); + transition: opacity .4s ease-out, transform .2s ease; + transition-delay: .3s; } nav li:hover ul { opacity: 1; - max-height: 100px; + transform: scale(1, 1); + transition: opacity .4s ease, transform .2s ease-out; + transition-delay: 0; } nav li ul li { display: block; -} - -nav li ul a { - display: block; font-size: 14px; margin: 0; padding: 4px 10px; white-space: nowrap; } +nav li ul a { + display: block; + padding: 0; + margin: 0; +} + nav li ul a.active { border-bottom: 0; } @@ -89,7 +95,7 @@ nav a.active { position: absolute; top: 0; right: 0; - z-index: 10; + z-index: 1; } .github-corner svg { @@ -131,6 +137,7 @@ body { font-size: 15px; letter-spacing: 0; margin: 0; + overflow-x: hidden; } /* main */ @@ -153,7 +160,7 @@ main { z-index: 1; padding-top: 40px; left: 0; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } .sidebar ul { @@ -217,21 +224,20 @@ main { /* main content */ .content { bottom: 0; - left: 300px; overflow-y: auto; + left: 300px; position: absolute; right: 0; top: 0; overflow-x: hidden; padding-top: 20px; - transition: left 250ms ease; } -main.close .sidebar { - left: -300px; +body.close .sidebar { + transform: translateX(-300px); } -main.close .content { +body.close .content { left: 0; } @@ -246,21 +252,29 @@ main.close .content { .sidebar { left: -300px; - transition: left 250ms ease; + transition: transform 250ms ease; } .content { left: 0; min-width: 100vw; - transition: left 250ms ease-out; + transition: transform 250ms ease-out; } - main.close .sidebar { - left: 0; + body.close .sidebar { + transform: translateX(300px); } - main.close .content { - left: 300px; + body.close .content { + transform: translateX(300px); + } + nav, .github-corner { + transition: transform 250ms ease-out; + } + + body.close nav, + body.close .github-corner { + transform: translateX(300px); } } From 4d56be2f103de0a756db1334a2569c5799d1ce18 Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Tue, 29 Nov 2016 23:11:12 +0800 Subject: [PATCH 0002/1006] bump 0.6.1 --- lib/docsify.js | 9 +++++++-- lib/docsify.min.js | 2 +- lib/themes/buble.css | 2 +- lib/themes/pure.css | 2 +- lib/themes/vue.css | 2 +- 5 files changed, 11 insertions(+), 6 deletions(-) diff --git a/lib/docsify.js b/lib/docsify.js index 205b863..82602b9 100644 --- a/lib/docsify.js +++ b/lib/docsify.js @@ -2295,9 +2295,14 @@ function activeLink (dom, activeParent) { function bindToggle (dom) { dom = typeof dom === 'object' ? dom : document.querySelector(dom); if (!dom) { return } - var main = document.querySelector('main'); + var body = document.body; - dom.addEventListener('click', function () { return main.classList.toggle('close'); }); + dom.addEventListener('click', function () { return body.classList.toggle('close'); }); + + if (!/mobile/i.test(navigator.userAgent)) { return } + document.querySelector('aside').addEventListener('click', function (event) { + body.classList.toggle('close'); + }); } var renderTo = function (dom, content) { diff --git a/lib/docsify.min.js b/lib/docsify.min.js index a65548f..e26ff41 100644 --- a/lib/docsify.min.js +++ b/lib/docsify.min.js @@ -1 +1 @@ -var Docsify=function(){"use strict";function e(e,t){void 0===t&&(t="get");var n=new XMLHttpRequest;return n.open(t,e),n.send(),{then:function(e,t){void 0===t&&(t=function(){}),n.addEventListener("error",t),n.addEventListener("load",function(n){var r=n.target;r.status>=400?t(r):e(r.response)})}}}function t(e,t){var n=[],r={};return e.forEach(function(e){var i=e.level||1,a=i-1;i>t||(r[a]?(r[a].children=r[a].children||[],r[a].children.push(e)):n.push(e),r[i]=e)}),n}function n(e){return e.replace(/([A-Z])/g,function(e){return"-"+e.toLowerCase()})}function r(e){return null===e||void 0===e}function i(e,t){return t={exports:{}},e(t,t.exports),t.exports}function a(e){return e?(/\/\//.test(e)||(e="https://github.com/"+e),e=e.replace(/^git\+/,""),'\n \n \n '):""}function s(){return'
\n \n
\n
\n
\n
'}function o(e){return e?'':""}function l(e,t){return void 0===t&&(t=""),e&&e.length?(e.forEach(function(e){t+='
  • '+e.title+"
    • ",e.children&&(t+='
    • '+l(e.children)+"
    ")}),t):""}function u(){function e(){for(var e=0,t=n.length;e10){var o=r[i.id];if(!o)return;if(o===a)return;return a&&a.setAttribute("class",""),o.setAttribute("class","active"),void(a=o)}}}function t(){var e=window.location.hash.slice(1);if(e){var t=document.querySelector("#"+e);t&&t.scrollIntoView()}}if(!/mobile/i.test(navigator.userAgent)){for(var n=document.querySelectorAll(".anchor"),r={},i=document.querySelectorAll(".sidebar li"),a=null,s=0,o=i.length;s"):(e=l(t(v,n.maxLevel),"