Make menu state consistent on desktop and mobile; fix sliding on desktop

Fixes #2572
This commit is contained in:
Pavel Djundik 2018-06-28 10:45:40 +03:00
parent d5f0a2481f
commit cdebd532ce
4 changed files with 20 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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