Make menu state consistent on desktop and mobile; fix sliding on desktop
Fixes #2572
This commit is contained in:
parent
d5f0a2481f
commit
cdebd532ce
@ -515,9 +515,14 @@ kbd {
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sidebar .scrollable-area {
|
||||
@ -541,11 +546,6 @@ kbd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar {
|
||||
display: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#sidebar .chan,
|
||||
#sidebar .empty {
|
||||
color: #b7c5d1;
|
||||
@ -2340,6 +2340,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
background: var(--body-bg-color);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
@ -2367,7 +2368,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||
}
|
||||
|
||||
#viewport.menu-open #sidebar {
|
||||
display: flex;
|
||||
transform: translate3d(220px, 0, 0);
|
||||
}
|
||||
|
||||
|
@ -10,6 +10,7 @@ let touchStartTime = 0;
|
||||
let menuWidth = 0;
|
||||
let menuIsOpen = false;
|
||||
let menuIsMoving = false;
|
||||
let menuIsAbsolute = false;
|
||||
|
||||
class SlideoutMenu {
|
||||
static enable() {
|
||||
@ -33,8 +34,10 @@ function onTouchStart(e) {
|
||||
}
|
||||
|
||||
const touch = e.touches.item(0);
|
||||
const styles = window.getComputedStyle(menu);
|
||||
|
||||
menuWidth = parseFloat(window.getComputedStyle(menu).width);
|
||||
menuWidth = parseFloat(styles.width);
|
||||
menuIsAbsolute = styles.position === "absolute";
|
||||
|
||||
if (!menuIsOpen || touch.screenX > menuWidth) {
|
||||
touchStartPos = touch;
|
||||
@ -68,6 +71,11 @@ function onTouchMove(e) {
|
||||
}
|
||||
}
|
||||
|
||||
// Do not animate the menu on desktop view
|
||||
if (!menuIsAbsolute) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (menuIsOpen) {
|
||||
distX += menuWidth;
|
||||
}
|
||||
|
@ -45,7 +45,7 @@ socket.on("init", function(data) {
|
||||
let isUserlistOpen = storage.get("thelounge.state.userlist");
|
||||
|
||||
if (viewportWidth >= utils.mobileViewportPixels) {
|
||||
slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true");
|
||||
slideoutMenu.toggle(storage.get("thelounge.state.sidebar") !== "false");
|
||||
}
|
||||
|
||||
// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
|
||||
|
@ -1,17 +1,11 @@
|
||||
#viewport {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#viewport.menu-open {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#viewport.menu-open { /* On desktop view, .menu-open means menu is closed... */
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#viewport #loading, /* ... except on pages without a menu */
|
||||
#viewport #sign-in {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#windows .window {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
|
||||
|
Loading…
Reference in New Issue
Block a user