deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-05-09 09:46:42 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2601 from thelounge/xpaw/fix-2572

Browse source 
Make menu state consistent on desktop and mobile; fix sliding on desktop
This commit is contained in:
Pavel Djundik 2018-08-17 09:25:43 +03:00 committed by GitHub
parent c9ba896d9e cdebd532ce
commit b1dcbd3811
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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

@ -526,9 +526,14 @@ kbd {
}
#sidebar {
display: flex;
display: none;
flex-direction: column;
width: 220px;
will-change: transform;
}
#viewport.menu-open #sidebar {
display: flex;
}
#sidebar .scrollable-area {
@ -552,11 +557,6 @@ kbd {
display: none;
}
#viewport.menu-open #sidebar {
display: none;
will-change: transform;
}
#sidebar .chan,
#sidebar .empty {
color: #b7c5d1;
@ -2360,6 +2360,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;
@ -2387,7 +2388,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
client/js/slideout.js
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;
}

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

12
client/themes/default.css
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);