commit ddee626bf5bef1ce3ca4a533e9f05fd52b6c641d
parent 59e25e9087cecddd5dbe7c06d5c49191cde17f1c
Author: Thomas Mathews <thomas.c.mathews@gmail.com>
Date: Sat, 12 Nov 2022 14:27:54 -0800
web: responsive navigation
Diffstat:
| A | web/css/responsive.css | | | 37 | +++++++++++++++++++++++++++++++++++++ |
| M | web/css/styles.css | | | 83 | ++++++++++++++++++++++++++++++++----------------------------------------------- |
| M | web/index.html | | | 143 | +++++++++++++++++++++++++++++++++++++------------------------------------------- |
3 files changed, 137 insertions(+), 126 deletions(-)
diff --git a/web/css/responsive.css b/web/css/responsive.css
@@ -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;
+ }
+}
diff --git a/web/css/styles.css b/web/css/styles.css
@@ -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;
- }
-}
diff --git a/web/index.html b/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>
