damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

commit 8b68c769517f01646f4fcec8edb47410776cd450
parent 1b49a7029bb7ba69adeba555e1d88196bb98c6dd
Author: William Casarin <jb55@jb55.com>
Date:   Sat, 12 Nov 2022 14:15:46 -0800

web: cap the size of reply boxes

also add a nice divider line before the input box

Diffstat:
Mweb/css/styles.css | 11+++++++++++
Mweb/index.html | 6+++---
Mweb/js/ui/render.js | 2+-
3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/web/css/styles.css b/web/css/styles.css @@ -163,6 +163,17 @@ button.nav { .chatroom-name { font-weight: bold; } + +#replying-to { + max-height: 200px; + overflow-y: scroll; +} + +#replybox { + margin-top: 10px; + border-top: 1px solid var(--clrBorder); +} + .timestamp, .replying-to, .boosted-by { font-size: var(--fsSmall); color: var(--clrTextLight); diff --git a/web/index.html b/web/index.html @@ -4,7 +4,7 @@ <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=112"> + <link rel="stylesheet" href="css/styles.css?v=113"> <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> @@ -12,7 +12,7 @@ <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=67"></script> + <script defer src="js/damus.js?v=68"></script> </head> <body> <script> @@ -66,7 +66,7 @@ </button> </header> <div id="replying-to"></div> - <div> + <div id="replybox"> <textarea id="reply-content" class="post-input" placeholder="Write your reply here..."></textarea> <div class="post-tools"> diff --git a/web/js/ui/render.js b/web/js/ui/render.js @@ -201,7 +201,7 @@ function render_event(model, ev, opts={}) { } const has_top_line = replied_events !== "" - const border_bottom = has_bot_line ? "" : "bottom-border"; + const border_bottom = opts.is_composing || has_bot_line ? "" : "bottom-border"; return ` ${replied_events} <div id="ev${ev.id}" class="event ${border_bottom}">