From 41cbde934aea36f359bbde8ad8a4ed03c6020ba8 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 13 Apr 2025 21:38:56 -0400
Subject: [PATCH] ssb: Layout the message expand/collapse buttons better.
---
apps/ssb.json | 2 +-
apps/ssb/tf-message.js | 37 +++++++++++++++++++++++--------------
2 files changed, 24 insertions(+), 15 deletions(-)
diff --git a/apps/ssb.json b/apps/ssb.json
index 9160fa7b..179f1103 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🦀",
- "previous": "&D/qe/rryIyx9bNbsyuNvsYJt1H7b28iWxR65Ql2lF5Q=.sha256"
+ "previous": "&mHXzUyx8vCpgyzOdGjGQlL1qrbsoc32knUR066aIzTM=.sha256"
}
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 91cbb470..08290d0b 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -310,19 +310,18 @@ class TfMessageElement extends LitElement {
let self = this;
if (this.message.child_messages?.length) {
if (!this.expanded[this.message.id]) {
- return html`<button
- class="w3-button w3-theme-d1"
- @click=${() => self.set_expanded(true)}
- >
- + ${this.total_child_messages(this.message) + ' More'}
- </button>`;
- } else {
- return html`<button
- class="w3-button w3-theme-d1"
- @click=${() => self.set_expanded(false)}
+ return html`
+ <button
+ class="w3-button w3-theme-d1 w3-block w3-bar"
+ style="box-sizing: border-box"
+ @click=${() => self.set_expanded(true)}
>
- Collapse</button
- >${repeat(
+ + ${this.total_child_messages(this.message) + ' More'}
+ </button>
+ `;
+ } else {
+ return html`
+ ${repeat(
this.message.child_messages || [],
(x) => x.id,
(x) =>
@@ -335,7 +334,14 @@ class TfMessageElement extends LitElement {
channel=${this.channel}
channel_unread=${this.channel_unread}
></tf-message>`
- )}`;
+ )}
+ <button
+ class="w3-button w3-theme-d1 w3-block w3-bar"
+ style="box-sizing: border-box"
+ @click=${() => self.set_expanded(false)}
+ >
+ Collapse</button
+ >`;
}
} else {
return undefined;
@@ -546,8 +552,11 @@ class TfMessageElement extends LitElement {
: undefined;
return html`
<div class="w3-section w3-container">
- ${reply} ${this.render_children()}
+ ${reply}
</div>
+ <footer>
+ ${this.render_children()}
+ </footer>
`;
}