Convert most of the layout to flexbox, make sidebar an overlay
This commit is contained in:
Pavel Djundik
parent
6857c5dd08
commit
b01e01bc19
@ -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;
|
||||
|
||||
@ -30,15 +30,12 @@
|
||||
|
||||
</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>
|
||||
@ -46,8 +43,8 @@
|
||||
<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">
|
||||
</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,9 +80,7 @@
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div id="context-menu-container">
|
||||
@ -96,6 +91,5 @@
|
||||
|
||||
<script src="js/bundle.vendor.js"></script>
|
||||
<script src="js/bundle.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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")) {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user