diff --git a/src/theme/book.js b/src/theme/book.js index c2b1b0f2..943e0a1b 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -435,6 +435,7 @@ function playpen_text(playpen) { var sidebar = document.getElementById("sidebar"); var sidebarLinks = document.querySelectorAll('#sidebar a'); var sidebarToggleButton = document.getElementById("sidebar-toggle"); + var sidebarResizeHandle = document.getElementById("sidebar-resize-handle"); var firstContact = null; function showSidebar() { @@ -474,6 +475,23 @@ function playpen_text(playpen) { } }); + sidebarResizeHandle.addEventListener('mousedown', initResize, false); + + function initResize(e) { + window.addEventListener('mousemove', resize, false); + window.addEventListener('mouseup', stopResize, false); + html.classList.add('sidebar-resizing'); + } + function resize(e) { + document.documentElement.style.setProperty('--sidebar-width', (e.clientX - sidebar.offsetLeft) + 'px'); + } + //on mouseup remove windows functions mousemove & mouseup + function stopResize(e) { + html.classList.remove('sidebar-resizing'); + window.removeEventListener('mousemove', resize, false); + window.removeEventListener('mouseup', stopResize, false); + } + document.addEventListener('touchstart', function (e) { firstContact = { x: e.touches[0].clientX, diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css index 7459fc78..db4970b6 100644 --- a/src/theme/css/chrome.css +++ b/src/theme/css/chrome.css @@ -78,7 +78,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta display: flex; margin: 0 5px; } -.no-js .left-buttons { +.no-js .left-buttons { display: none; } @@ -145,7 +145,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta display: none; } -.mobile-nav-chapters { +.mobile-nav-chapters { font-size: 2.5em; text-align: center; text-decoration: none; @@ -301,8 +301,6 @@ ul#searchresults span.teaser em { top: 0; bottom: 0; width: var(--sidebar-width); - overflow-y: auto; - padding: 10px 10px; font-size: 0.875em; box-sizing: border-box; -webkit-overflow-scrolling: touch; @@ -310,12 +308,39 @@ ul#searchresults span.teaser em { background-color: var(--sidebar-bg); color: var(--sidebar-fg); } -.js .sidebar { +.sidebar-resizing { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} +.js:not(.sidebar-resizing) .sidebar { transition: transform 0.3s; /* Animation: slide away */ } .sidebar code { line-height: 2em; } +.sidebar .sidebar-scrollbox { + overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + padding: 10px 10px; +} +.sidebar .sidebar-resize-handle { + position: absolute; + cursor: col-resize; + width: 0; + right: 0; + top: 0; + bottom: 0; +} +.js .sidebar .sidebar-resize-handle { + cursor: col-resize; + width: 5px; +} .sidebar-hidden .sidebar { transform: translateX(calc(0px - var(--sidebar-width))); } @@ -368,7 +393,7 @@ ul#searchresults span.teaser em { background-color: var(--sidebar-spacer); } -@media (-moz-touch-enabled: 1), (pointer: coarse) { +@media (-moz-touch-enabled: 1), (pointer: coarse) { .chapter li a { padding: 5px 0; } .spacer { margin: 10px 0; } } diff --git a/src/theme/css/general.css b/src/theme/css/general.css index aedfb332..f0aefa2a 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -30,7 +30,7 @@ h4, h5 { margin-top: 2em; } .header + .header h3, .header + .header h4, -.header + .header h5 { +.header + .header h5 { margin-top: 1em; } @@ -51,7 +51,7 @@ a.header:target h4:before { .page-wrapper { box-sizing: border-box; } -.js .page-wrapper { +.js:not(.sidebar-resizing) .page-wrapper { transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ } @@ -141,4 +141,3 @@ blockquote { .tooltipped .tooltiptext { visibility: visible; } - \ No newline at end of file diff --git a/src/theme/index.hbs b/src/theme/index.hbs index bfe4283a..cce561f6 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -61,7 +61,7 @@