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:
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)
