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

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/css/style.css
View File

@ -515,9 +515,14 @@ kbd {
} }
#sidebar { #sidebar {
display: flex; display: none;
flex-direction: column; flex-direction: column;
width: 220px; width: 220px;
will-change: transform;
}
#viewport.menu-open #sidebar {
display: flex;
} }
#sidebar .scrollable-area { #sidebar .scrollable-area {
@ -541,11 +546,6 @@ kbd {
display: none; display: none;
} }
#viewport.menu-open #sidebar {
display: none;
will-change: transform;
}
#sidebar .chan, #sidebar .chan,
#sidebar .empty { #sidebar .empty {
color: #b7c5d1; color: #b7c5d1;
@ -2340,6 +2340,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#sidebar { #sidebar {
display: flex;
background: var(--body-bg-color); background: var(--body-bg-color);
height: 100%; height: 100%;
position: absolute; position: absolute;
@ -2367,7 +2368,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
} }
#viewport.menu-open #sidebar { #viewport.menu-open #sidebar {
display: flex;
transform: translate3d(220px, 0, 0); transform: translate3d(220px, 0, 0);
} }

10
client/js/slideout.js
View File

@ -10,6 +10,7 @@ let touchStartTime = 0;
let menuWidth = 0; let menuWidth = 0;
let menuIsOpen = false; let menuIsOpen = false;
let menuIsMoving = false; let menuIsMoving = false;
let menuIsAbsolute = false;
class SlideoutMenu { class SlideoutMenu {
static enable() { static enable() {
@ -33,8 +34,10 @@ function onTouchStart(e) {
} }
const touch = e.touches.item(0); 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) { if (!menuIsOpen || touch.screenX > menuWidth) {
touchStartPos = touch; touchStartPos = touch;
@ -68,6 +71,11 @@ function onTouchMove(e) {
} }
} }
// Do not animate the menu on desktop view
if (!menuIsAbsolute) {
return;
}
if (menuIsOpen) { if (menuIsOpen) {
distX += menuWidth; distX += menuWidth;
} }

2
client/js/socket-events/init.js
View File

@ -45,7 +45,7 @@ socket.on("init", function(data) {
let isUserlistOpen = storage.get("thelounge.state.userlist"); let isUserlistOpen = storage.get("thelounge.state.userlist");
if (viewportWidth >= utils.mobileViewportPixels) { 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 // If The Lounge is opened on a small screen (less than 1024px), and we don't have stored

12
client/themes/default.css
View File

@ -1,17 +1,11 @@
#viewport { #viewport {
padding: 5px; padding: 5px;
}
#viewport.menu-open {
padding-left: 0; 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 { #windows .window {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);