Convert most of the layout to flexbox, make sidebar an overlay

This commit is contained in:
Pavel Djundik 2018-03-11 00:23:43 +02:00
parent 6857c5dd08
commit b01e01bc19
5 changed files with 85 additions and 163 deletions

View File

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

View File

@ -30,24 +30,21 @@
</head>
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="wrap">
<div id="viewport" role="tablist">
<aside id="sidebar">
<div class="networks"></div>
<div class="empty">
You're not connected to any networks yet.
</div>
</aside>
<footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network" role="tab" aria-controls="connect" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings" role="tab" aria-controls="settings" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help" role="tab" aria-controls="help" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
</footer>
<div id="main">
<div id="windows">
<div id="viewport" role="tablist">
<aside id="sidebar">
<div class="networks"></div>
<div class="empty">
You're not connected to any networks yet.
</div>
<footer id="footer">
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"><button class="icon sign-in" data-target="#sign-in" aria-label="Sign in" role="tab" aria-controls="sign-in" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Connect to network"><button class="icon connect" data-target="#connect" aria-label="Connect to network" role="tab" aria-controls="connect" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"><button class="icon settings" data-target="#settings" aria-label="Settings" role="tab" aria-controls="settings" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"><button class="icon help" data-target="#help" aria-label="Help" role="tab" aria-controls="help" aria-selected="false"></button></span>
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></button></span>
</footer>
</aside>
<article id="windows">
<div id="loading" class="window active">
<div id="loading-status-container">
<img src="img/logo-vertical-transparent-bg.svg" class="loading-logo-bright" alt="The Lounge" width="256" height="170">
@ -83,19 +80,16 @@
<div id="settings" class="window" role="tabpanel" aria-label="Settings"></div>
<div id="help" class="window" role="tabpanel" aria-label="Help"></div>
<div id="changelog" class="window" aria-label="Changelog"></div>
</div>
</article>
</div>
</div>
</div>
<div id="context-menu-container">
<ul id="context-menu"></ul>
</div>
<div id="context-menu-container">
<ul id="context-menu"></ul>
</div>
<div id="image-viewer"></div>
<script src="js/bundle.vendor.js"></script>
<script src="js/bundle.js"></script>
<div id="image-viewer"></div>
<script src="js/bundle.vendor.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>

View File

@ -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")) {

View File

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

View File

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