Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages Wiki Activity
hydrogen-web/prototypes/responsive-layout-flex.html

745 lines
28 KiB
HTML
Raw Permalink Normal View History

responsive layout prototypes
2019-03-08 16:58:05 +05:30
<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
<meta name="application-name" content="Brawl Chat"/>
responsive layout prototypes
2019-03-08 16:58:05 +05:30
<meta name="msapplication-navbutton-color" content="red"/>
<style type="text/css">
html {
height: 100%;
display: flex;
min-height: 0;
}
body {
flex: 1;
margin: 0;
display: flex;
flex-direction: column;
font-family: sans-serif;
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
background-color: black;
color: white;
}
.syncbar {
background-color: grey;
responsive layout prototypes
2019-03-08 16:58:05 +05:30
}
.log {
flex: 0 0 50px;
overflow-y: scroll;
margin: 0;
background: white;
color: black;
word-wrap: anywhere;
display: none;
}
.container {
flex: 1;
display: flex;
min-height: 0;
min-width: 0;
width: 100vw;
}
/* mobile layout */
@media screen and (max-width: 800px) {
.back { display: block !important; }
.room-panel, .room-panel-placeholder { display: none; }
.room-shown .room-panel { display: unset; }
.room-shown .left-panel { display: none; }
.right-shown .timeline-panel { display: none; }
}
.left-panel {
flex: 1;
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
background: #333;
responsive layout prototypes
2019-03-08 16:58:05 +05:30
color: white;
overflow-y: auto;
}
.left-panel ul {
list-style: none;
padding: 0;
margin: 0;
}
.left-panel li {
margin: 5px;
padding: 10px;
display: flex;
align-items: center;
}
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
.left-panel li {
border-bottom: 1px #555 solid;
}
.left-panel li:last-child {
border-bottom: none;
}
responsive layout prototypes
2019-03-08 16:58:05 +05:30
.left-panel li > * {
margin-right: 10px;
}
.left-panel div.description {
margin: 0;
flex: 1 1 0;
min-width: 0;
}
.description > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.description .last-message {
font-size: 0.8em;
}
.room-panel-placeholder, .room-panel {
flex: 3;
}
.room-panel {
min-width: 0;
display: none;
}
.room-shown .room-panel {
display: flex;
}
.room-shown .room-panel-placeholder {
display: none;
}
.right-panel {
flex: 1;
background: green;
color: white;
display: none;
}
.timeline-panel {
flex: 3;
min-height: 0;
display: flex;
flex-direction: column;
}
.right-shown .right-panel {
display: block;
}
.room-header {
display: flex;
padding: 10px;
}
.room-header *:last-child {
margin-right: 0 !important;
}
.room-header > * {
margin-right: 10px !important;
}
.room-header button {
width: 40px;
height: 40px;
display: none;
font-size: 1.5em;
padding: 0;
display: block;
background: white;
border: none;
font-weight: bolder;
line-height: 40px;
}
.room-header button.back {
display: none;
}
.room-header .topic {
font-size: 0.8em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.back::before {
content: "☰";
}
.more::before {
content: "⋮";
}
.room-header {
align-items: center;
}
.room-header .room-description {
flex: 1 1 auto;
min-width: 0;
}
.room-header h2 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0;
}
.timeline-panel ul {
flex: 1;
overflow-y: auto;
list-style: none;
padding: 0;
margin: 0;
}
.timeline-panel li {
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
}
.message {
display: flex;
min-width: 0;
}
.message.own .message-container {
margin-left: auto;
}
.message-container {
flex: 0 1 auto;
max-width: 80%;
padding: 5px 10px;
margin: 5px 10px;
prettier color
2019-03-16 00:59:44 +05:30
background: blue;
responsive layout prototypes
2019-03-08 16:58:05 +05:30
}
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
.message-container .sender {
margin: 5px 0;
font-size: 0.9em;
font-weight: bold;
}
.text-message .message-container time {
float: right;
padding: 2px 0 0px 20px;
font-size: 0.9em;
color: lightblue;
}
.image-message .message-container time {
display: block;
text-align: right;
}
.image-message img {
width: 100%;
}
.message-container time {
font-size: 0.9em;
color: lightblue;
}
.own time {
color: lightgreen;
}
.own .message-container {
background-color: darkgreen;
}
.message-container p {
margin: 5px 0;
}
.timeline-panel .text-message.own {
}
responsive layout prototypes
2019-03-08 16:58:05 +05:30
.composer {
display: flex;
}
.composer input {
display: block;
flex: 1;
font-size: 1.2em;
border: none;
padding: 10px;
}
.avatar {
--avatar-size: 32px;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: 100px;
overflow: hidden;
flex-shrink: 0;
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
responsive layout prototypes
2019-03-08 16:58:05 +05:30
line-height: var(--avatar-size);
font-size: calc(var(--avatar-size) * 0.6);
text-align: center;
letter-spacing: calc(var(--avatar-size) * -0.05);
background: white;
color: black;
}
.avatar.large {
--avatar-size: 40px;
}
.avatar img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
<div class="syncbar"><button>Stop syncing</button></div>
responsive layout prototypes
2019-03-08 16:58:05 +05:30
<div class="container">
<div class="left-panel">
<ul>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 1</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 2</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium">R3</div>
<div class="description">
<div class="name">Room 3</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 4</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 5</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 6</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 7</div>
<div class="last-message">Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium">BW</div>
<div class="description">
<div class="name">Room 8</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 9</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 10</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 11</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium">🍔</div>
<div class="description">
<div class="name">Room 12</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 13</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
<li>
<div class="avatar medium"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="description">
<div class="name">Room 14</div>
<div class="last-message">Message 12, message 12, message 12</div>
</div>
</li>
</ul>
</div>
<div class="room-panel-placeholder">
<h2>Select a room on the left side</h2>
</div>
<div class="room-panel">
<div class="timeline-panel">
<div class="room-header">
<button class="back"></button>
<div class="avatar large"><img src="me.jpg" alt="Avatar for some room"/></div>
<div class="room-description">
<h2>Talk to Bruno</h2>
<div class="topic">The room to talk to Bruno</div>
</div>
<button class="more"></button>
</div>
<ul>
refine ui prototype and document planned view hierarchy
2019-06-15 05:06:52 +05:30
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message image-message not-own">
<div class="message-container">
<p><img src="me.jpg" alt="Avatar for some room"/><time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
responsive layout prototypes
2019-03-08 16:58:05 +05:30
</ul>
<div class="composer"><input type="text" placeholder="Send a message" /></div>
</div>
<div class="right-panel">
<h2>Bruno</h2>
<p>Ban | Kick | Mock</p>
</div>
</div>
</div>
<script type="text/javascript">
const left = document.querySelector(".left-panel");
const room = document.querySelector(".room-panel");
const timeline = document.querySelector(".timeline-panel ul");
const right = document.querySelector(".right-panel");
const back = document.querySelector(".back");
const more = document.querySelector(".more");
const container = document.querySelector(".container");
const logNode = document.querySelector(".log");
const composer = document.querySelector(".composer input");
function fullscreen() {
try {
document.body.webkitRequestFullscreen();
} catch (err) {
log(`could not set fullscreen: ${err.message}`);
}
}
function log(text) {
return;
const li = document.createElement("li");
li.appendChild(document.createTextNode(text));
if (logNode.childElementCount) {
logNode.insertBefore(li, logNode.firstChild);
} else {
logNode.appendChild(li);
}
}
left.addEventListener("click", (e) => {
container.classList.toggle("room-shown");
e.preventDefault();
e.stopPropagation();
});
timeline.addEventListener("click", (e) => {
room.classList.add("right-shown");
e.preventDefault();
e.stopPropagation();
});
right.addEventListener("click", (e) => {
room.classList.remove("right-shown");
e.preventDefault();
e.stopPropagation();
});
back.addEventListener("click", () => {
container.classList.remove("room-shown");
});
more.addEventListener("click", fullscreen);
const isMyPhone = navigator.userAgent.match(/Windows Phone/i);
if (isMyPhone) {
log("on my phone");
} else {
log("not on my phone");
}
window.addEventListener("load", () => {
fullscreen();
setTimeout(() => {
log("hello!");
fullscreen();
}, 100);
});
if (window.applicationCache) {
window.applicationCache.oncached = () => {
log("app is cached now!");
};
window.applicationCache.onupdateready = () => {
log("app has update ready!");
};
}
if (isMyPhone) {
composer.addEventListener("blur", () => {
log(`composer blurred, clearing maxHeight`);
container.style.removeProperty("maxHeight");
container.style.maxHeight = "";
container.style.maxHeight = null;
});
composer.addEventListener("focus", () => {
const h = 640 - 260;
log(`composer focused, setting container height to ${h}`);
container.style.maxHeight = `${h}px`;
});
}
document.scrollingElement.addEventListener("scroll", () => {
log(`window scrolled to ${document.scrollingElement.scrollTop}`);
});
window.addEventListener("resize", () => {
// document.body.style.height = `${window.innerHeight - 100}px`;
// document.scrollingElement.style.background = "red";
// window.scrollTo(0, 0);
log(`window resize ${window.innerHeight}`);
});
</script>
</body>
</html>
Reference in a new issue Copy permalink