Add a semi-opaque overlay when channel list is open on mobile
This commit is contained in:
parent
cf49a3427e
commit
1e8c0547ec
@ -2273,20 +2273,43 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
z-index: 1;
|
||||
transition: transform 160ms;
|
||||
z-index: 2;
|
||||
transition: transform 160ms, box-shadow 0.2s;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
#sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 160ms;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar {
|
||||
display: flex;
|
||||
transform: translate3d(220px, 0, 0);
|
||||
}
|
||||
|
||||
#viewport.menu-dragging #sidebar-overlay,
|
||||
#viewport.menu-dragging #sidebar {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar,
|
||||
#viewport.menu-dragging #sidebar {
|
||||
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#viewport.menu-open .messages {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
@ -44,6 +44,7 @@
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
|
||||
</footer>
|
||||
</aside>
|
||||
<div id="sidebar-overlay"></div>
|
||||
<article id="windows">
|
||||
<div id="loading" class="window active">
|
||||
<div id="loading-status-container">
|
||||
|
@ -2,6 +2,7 @@
|
||||
|
||||
const viewport = document.getElementById("viewport");
|
||||
const menu = document.getElementById("sidebar");
|
||||
const sidebarOverlay = document.getElementById("sidebar-overlay");
|
||||
|
||||
let touchStartPos = null;
|
||||
let touchCurPos = null;
|
||||
@ -70,6 +71,7 @@ function onTouchMove(e) {
|
||||
}
|
||||
|
||||
menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
|
||||
sidebarOverlay.style.opacity = setX / menuWidth;
|
||||
|
||||
if (menuIsMoving) {
|
||||
e.preventDefault();
|
||||
@ -89,6 +91,7 @@ function onTouchEnd() {
|
||||
document.body.removeEventListener("touchend", onTouchEnd);
|
||||
viewport.classList.toggle("menu-dragging", false);
|
||||
menu.style.transform = null;
|
||||
sidebarOverlay.style.opacity = null;
|
||||
|
||||
touchStartPos = null;
|
||||
touchCurPos = null;
|
||||
|
Loading…
Reference in New Issue
Block a user