supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a semi-opaque overlay when channel list is open on mobile

Browse Source
This commit is contained in:
Jérémie Astori 2018-03-17 03:13:43 -04:00
parent cf49a3427e
commit 1e8c0547ec
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
3 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/css/style.css
View File

@ -2273,20 +2273,43 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
height: 100%; height: 100%;
position: absolute; position: absolute;
left: -220px; left: -220px;
z-index: 1; z-index: 2;
transition: transform 160ms; transition: transform 160ms, box-shadow 0.2s;
transform: translateZ(0); 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 { #viewport.menu-open #sidebar {
display: flex; display: flex;
transform: translate3d(220px, 0, 0); transform: translate3d(220px, 0, 0);
} }
#viewport.menu-dragging #sidebar-overlay,
#viewport.menu-dragging #sidebar { #viewport.menu-dragging #sidebar {
transition: none !important; 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 { #viewport.menu-open .messages {
pointer-events: none; pointer-events: none;
} }

1
client/index.html.tpl
View File

@ -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> <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> </footer>
</aside> </aside>
<div id="sidebar-overlay"></div>
<article id="windows"> <article id="windows">
<div id="loading" class="window active"> <div id="loading" class="window active">
<div id="loading-status-container"> <div id="loading-status-container">

3
client/js/slideout.js
View File

@ -2,6 +2,7 @@
const viewport = document.getElementById("viewport"); const viewport = document.getElementById("viewport");
const menu = document.getElementById("sidebar"); const menu = document.getElementById("sidebar");
const sidebarOverlay = document.getElementById("sidebar-overlay");
let touchStartPos = null; let touchStartPos = null;
let touchCurPos = null; let touchCurPos = null;
@ -70,6 +71,7 @@ function onTouchMove(e) {
} }
menu.style.transform = "translate3d(" + setX + "px, 0, 0)"; menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
sidebarOverlay.style.opacity = setX / menuWidth;
if (menuIsMoving) { if (menuIsMoving) {
e.preventDefault(); e.preventDefault();
@ -89,6 +91,7 @@ function onTouchEnd() {
document.body.removeEventListener("touchend", onTouchEnd); document.body.removeEventListener("touchend", onTouchEnd);
viewport.classList.toggle("menu-dragging", false); viewport.classList.toggle("menu-dragging", false);
menu.style.transform = null; menu.style.transform = null;
sidebarOverlay.style.opacity = null;
touchStartPos = null; touchStartPos = null;
touchCurPos = null; touchCurPos = null;