Disable text selection and CSS transition while resizing sidebar

This commit is contained in:
gentoo90 2018-12-12 21:43:02 +02:00
parent 3d37e24c14
commit 3d8db7f25c
3 changed files with 11 additions and 4 deletions

View file

@ -480,12 +480,14 @@ function playpen_text(playpen) {
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);
}

View file

@ -308,7 +308,13 @@ 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 {

View file

@ -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;
}