From b01e01bc19192c621d27312a2aae3535566c71e5 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Sun, 11 Mar 2018 00:23:43 +0200 Subject: [PATCH] Convert most of the layout to flexbox, make sidebar an overlay --- client/css/style.css | 135 +++++++++++++------------------------- client/index.html.tpl | 50 +++++++------- client/js/lounge.js | 2 +- client/js/slideout.js | 21 +++--- client/themes/example.css | 40 ++--------- 5 files changed, 85 insertions(+), 163 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 432b3316..85c342d3 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -349,7 +349,6 @@ kbd { content: "\f08b"; /* http://fontawesome.io/icon/sign-out/ */ color: #ff4136; display: inline-block; - -webkit-transform: rotate(180deg); transform: rotate(180deg); } @@ -449,11 +448,17 @@ kbd { /* End icons */ -#wrap { +#viewport { + display: flex; height: 100%; overflow: hidden; } +#windows { + flex: 1 0 auto; + position: relative; +} + #chat button, #form button, #chat .user { @@ -513,13 +518,9 @@ kbd { } #sidebar { - bottom: 45px; - left: 0; - overflow: auto; - overflow-x: hidden; + display: flex; + flex-direction: column; -webkit-overflow-scrolling: touch; - position: absolute; - top: 0; width: 220px; } @@ -553,10 +554,13 @@ kbd { #sidebar .networks { padding-top: 20px; touch-action: pan-y; + flex-grow: 1; + overflow: auto; + overflow-x: hidden; } #sidebar .networks:empty { - padding: 0; + display: none; } #sidebar .network, @@ -567,6 +571,7 @@ kbd { } #sidebar .empty { + flex-grow: 1; line-height: 1.6; padding: 40px 20px; text-align: center; @@ -772,14 +777,12 @@ kbd { #footer { background: rgba(0, 0, 0, 0.06); - bottom: 0; height: 45px; - left: 0; font-size: 14px; line-height: 45px; - position: absolute; text-align: center; width: 220px; + flex-shrink: 0; } #footer button.active { @@ -816,28 +819,8 @@ kbd { display: none; } -#main { - bottom: 0; - left: 220px; - position: absolute; - right: 0; - top: 0; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; -} - -.signed-out #main { - left: 0; /* Hide the sidebar when user is signed out */ -} - -#header { - display: none; - height: 40px; - position: absolute; - top: 0; - width: 100%; +.signed-out #sidebar { + display: none; /* Hide the sidebar when user is signed out */ } #windows li, @@ -880,14 +863,20 @@ kbd { #windows .window { background: #fff; - bottom: 0; display: none; - left: 0; + overflow-y: auto; + height: 100%; + -webkit-overflow-scrolling: touch; +} + +#chat .chan, +#windows .window { + /* flexbox does not seem to scroll without doing this */ position: absolute; + bottom: 0; + left: 0; right: 0; top: 0; - overflow-y: auto; - -webkit-overflow-scrolling: touch; } #windows .window h1 { @@ -914,7 +903,8 @@ kbd { } #windows .active { - display: block; + display: flex; + flex-direction: column; } #windows .header { @@ -922,6 +912,8 @@ kbd { line-height: 48px; height: 48px; padding: 0 6px; + display: flex; + flex-shrink: 0; overflow: hidden; } @@ -942,40 +934,24 @@ kbd { font-size: 14px; } -#windows .window .header { - display: none; -} - -#chat-container, -#chat .chan { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - #windows #chat-container.active { - display: -webkit-flex; display: flex; - -webkit-flex-direction: column; flex-direction: column; } #chat { - position: relative; overflow: hidden; - -webkit-flex: 1; - flex: 1; + flex: 1 0 auto; + position: relative; } #chat .chan { display: none; + flex-direction: column; } #chat .chan.active { display: flex; - flex-direction: column; } #chat .condensed { @@ -1032,11 +1008,6 @@ kbd { line-height: 1.4; } -#windows #chat .header { - display: flex; - flex-shrink: 0; -} - #chat .chat-content { display: flex; flex-grow: 1; @@ -1476,6 +1447,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ background: #fafafa; height: 48px; flex-shrink: 0; + position: relative; } #chat .userlist .search { @@ -1485,7 +1457,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ font: inherit; outline: 0; padding: 18px 16px; - position: relative; width: 100%; } @@ -1573,6 +1544,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ white-space: normal; } +#sign-in .container, #loading-reload-container, #loading-status-container { flex: 1 0 auto; @@ -1823,7 +1795,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ #form { background: #eee; border-top: 1px solid #ddd; - -webkit-flex: 0 0 auto; flex: 0 0 auto; padding: 5px; } @@ -1834,9 +1805,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ margin: 0; padding: 0; background: white; - display: -webkit-flex; display: flex; - -webkit-align-items: flex-end; align-items: flex-end; } @@ -1882,7 +1851,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ padding-left: 9px; padding-right: 5px; border-radius: 2px; - -webkit-flex: 0 0 auto; flex: 0 0 auto; border: 1px solid transparent; transition: border-color 0.2s; @@ -1931,7 +1899,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ margin: 5px; padding: 0; resize: none; - -webkit-flex: 1 0 auto; flex: 1 0 auto; align-self: center; touch-action: pan-y; @@ -1943,7 +1910,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ height: 32px; transition: opacity 0.2s; width: 32px; - -webkit-flex: 0 0 auto; flex: 0 0 auto; } @@ -2307,48 +2273,37 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ font-size: 15px; } - #viewport { + #sidebar { + background: #455164; height: 100%; - transition: transform 160ms, -webkit-transform 160ms; - -webkit-transform: translateZ(0); + position: absolute; + left: -220px; + z-index: 1; + transition: transform 160ms; transform: translateZ(0); } - #viewport.menu-open { - -webkit-transform: translate3d(220px, 0, 0); + #sidebar.menu-open { transform: translate3d(220px, 0, 0); } - #viewport.menu-dragging { + #sidebar.menu-dragging { transition: none !important; } - #viewport.menu-open .messages { + #sidebar.menu-open .messages { pointer-events: none; } - #sidebar, - #footer { - left: -220px; - } - #sidebar .empty::before { margin-top: 0; } - #main { - left: 0; - } - #viewport .lt, #viewport .channel .rt { display: flex; } - #windows .window .header { - display: block; - } - #chat .userlist { height: 100%; position: absolute; diff --git a/client/index.html.tpl b/client/index.html.tpl index e3ac9621..b2446019 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -30,24 +30,21 @@ " data-transports="<%- JSON.stringify(transports) %>"> - -
-
- -
- - - - - -
-
-
+
+ +
The Lounge @@ -83,19 +80,16 @@
-
+
-
-
-
-
    -
    +
    +
      +
      -
      - - - +
      + + diff --git a/client/js/lounge.js b/client/js/lounge.js index 1c28c7b5..dfbebd57 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -32,7 +32,7 @@ $(function() { const contextMenuContainer = $("#context-menu-container"); const contextMenu = $("#context-menu"); - $("#main").on("click", function(e) { + $("#windows").on("click", function(e) { const isOpen = slideoutMenu.isOpen(); if (isOpen || $(e.target).is(".lt")) { diff --git a/client/js/slideout.js b/client/js/slideout.js index d9244e8f..113ff539 100644 --- a/client/js/slideout.js +++ b/client/js/slideout.js @@ -1,6 +1,5 @@ "use strict"; -const viewport = document.getElementById("viewport"); const menu = document.getElementById("sidebar"); let touchStartPos = null; @@ -12,12 +11,12 @@ let menuIsMoving = false; class SlideoutMenu { static enable() { - viewport.addEventListener("touchstart", onTouchStart, {passive: true}); + document.body.addEventListener("touchstart", onTouchStart, {passive: true}); } static toggle(state) { menuIsOpen = state; - viewport.classList.toggle("menu-open", state); + menu.classList.toggle("menu-open", state); } static isOpen() { @@ -40,9 +39,9 @@ function onTouchStart(e) { touchCurPos = touch; touchStartTime = Date.now(); - viewport.classList.toggle("menu-dragging", true); - viewport.addEventListener("touchmove", onTouchMove); - viewport.addEventListener("touchend", onTouchEnd, {passive: true}); + menu.classList.toggle("menu-dragging", true); + document.body.addEventListener("touchmove", onTouchMove); + document.body.addEventListener("touchend", onTouchEnd, {passive: true}); } } @@ -69,7 +68,7 @@ function onTouchMove(e) { setX = 0; } - viewport.style.transform = "translate3d(" + setX + "px, 0, 0)"; + menu.style.transform = "translate3d(" + setX + "px, 0, 0)"; if (menuIsMoving) { e.preventDefault(); @@ -85,10 +84,10 @@ function onTouchEnd() { SlideoutMenu.toggle(diff > 0); } - viewport.removeEventListener("touchmove", onTouchMove); - viewport.removeEventListener("touchend", onTouchEnd); - viewport.classList.toggle("menu-dragging", false); - viewport.style.transform = null; + document.body.removeEventListener("touchmove", onTouchMove); + document.body.removeEventListener("touchend", onTouchEnd); + menu.classList.toggle("menu-dragging", false); + menu.style.transform = null; touchStartPos = null; touchCurPos = null; diff --git a/client/themes/example.css b/client/themes/example.css index 6ec3dd62..0a5863af 100644 --- a/client/themes/example.css +++ b/client/themes/example.css @@ -3,32 +3,12 @@ */ body { - margin: 0; -} - -.signed-out #main { - left: 5px; -} - -#sidebar { - bottom: 52px; + padding: 4px; } #footer { border-radius: 2px; - bottom: 4px; - left: 5px; - width: 210px; -} - -#main { - bottom: 4px; - right: 5px; - top: 4px; -} - -#chat .unhandled .from { - color: #ddd; + width: 216px; } #windows .window::before { @@ -40,6 +20,7 @@ body { height: 10px; position: relative; z-index: 10; + flex-shrink: 0; } #windows .window { @@ -47,20 +28,13 @@ body { } @media (max-width: 768px) { - #sidebar { - left: -220px; + body { + padding: 0; } #footer { - left: -215px; - width: 215px; - } - - #main { - left: 0; - bottom: 0; - right: 0; - top: 0; + border-radius: 0; + width: inherit; } #windows .window::before {