supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2185 from thelounge/xpaw/flexbox-viewport

Browse Source 
Convert the entire viewport to use flexbox
This commit is contained in:
Pavel Djundik 2018-03-12 23:07:48 +02:00 committed by GitHub
commit 0dc76e773f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 85 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
client/css/style.css
View File

@ -350,7 +350,6 @@ kbd {
content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */ content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
color: #ff4136; color: #ff4136;
display: inline-block; display: inline-block;
-webkit-transform: rotate(180deg);
transform: rotate(180deg); transform: rotate(180deg);
} }
@ -450,11 +449,17 @@ kbd {
/* End icons */ /* End icons */
#wrap { #viewport {
display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
#windows {
flex: 1 0 auto;
position: relative;
}
#chat button, #chat button,
#form button, #form button,
#chat .user { #chat .user {
@ -514,13 +519,9 @@ kbd {
} }
#sidebar { #sidebar {
bottom: 45px; display: flex;
left: 0; flex-direction: column;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
position: absolute;
top: 0;
width: 220px; width: 220px;
} }
@ -554,10 +555,13 @@ kbd {
#sidebar .networks { #sidebar .networks {
padding-top: 20px; padding-top: 20px;
touch-action: pan-y; touch-action: pan-y;
flex-grow: 1;
overflow: auto;
overflow-x: hidden;
} }
#sidebar .networks:empty { #sidebar .networks:empty {
padding: 0; display: none;
} }
#sidebar .network, #sidebar .network,
@ -568,6 +572,7 @@ kbd {
} }
#sidebar .empty { #sidebar .empty {
flex-grow: 1;
line-height: 1.6; line-height: 1.6;
padding: 40px 20px; padding: 40px 20px;
text-align: center; text-align: center;
@ -773,14 +778,12 @@ kbd {
#footer { #footer {
background: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.06);
bottom: 0;
height: 45px; height: 45px;
left: 0;
font-size: 14px; font-size: 14px;
line-height: 45px; line-height: 45px;
position: absolute;
text-align: center; text-align: center;
width: 220px; width: 220px;
flex-shrink: 0;
} }
#footer button.active { #footer button.active {
@ -817,28 +820,8 @@ kbd {
display: none; display: none;
} }
#main { .signed-out #sidebar {
bottom: 0; display: none; /* Hide the sidebar when user is signed out */
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%;
} }
#windows li, #windows li,
@ -881,14 +864,20 @@ kbd {
#windows .window { #windows .window {
background: #fff; background: #fff;
bottom: 0;
display: none; 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; position: absolute;
bottom: 0;
left: 0;
right: 0; right: 0;
top: 0; top: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} }
#windows .window h1 { #windows .window h1 {
@ -915,7 +904,8 @@ kbd {
} }
#windows .active { #windows .active {
display: block; display: flex;
flex-direction: column;
} }
#windows .header { #windows .header {
@ -923,6 +913,8 @@ kbd {
line-height: 48px; line-height: 48px;
height: 48px; height: 48px;
padding: 0 6px; padding: 0 6px;
display: flex;
flex-shrink: 0;
overflow: hidden; overflow: hidden;
} }
@ -943,40 +935,24 @@ kbd {
font-size: 14px; 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 { #windows #chat-container.active {
display: -webkit-flex;
display: flex; display: flex;
-webkit-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
#chat { #chat {
position: relative;
overflow: hidden; overflow: hidden;
-webkit-flex: 1; flex: 1 0 auto;
flex: 1; position: relative;
} }
#chat .chan { #chat .chan {
display: none; display: none;
flex-direction: column;
} }
#chat .chan.active { #chat .chan.active {
display: flex; display: flex;
flex-direction: column;
} }
#chat .condensed { #chat .condensed {
@ -1033,11 +1009,6 @@ kbd {
line-height: 1.4; line-height: 1.4;
} }
#windows #chat .header {
display: flex;
flex-shrink: 0;
}
#chat .chat-content { #chat .chat-content {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
@ -1477,6 +1448,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
background: #fafafa; background: #fafafa;
height: 48px; height: 48px;
flex-shrink: 0; flex-shrink: 0;
position: relative;
} }
#chat .userlist .search { #chat .userlist .search {
@ -1486,7 +1458,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
font: inherit; font: inherit;
outline: 0; outline: 0;
padding: 18px 16px; padding: 18px 16px;
position: relative;
width: 100%; width: 100%;
} }
@ -1574,6 +1545,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
white-space: normal; white-space: normal;
} }
#sign-in .container,
#loading-reload-container, #loading-reload-container,
#loading-status-container { #loading-status-container {
flex: 1 0 auto; flex: 1 0 auto;
@ -1824,7 +1796,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#form { #form {
background: #eee; background: #eee;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: 5px; padding: 5px;
} }
@ -1835,9 +1806,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
margin: 0; margin: 0;
padding: 0; padding: 0;
background: white; background: white;
display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: flex-end;
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-left: 9px;
padding-right: 5px; padding-right: 5px;
border-radius: 2px; border-radius: 2px;
-webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
border: 1px solid transparent; border: 1px solid transparent;
transition: border-color 0.2s; 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; margin: 5px;
padding: 0; padding: 0;
resize: none; resize: none;
-webkit-flex: 1 0 auto;
flex: 1 0 auto; flex: 1 0 auto;
align-self: center; align-self: center;
touch-action: pan-y; touch-action: pan-y;
@ -1944,7 +1911,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
height: 32px; height: 32px;
transition: opacity 0.2s; transition: opacity 0.2s;
width: 32px; width: 32px;
-webkit-flex: 0 0 auto;
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; font-size: 15px;
} }
#viewport { #sidebar {
background: #455164;
height: 100%; height: 100%;
transition: transform 160ms, -webkit-transform 160ms; position: absolute;
-webkit-transform: translateZ(0); left: -220px;
z-index: 1;
transition: transform 160ms;
transform: translateZ(0); transform: translateZ(0);
} }
#viewport.menu-open { #sidebar.menu-open {
-webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0); transform: translate3d(220px, 0, 0);
} }
#viewport.menu-dragging { #sidebar.menu-dragging {
transition: none !important; transition: none !important;
} }
#viewport.menu-open .messages { #sidebar.menu-open .messages {
pointer-events: none; pointer-events: none;
} }
#sidebar,
#footer {
left: -220px;
}
#sidebar .empty::before { #sidebar .empty::before {
margin-top: 0; margin-top: 0;
} }
#main {
left: 0;
}
#viewport .lt, #viewport .lt,
#viewport .channel .rt { #viewport .channel .rt {
display: flex; display: flex;
} }
#windows .window .header {
display: block;
}
#chat .userlist { #chat .userlist {
height: 100%; height: 100%;
position: absolute; position: absolute;

