diff --git a/client/css/style.css b/client/css/style.css index b8daef10..d53ba3f4 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -510,8 +510,8 @@ kbd { opacity: 1; } -#viewport.rt #chat .userlist { - display: none; +#viewport.userlist-open #chat .userlist { + display: flex; } #sidebar { @@ -1051,14 +1051,10 @@ background on hover (unless active) */ -webkit-overflow-scrolling: touch; } -#viewport.rt .chat { - right: 0; -} - #chat .userlist { border-left: 1px solid #e7e7e7; width: 180px; - display: flex; + display: none; flex-direction: column; flex-shrink: 0; touch-action: pan-y; @@ -2413,8 +2409,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ transition: transform 0.2s; } - #viewport.rt #chat .userlist { - display: flex; + #viewport.userlist-open #chat .userlist { transform: translateX(0); } diff --git a/client/js/lounge.js b/client/js/lounge.js index 03328b14..09b2197b 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -28,10 +28,6 @@ $(function() { const viewport = $("#viewport"); function storeSidebarVisibility(name, state) { - if ($(window).outerWidth() < utils.mobileViewportPixels) { - return; - } - storage.set(name, state); utils.togglePreviewMoreButtonsIfNeeded(); @@ -40,20 +36,26 @@ $(function() { // If sidebar overlay is visible and it is clicked, close the sidebar $("#sidebar-overlay").on("click", () => { slideoutMenu.toggle(false); - storeSidebarVisibility("thelounge.state.sidebar", false); + + if ($(window).outerWidth() >= utils.mobileViewportPixels) { + storeSidebarVisibility("thelounge.state.sidebar", false); + } }); $("#windows").on("click", "button.lt", () => { const isOpen = !slideoutMenu.isOpen(); slideoutMenu.toggle(isOpen); - storeSidebarVisibility("thelounge.state.sidebar", isOpen); + + if ($(window).outerWidth() >= utils.mobileViewportPixels) { + storeSidebarVisibility("thelounge.state.sidebar", isOpen); + } }); viewport.on("click", ".rt", function() { - const isOpen = !viewport.hasClass("rt"); + const isOpen = !viewport.hasClass("userlist-open"); - viewport.toggleClass("rt", isOpen); + viewport.toggleClass("userlist-open", isOpen); chat.find(".chan.active .chat").trigger("keepToBottom"); storeSidebarVisibility("thelounge.state.userlist", isOpen); diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js index 11debaef..d6738a29 100644 --- a/client/js/socket-events/init.js +++ b/client/js/socket-events/init.js @@ -41,12 +41,21 @@ socket.on("init", function(data) { slideoutMenu.enable(); const viewport = $("#viewport"); + const viewportWidth = $(window).outerWidth(); + let isUserlistOpen = storage.get("thelounge.state.userlist"); - if ($(window).outerWidth() >= utils.mobileViewportPixels) { + if (viewportWidth >= utils.mobileViewportPixels) { slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true"); - viewport.toggleClass("rt", storage.get("thelounge.state.userlist") === "true"); } + // If The Lounge is opened on a small screen (less than 1024px), and we don't have stored + // user list state, close it by default + if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") { + isUserlistOpen = "true"; + } + + viewport.toggleClass("userlist-open", isUserlistOpen === "true"); + $(document.body).removeClass("signed-out"); $("#loading").remove(); $("#sign-in").remove();