Merge pull request #849 from gentoo90/sidebar-resize
Add sidebar resize
This commit is contained in:
commit
357ebcf7ce
|
@ -435,6 +435,7 @@ function playpen_text(playpen) {
|
||||||
var sidebar = document.getElementById("sidebar");
|
var sidebar = document.getElementById("sidebar");
|
||||||
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
||||||
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
||||||
|
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
||||||
var firstContact = null;
|
var firstContact = null;
|
||||||
|
|
||||||
function showSidebar() {
|
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) {
|
document.addEventListener('touchstart', function (e) {
|
||||||
firstContact = {
|
firstContact = {
|
||||||
x: e.touches[0].clientX,
|
x: e.touches[0].clientX,
|
||||||
|
|
|
@ -301,8 +301,6 @@ ul#searchresults span.teaser em {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: var(--sidebar-width);
|
width: var(--sidebar-width);
|
||||||
overflow-y: auto;
|
|
||||||
padding: 10px 10px;
|
|
||||||
font-size: 0.875em;
|
font-size: 0.875em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
@ -310,12 +308,39 @@ ul#searchresults span.teaser em {
|
||||||
background-color: var(--sidebar-bg);
|
background-color: var(--sidebar-bg);
|
||||||
color: var(--sidebar-fg);
|
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 */
|
transition: transform 0.3s; /* Animation: slide away */
|
||||||
}
|
}
|
||||||
.sidebar code {
|
.sidebar code {
|
||||||
line-height: 2em;
|
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 {
|
.sidebar-hidden .sidebar {
|
||||||
transform: translateX(calc(0px - var(--sidebar-width)));
|
transform: translateX(calc(0px - var(--sidebar-width)));
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,7 +51,7 @@ a.header:target h4:before {
|
||||||
.page-wrapper {
|
.page-wrapper {
|
||||||
box-sizing: border-box;
|
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 */
|
transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -141,4 +141,3 @@ blockquote {
|
||||||
.tooltipped .tooltiptext {
|
.tooltipped .tooltiptext {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
|
@ -80,7 +80,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||||
{{#toc}}{{/toc}}
|
<div class="sidebar-scrollbox">
|
||||||
|
{{#toc}}{{/toc}}
|
||||||
|
</div>
|
||||||
|
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="page-wrapper" class="page-wrapper">
|
<div id="page-wrapper" class="page-wrapper">
|
||||||
|
|
Loading…
Reference in New Issue