50
client/index.html.tpl
View File

@ -30,24 +30,21 @@
</head> </head>
<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>"> <body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
<div id="viewport" role="tablist">
<div id="wrap"> <aside id="sidebar">
<div id="viewport" role="tablist"> <div class="networks"></div>
<aside id="sidebar"> <div class="empty">
<div class="networks"></div> You're not connected to any networks yet.
<div class="empty"> </div>
You're not connected to any networks yet. <footer id="footer">
</div> <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>
</aside> <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>
<footer id="footer"> <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="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="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="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="Sign out"><button class="icon sign-out" id="sign-out" aria-label="Sign out"></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> </footer>
<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> </aside>
<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> <article id="windows">
</footer>
<div id="main">
<div id="windows">
<div id="loading" class="window active"> <div id="loading" class="window active">
<div id="loading-status-container"> <div id="loading-status-container">
<img src="img/logo-vertical-transparent-bg.svg" class="loading-logo-bright" alt="The Lounge" width="256" height="170"> <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="settings" class="window" role="tabpanel" aria-label="Settings"></div>
<div id="help" class="window" role="tabpanel" aria-label="Help"></div> <div id="help" class="window" role="tabpanel" aria-label="Help"></div>
<div id="changelog" class="window" aria-label="Changelog"></div> <div id="changelog" class="window" aria-label="Changelog"></div>
</div> </article>
</div> </div>
</div>
</div>
<div id="context-menu-container"> <div id="context-menu-container">
<ul id="context-menu"></ul> <ul id="context-menu"></ul>
</div> </div>
<div id="image-viewer"></div> <div id="image-viewer"></div>
<script src="js/bundle.vendor.js"></script>
<script src="js/bundle.js"></script>
<script src="js/bundle.vendor.js"></script>
<script src="js/bundle.js"></script>
</body> </body>
</html> </html>

