web: responsive navigation
This commit is contained in:
Thomas Mathews
William Casarin
parent
59e25e9087
commit
ddee626bf5
3 changed files with 137 additions and 126 deletions
37
web/css/responsive.css
Normal file
37
web/css/responsive.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
@media (max-width: 800px){
|
||||
/* Utility */
|
||||
.vertical-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Application Framework */
|
||||
#container {
|
||||
flex-flow: column-reverse;
|
||||
}
|
||||
#content {
|
||||
width: initial;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
#nav {
|
||||
flex-flow: row;
|
||||
border-right: none;
|
||||
}
|
||||
#nav > * {
|
||||
flex: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Event */
|
||||
.pfp { /* TODO sync up with userpic */
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
|
||||
/* Post Tools */
|
||||
#newpost > :first-child {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors */
|
||||
--clrBg: #fff;
|
||||
--clrPanel: #f9f9f9;
|
||||
--clrBorder: #f2f2f2;
|
||||
|
|
@ -21,12 +22,13 @@
|
|||
--clrHeart: #ff5050;
|
||||
--clrWarn: #fbc560;
|
||||
|
||||
--navPadding: 5px;
|
||||
/* Font Sizes */
|
||||
--fsSmall: 12px;
|
||||
--fsNormal: 16px;
|
||||
--fsReduced: 14px;
|
||||
--fsEnlarged: 18px;
|
||||
|
||||
/* Font Families */
|
||||
--ffDefault: "Noto Sans", sans-serif;
|
||||
}
|
||||
*:focus-visible {
|
||||
|
|
@ -48,7 +50,11 @@ body {
|
|||
|
||||
/* Utilities */
|
||||
.flex-fill {
|
||||
flex: 1;
|
||||
flex: auto;
|
||||
}
|
||||
.flex-noshrink {
|
||||
/*flex-shrink: 0;*/
|
||||
flex: none;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
|
|
@ -82,43 +88,52 @@ button.action {
|
|||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Application Framework */
|
||||
button.nav {
|
||||
color: var(--clrBtn);
|
||||
font-size: 24px;
|
||||
padding: calc(var(--navPadding) * 4) calc(var(--navPadding) * 5);
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottom-border { /* TODO rename to bdr-bottom */
|
||||
border-bottom: solid 1px var(--clrBorder);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
#nav {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-right: 1px solid var(--clrBorder);
|
||||
padding: 15px;
|
||||
}
|
||||
#nav > * {
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
#app-icon-logo {
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
padding: calc(var(--navPadding) * 4);
|
||||
}
|
||||
|
||||
#app-icon-logo > img {
|
||||
border-radius: 50%;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
button.nav {
|
||||
color: var(--clrBtn);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* Application Framework */
|
||||
#container {
|
||||
display: flex;
|
||||
|
||||
/*
|
||||
flex-direction: row;
|
||||
flex-flow: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;*/
|
||||
}
|
||||
#nav {
|
||||
flex-shrink: 1;
|
||||
border-right: 1px solid var(--clrBorder);
|
||||
overflow: hidden;
|
||||
}
|
||||
#content {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid var(--clrBorder);
|
||||
overflow: hidden;
|
||||
width: 750px;
|
||||
}
|
||||
#content header > label {
|
||||
padding: 22px 15px;
|
||||
|
|
@ -126,9 +141,8 @@ button.nav {
|
|||
font-weight: 800;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#view {
|
||||
max-width: 750px;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -347,14 +361,6 @@ input[type="text"].cw {
|
|||
font-size: var(--fsReduced);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bottom-border {
|
||||
border-bottom: solid 1px var(--clrBorder);
|
||||
}
|
||||
|
||||
.deleted-comment {
|
||||
border: 2px dashed var(--clrBorder);
|
||||
border-radius: 10px;
|
||||
|
|
@ -375,24 +381,3 @@ input[type="text"].cw {
|
|||
padding: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
:root {
|
||||
--navPadding: 2px;
|
||||
|
||||
--fsSmall: 10px;
|
||||
--fsNormal: 14px;
|
||||
--fsReduced: 12px;
|
||||
--fsEnlarged: 16px;
|
||||
}
|
||||
|
||||
.pfp {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 2.2em;
|
||||
}
|
||||
|
||||
#newpost > :first-child {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
143
web/index.html
143
web/index.html
|
|
@ -1,80 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Damus</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=113">
|
||||
<link rel="stylesheet" href="css/fontawesome.css?v=2">
|
||||
<script defer src="js/ui/util.js?v=1"></script>
|
||||
<script defer src="js/ui/render.js?v=2"></script>
|
||||
<script defer src="js/noble-secp256k1.js?v=1"></script>
|
||||
<script defer src="js/bech32.js?v=1"></script>
|
||||
<script defer src="js/nostr.js?v=6"></script>
|
||||
<script defer src="js/damus.js?v=69"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const relay = 0; // relay is declared for backwards compatibibility.
|
||||
// This is our main entry.
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
|
||||
addEventListener('DOMContentLoaded', (ev) => {
|
||||
damus_web_init();
|
||||
});
|
||||
</script>
|
||||
<div id="container">
|
||||
<div class="flex-fill"></div>
|
||||
<div id="nav">
|
||||
<div id="app-icon-logo">
|
||||
<i class="fa-regular fa-fw fa-hand-peace"></i>
|
||||
</div>
|
||||
<div>
|
||||
<button class="nav icon">
|
||||
<i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
|
||||
</button></div>
|
||||
|
||||
<!--
|
||||
<div>
|
||||
<button class="nav icon">
|
||||
<i class="fa fa-fw fa-user"></i><span class="hide">Profile</span>
|
||||
</button></div>
|
||||
<div>
|
||||
<button class="nav icon">
|
||||
<i class="fa fa-fw fa-gear"></i><span class="hide">Settings</span>
|
||||
</button></div>
|
||||
-->
|
||||
<div>
|
||||
<button onclick="press_logout()" title="Sign Out" class="nav icon">
|
||||
<i class="fa fa-fw fa-arrow-right-from-bracket"></i><span class="hide">Sign Out</span>
|
||||
</button></div>
|
||||
</div>
|
||||
<div id="content">
|
||||
<header>
|
||||
<label>Home</label>
|
||||
</header>
|
||||
<div id="view"></div>
|
||||
</div>
|
||||
<div class="flex-fill"></div>
|
||||
</div>
|
||||
<div class="modal closed" id="reply-modal">
|
||||
<div id="reply-modal-content" class="modal-content">
|
||||
<header>
|
||||
<label>Reply To</label>
|
||||
<button class="icon" onclick="close_reply()">
|
||||
<i class="fa fa-xmark"></i>
|
||||
</button>
|
||||
</header>
|
||||
<div id="replying-to"></div>
|
||||
<div id="replybox">
|
||||
<textarea id="reply-content" class="post-input"
|
||||
placeholder="Write your reply here..."></textarea>
|
||||
<div class="post-tools">
|
||||
<button id="reply-button" class="action" onclick="do_send_reply()">
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Damus</title>
|
||||
<link rel="stylesheet" href="css/styles.css?v=109">
|
||||
<link rel="stylesheet" href="css/responsive.css?v=1">
|
||||
<link rel="stylesheet" href="css/damus.css?v=211">
|
||||
<link rel="stylesheet" href="css/fontawesome.css?v=2">
|
||||
<script defer src="js/ui/util.js?v=1"></script>
|
||||
<script defer src="js/ui/render.js?v=1"></script>
|
||||
<script defer src="js/noble-secp256k1.js?v=1"></script>
|
||||
<script defer src="js/bech32.js?v=1"></script>
|
||||
<script defer src="js/nostr.js?v=6"></script>
|
||||
<script defer src="js/damus.js?v=66"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
const relay = 0; // relay is declared for backwards compatibibility.
|
||||
// This is our main entry.
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
|
||||
addEventListener('DOMContentLoaded', (ev) => {
|
||||
damus_web_init();
|
||||
});
|
||||
</script>
|
||||
<div id="container">
|
||||
<div class="flex-fill vertical-hide"></div>
|
||||
<div id="nav" class="flex-noshrink">
|
||||
<div id="app-icon-logo" class="vertical-hide">
|
||||
<i class="fa-regular fa-fw fa-hand-peace"></i>
|
||||
</div>
|
||||
<button class="nav icon">
|
||||
<i class="fa fa-fw fa-home"></i><span class="hide">Home</span>
|
||||
</button>
|
||||
<button onclick="press_logout()" title="Sign Out" class="nav icon">
|
||||
<i class="fa fa-fw fa-arrow-right-from-bracket"></i><span class="hide">Sign Out</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="content">
|
||||
<header class="flex-noshrink">
|
||||
<label>Home</label>
|
||||
</header>
|
||||
<div id="view"></div>
|
||||
</div>
|
||||
<div class="flex-fill vertical-hide"></div>
|
||||
</div>
|
||||
<div class="modal closed" id="reply-modal">
|
||||
<div id="reply-modal-content" class="modal-content">
|
||||
<header>
|
||||
<label>Reply To</label>
|
||||
<button class="icon" onclick="close_reply()">
|
||||
<i class="fa fa-xmark"></i>
|
||||
</button>
|
||||
</header>
|
||||
<div id="replying-to"></div>
|
||||
<div id="replybox">
|
||||
<textarea id="reply-content" class="post-input"
|
||||
placeholder="Write your reply here..."></textarea>
|
||||
<div class="post-tools">
|
||||
<button id="reply-button" class="action" onclick="do_send_reply()">
|
||||
Reply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue