damus.io

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

commit f6c3fc3ff91faa36d2cd3fb5bb6d936687bd166d
parent e4b3162713d80db2fb2eba1c126de935150e356f
Author: William Casarin <jb55@jb55.com>
Date:   Fri, 11 Nov 2022 12:07:43 -0800

web: make mobile view better

Diffstat:
Mwebv2/damus.css | 34+++++++++++++++++++++++++---------
Mwebv2/damus.js | 8++++----
Mwebv2/index.html | 4++--
3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/webv2/damus.css b/webv2/damus.css @@ -210,7 +210,6 @@ html { @media (max-width: 600px) { .container { font-size: 0.9em; - padding: 1em; } } @media print { @@ -289,37 +288,54 @@ html { color: rgba(255.0,255.0,255.0,0.7); } +.invisible { + visibility: hidden; +} + @media (max-width: 800px){ /* Reverse the order of elements in the user comments, so that the avatar and info appear after the text. */ - .comment .info { - text-align: left; - } .pfp { - order: 1; margin: 0 0 0 0; } .pfpbox { - margin-right: 20px; + order: 1; + margin-right: 10px; + } + + .comment .info { + order: 2; + text-align: left; + width: 70%; } .comment .comment-body { width: 100%; + order: 3; + margin: 5px 0 0 0; + } + + .line-top { + height: 20px; } - .line-top, .line-bottom { - display: none; + .line-bottom { + /*display: none;*/ } .comment { - padding: 10px; + margin: 0 0 0 0; align-items: center; border-radius: 8px; /*background-color: rgba(255.0,255.0,255.0,0.1);*/ } + #newpost { + width: 100%; + } + .comment p { order: 3; width: 100%; diff --git a/webv2/damus.js b/webv2/damus.js @@ -661,8 +661,9 @@ function determine_event_refs(tags) { return {root, reply, pubkeys} } -function render_reply_line_top() { - return `<div class="line-top"></div>` +function render_reply_line_top(invisible) { + const classes = invisible ? "invisible" : "" + return `<div class="line-top ${classes}"></div>` } function render_reply_line_bot() { @@ -859,7 +860,6 @@ function render_event(model, ev, opts={}) { return "" const replied_events = render_replied_events(model, ev, opts) - const reply_line_top = replied_events === "" ? "" : render_reply_line_top() return ` ${replied_events} @@ -869,7 +869,7 @@ function render_event(model, ev, opts={}) { <span class="timestamp">${delta}</span> </div> <div class="pfpbox"> - ${reply_line_top} + ${render_reply_line_top(replied_events === "")} ${deleted ? render_deleted_pfp() : render_pfp(ev.pubkey, profile)} ${reply_line_bot} </div> diff --git a/webv2/index.html b/webv2/index.html @@ -6,7 +6,7 @@ <title>Damus</title> - <link rel="stylesheet" href="damus.css?v=19"> + <link rel="stylesheet" href="damus.css?v=20"> </head> <body> <section class="header"> @@ -41,7 +41,7 @@ <script src="noble-secp256k1.js?v=1"></script> <script src="bech32.js?v=1"></script> <script src="nostr.js?v=6"></script> - <script src="damus.js?v=56"></script> + <script src="damus.js?v=57"></script> <script> // I have to delay loading to wait for nos2x const relay = setTimeout(damus_web_init, 100)