From df4b1d56138315ae0b15531712c66c98b8baeac0 Mon Sep 17 00:00:00 2001 From: dojutsu-user Date: Sun, 4 Nov 2018 21:51:11 +0530 Subject: [PATCH 01/10] Make sidebar slide in and slide out --- sass/_theme_badge.sass | 5 ++++- sass/_theme_layout.sass | 10 ++++++++-- sass/_theme_variables.sass | 5 +++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/sass/_theme_badge.sass b/sass/_theme_badge.sass index f2f04894d..1ad8b6b8f 100644 --- a/sass/_theme_badge.sass +++ b/sass/_theme_badge.sass @@ -85,6 +85,9 @@ +media($tablet) .rst-versions width: 85% - display: none + transform: $sidebar-transform-hide + transition: $sidebar-transition &.shift display: block + transform: $sidebar-transform-show + transition: $sidebar-transition diff --git a/sass/_theme_layout.sass b/sass/_theme_layout.sass index 421fe5b92..a99a78467 100644 --- a/sass/_theme_layout.sass +++ b/sass/_theme_layout.sass @@ -370,12 +370,15 @@ footer display: block .wy-nav-side @if $nav-desktop-position == left - left: -$nav-desktop-width + transform: $sidebar-transform-hide + transition: $sidebar-transition @else right: -$nav-desktop-width &.shift width: 85% left: 0 + transform: $sidebar-transform-show + transition: $sidebar-transition .wy-side-scroll width: auto .wy-side-nav-search @@ -384,15 +387,18 @@ footer width: auto .wy-nav-content-wrap margin-left: 0 + transform: $sidebar-transform-show + transition: $sidebar-transition .wy-nav-content padding: $gutter &.shift position: fixed min-width: 100% - left: 85% top: 0 height: 100% overflow: hidden + transform: translateX(85%) + transition: $sidebar-transition @media screen and (min-width: $nav-media-query) .wy-nav-content-wrap diff --git a/sass/_theme_variables.sass b/sass/_theme_variables.sass index 6361ad0f1..b9685ce66 100644 --- a/sass/_theme_variables.sass +++ b/sass/_theme_variables.sass @@ -52,6 +52,11 @@ $nav-link-color-visited: $purple $nav-link-color-hover: lighten($nav-link-color, 6%) !default $nav-link-color-alt: hsl(33, 100%, 51%) +// Sidebar +$sidebar-transform-hide: translateX(-100%) +$sidebar-transform-show: translateX(0%) +$sidebar-transition: transform 0.3s ease + // Sidebar colors $sidebar-background-color: $table-stripe-color $sidebar-border-color: $table-border-color From 3eb5328e0f6c8d55ec218e4ac384ab9e62dfdb19 Mon Sep 17 00:00:00 2001 From: dojutsu-user Date: Tue, 6 Nov 2018 12:44:12 +0530 Subject: [PATCH 02/10] Add swiping functionality --- js/theme.js | 30 ++++++++++++++++++++++++++++++ sphinx_rtd_theme/layout.html | 4 ++-- sphinx_rtd_theme/versions.html | 2 +- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/js/theme.js b/js/theme.js index f0cbedf6f..b9498f688 100644 --- a/js/theme.js +++ b/js/theme.js @@ -238,3 +238,33 @@ if (typeof(window) != 'undefined') { clearTimeout(id); }; }()); + +// function for opening/closing sidebar on +// swiping right/close. +(function () { + var start = null; + window.addEventListener("touchstart",function(event){ + if(event.touches.length === 1){ + start = event.touches.item(0).clientX; + } else { + start = null; + } + }); + + window.addEventListener("touchend",function(event){ + var offset = 100; + if(start) { + var end = event.changedTouches.item(0).clientX; + if(end > start + offset) { + document.getElementById("shift-nav-side").classList.add("shift"); + document.getElementById("shift-nav-content-side").classList.add("shift"); + document.getElementById("rst-versions-id").classList.add("shift"); + } + if(end < start - offset ){ + document.getElementById("shift-nav-side").classList.remove("shift"); + document.getElementById("shift-nav-content-side").classList.remove("shift"); + document.getElementById("rst-versions-id").classList.remove("shift"); + } + } + }); +}()) \ No newline at end of file diff --git a/sphinx_rtd_theme/layout.html b/sphinx_rtd_theme/layout.html index 7d9a25df4..f01d419b5 100644 --- a/sphinx_rtd_theme/layout.html +++ b/sphinx_rtd_theme/layout.html @@ -86,7 +86,7 @@
{# SIDE NAV, TOGGLES ON MOBILE #} -