Merge pull request #2185 from thelounge/xpaw/flexbox-viewport
Convert the entire viewport to use flexbox
This commit is contained in:
Pavel Djundik
GitHub
commit
0dc76e773f
@ -350,7 +350,6 @@ kbd {
|
||||
content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
|
||||
color: #ff4136;
|
||||
display: inline-block;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@ -450,11 +449,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 {
|
||||
@ -514,13 +519,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;
|
||||
}
|
||||
|
||||
@ -554,10 +555,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,
|
||||
@ -568,6 +572,7 @@ kbd {
|
||||
}
|
||||
|
||||
#sidebar .empty {
|
||||
flex-grow: 1;
|
||||
line-height: 1.6;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
@ -773,14 +778,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 {
|
||||
@ -817,28 +820,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,
|
||||
@ -881,14 +864,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 {
|
||||
@ -915,7 +904,8 @@ kbd {
|
||||
}
|
||||
|
||||
#windows .active {
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#windows .header {
|
||||
@ -923,6 +913,8 @@ kbd {
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
padding: 0 6px;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@ -943,40 +935,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 {
|
||||
@ -1033,11 +1009,6 @@ kbd {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#windows #chat .header {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#chat .chat-content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
@ -1477,6 +1448,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 {
|
||||
@ -1486,7 +1458,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%;
|
||||
}
|
||||
|
||||
@ -1574,6 +1545,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;
|
||||
@ -1824,7 +1796,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;
|
||||
}
|
||||
@ -1835,9 +1806,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;
|
||||
}
|
||||
|
||||
@ -1883,7 +1852,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;
|
||||
@ -1932,7 +1900,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;
|
||||
@ -1944,7 +1911,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;
|
||||
}
|
||||
|
||||
@ -2308,48 +2274,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,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>
|
||||
|
||||
@ -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