2
client/js/lounge.js
View File

@ -32,7 +32,7 @@ $(function() {
const contextMenuContainer = $("#context-menu-container"); const contextMenuContainer = $("#context-menu-container");
const contextMenu = $("#context-menu"); const contextMenu = $("#context-menu");
$("#main").on("click", function(e) { $("#windows").on("click", function(e) {
const isOpen = slideoutMenu.isOpen(); const isOpen = slideoutMenu.isOpen();
if (isOpen || $(e.target).is(".lt")) { if (isOpen || $(e.target).is(".lt")) {

21
client/js/slideout.js
View File

@ -1,6 +1,5 @@
"use strict"; "use strict";
const viewport = document.getElementById("viewport");
const menu = document.getElementById("sidebar"); const menu = document.getElementById("sidebar");
let touchStartPos = null; let touchStartPos = null;
@ -12,12 +11,12 @@ let menuIsMoving = false;
class SlideoutMenu { class SlideoutMenu {
static enable() { static enable() {
viewport.addEventListener("touchstart", onTouchStart, {passive: true}); document.body.addEventListener("touchstart", onTouchStart, {passive: true});
} }
static toggle(state) { static toggle(state) {
menuIsOpen = state; menuIsOpen = state;
viewport.classList.toggle("menu-open", state); menu.classList.toggle("menu-open", state);
} }
static isOpen() { static isOpen() {
@ -40,9 +39,9 @@ function onTouchStart(e) {
touchCurPos = touch; touchCurPos = touch;
touchStartTime = Date.now(); touchStartTime = Date.now();
viewport.classList.toggle("menu-dragging", true); menu.classList.toggle("menu-dragging", true);
viewport.addEventListener("touchmove", onTouchMove); document.body.addEventListener("touchmove", onTouchMove);
viewport.addEventListener("touchend", onTouchEnd, {passive: true}); document.body.addEventListener("touchend", onTouchEnd, {passive: true});
} }
} }
@ -69,7 +68,7 @@ function onTouchMove(e) {
setX = 0; setX = 0;
} }
viewport.style.transform = "translate3d(" + setX + "px, 0, 0)"; menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
if (menuIsMoving) { if (menuIsMoving) {
e.preventDefault(); e.preventDefault();
@ -85,10 +84,10 @@ function onTouchEnd() {
SlideoutMenu.toggle(diff > 0); SlideoutMenu.toggle(diff > 0);
} }
viewport.removeEventListener("touchmove", onTouchMove); document.body.removeEventListener("touchmove", onTouchMove);
viewport.removeEventListener("touchend", onTouchEnd); document.body.removeEventListener("touchend", onTouchEnd);
viewport.classList.toggle("menu-dragging", false); menu.classList.toggle("menu-dragging", false);
viewport.style.transform = null; menu.style.transform = null;
touchStartPos = null; touchStartPos = null;
touchCurPos = null; touchCurPos = null;

40
client/themes/example.css
View File

@ -3,32 +3,12 @@
*/ */
body { body {
margin: 0; padding: 4px;
}
.signed-out #main {
left: 5px;
}
#sidebar {
bottom: 52px;
} }
#footer { #footer {
border-radius: 2px; border-radius: 2px;
bottom: 4px; width: 216px;
left: 5px;
width: 210px;
}
#main {
bottom: 4px;
right: 5px;
top: 4px;
}
#chat .unhandled .from {
color: #ddd;
} }
#windows .window::before { #windows .window::before {
@ -40,6 +20,7 @@ body {
height: 10px; height: 10px;
position: relative; position: relative;
z-index: 10; z-index: 10;
flex-shrink: 0;
} }
#windows .window { #windows .window {
@ -47,20 +28,13 @@ body {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
#sidebar { body {
left: -220px; padding: 0;
} }
#footer { #footer {
left: -215px; border-radius: 0;
width: 215px; width: inherit;
}
#main {
left: 0;
bottom: 0;
right: 0;
top: 0;
} }
#windows .window::before { #windows .window::before {