ssb: Continuing to untangle message CSS.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&sPU6rF2WYaSdq1SBw5XyxOjiahAxtGUbeg0LOpkQ6Eg=.sha256"
+	"previous": "&LZizSyrgaKYbjRKj2FfmnCTnkB39ndQ9AVWVC4o3AQk=.sha256"
 }

apps/ssb/tf-message.js

@@ -368,21 +368,125 @@ class TfMessageElement extends LitElement {
 				: 'w3-theme-d4';
 	}
 
-	render_small_frame(inner) {
-		let self = this;
+	get_content() {
+		let content = this.message?.content;
+		if (this.message?.decrypted?.type == 'post') {
+			content = this.message.decrypted;
+		}
+		return content;
+	}
+
+	render_raw_button() {
+		let content = this.get_content();
+		let raw_button;
+		switch (this.format) {
+			case 'raw':
+				if (content?.type == 'post' || content?.type == 'blog') {
+					raw_button = html`<button
+						class="w3-button w3-theme-d1"
+						@click=${() => (this.format = 'md')}
+					>
+						Markdown
+					</button>`;
+				} else {
+					raw_button = html`<button
+						class="w3-button w3-theme-d1"
+						@click=${() => (this.format = 'message')}
+					>
+						Message
+					</button>`;
+				}
+				break;
+			case 'md':
+				raw_button = html`<button
+					class="w3-button w3-theme-d1"
+					@click=${() => (this.format = 'message')}
+				>
+					Message
+				</button>`;
+				break;
+			case 'decrypted':
+				raw_button = html`<button
+					class="w3-button w3-theme-d1"
+					@click=${() => (this.format = 'raw')}
+				>
+					Raw
+				</button>`;
+				break;
+			default:
+				if (this.message.decrypted) {
+					raw_button = html`<button
+						class="w3-button w3-theme-d1"
+						@click=${() => (this.format = 'decrypted')}
+					>
+						Decrypted
+					</button>`;
+				} else {
+					raw_button = html`<button
+						class="w3-button w3-theme-d1"
+						@click=${() => (this.format = 'raw')}
+					>
+						Raw
+					</button>`;
+				}
+				break;
+		}
+		return raw_button;
+	}
+
+	render_header() {
+		let is_encrypted = this.message?.decrypted
+			? html`<span class="w3-col" style="align-self: center">🔓</span>`
+			: undefined;
 		return html`
-			<div
-				class="w3-card-4 ${this.class_background()} w3-border-theme"
-				style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-			>
-				<tf-user id=${self.message.author} .users=${self.users}></tf-user>
-				<span style="padding-right: 8px; text-wrap: nowrap"
-					><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
+			<header class="w3-bar">
+				<span class="w3-bar-item">
+					<tf-user id=${this.message.author} .users=${this.users}></tf-user>
+				</span>
+				${is_encrypted}
+				<span class="w3-bar-item w3-right">${this.render_raw_button()}</span>
+				<span class="w3-bar-item w3-right" style="text-wrap: nowrap"
+					><a
+						target="_top"
+						href=${'#' + encodeURIComponent(this.message.id)}
 						>%</a
 					>
-					${new Date(self.message.timestamp).toLocaleString()}</span
+					${new Date(this.message.timestamp).toLocaleString()}</span
 				>
-				${raw_button} ${self.format == 'raw' ? self.render_raw() : inner}
+			</header>
+		`;
+	}
+
+	render_frame(inner) {
+		return html`
+			<style>
+				code {
+					white-space: pre-wrap;
+					overflow-wrap: break-word;
+				}
+				div {
+					overflow-wrap: anywhere;
+				}
+				img {
+					max-width: 100%;
+					height: auto;
+					display: block;
+				}
+			</style>
+			<div
+				class="w3-card-4 ${this.class_background()} w3-border-theme w3-margin"
+				style="overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
+			>
+				${inner}
+			</div>
+			`;
+	}
+
+	render_small_frame(inner) {
+		let self = this;
+		return this.render_frame(html`
+				${self.render_header()}
+				${self.format == 'raw' ? self.render_raw() : inner}
 				${self.render_votes()}
 				${(self.message.child_messages || []).map(
 					(x) => html`
@@ -397,11 +501,11 @@ class TfMessageElement extends LitElement {
 						></tf-message>
 					`
 				)}
-			</div>
-		`;
+		`);
 	}
 
 	render_actions() {
+		let content = this.get_content();
 		let reply =
 			this.drafts[this.message?.id] !== undefined
 				? html`
@@ -421,7 +525,7 @@ class TfMessageElement extends LitElement {
 						</button>
 					`;
 		return html`
-			<div class="w3-section">
+			<div class="w3-section w3-container">
 				${reply}
 				<button class="w3-button w3-theme-d1" @click=${this.react}>
 					React
@@ -438,64 +542,8 @@ class TfMessageElement extends LitElement {
 		}
 		let class_background = this.class_background();
 		let self = this;
-		let raw_button;
-		switch (this.format) {
-			case 'raw':
-				if (content?.type == 'post' || content?.type == 'blog') {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (self.format = 'md')}
-					>
-						Markdown
-					</button>`;
-				} else {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (self.format = 'message')}
-					>
-						Message
-					</button>`;
-				}
-				break;
-			case 'md':
-				raw_button = html`<button
-					class="w3-button w3-theme-d1"
-					@click=${() => (self.format = 'message')}
-				>
-					Message
-				</button>`;
-				break;
-			case 'decrypted':
-				raw_button = html`<button
-					class="w3-button w3-theme-d1"
-					@click=${() => (self.format = 'raw')}
-				>
-					Raw
-				</button>`;
-				break;
-			default:
-				if (this.message.decrypted) {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (self.format = 'decrypted')}
-					>
-						Decrypted
-					</button>`;
-				} else {
-					raw_button = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => (self.format = 'raw')}
-					>
-						Raw
-					</button>`;
-				}
-				break;
-		}
 		if (this.message?.type === 'contact_group') {
-			return html` <div
-				class="w3-card-4 ${class_background} w3-border-theme"
-				style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-			>
+			return this.render_frame(html`
 				${this.message.messages.map(
 					(x) =>
 						html`<tf-message
@@ -507,13 +555,9 @@ class TfMessageElement extends LitElement {
 							channel=${this.channel}
 							channel_unread=${this.channel_unread}
 						></tf-message>`
-				)}
-			</div>`;
+				)}`);
 		} else if (this.message.placeholder) {
-			return html` <div
-				class="w3-card-4 ${class_background} w3-border-theme"
-				style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-			>
+			return this.render_frame(html`
 				<a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
 					>${this.message.id}</a
 				>
@@ -531,32 +575,31 @@ class TfMessageElement extends LitElement {
 							channel_unread=${this.channel_unread}
 						></tf-message>
 					`
-				)}
-			</div>`;
+				)}`);
 		} else if (typeof (content?.type === 'string')) {
 			if (content.type == 'about') {
 				let name;
 				let image;
 				let description;
 				if (content.name !== undefined) {
-					name = html`<div><b>Name:</b> ${content.name}</div>`;
+					name = html`<div class="w3-container"><b>Name:</b> ${content.name}</div>`;
 				}
 				if (content.image !== undefined) {
 					image = html`
-						<div><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
+						<div class="w3-container"><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
 					`;
 				}
 				if (content.description !== undefined) {
 					description = html`
-						<div style="flex: 1 0 50%; overflow-wrap: anywhere">
+						<div class="w3-container" style="flex: 1 0 50%; overflow-wrap: anywhere">
 							<div>${unsafeHTML(tfutils.markdown(content.description))}</div>
 						</div>
 					`;
 				}
 				let update =
 					content.about == this.message.author
-						? html`<div style="font-weight: bold">Updated profile.</div>`
-						: html`<div style="font-weight: bold">
+						? html`<div class="w3-container" style="font-weight: bold">Updated profile.</div>`
+						: html`<div class="w3-container" style="font-weight: bold">
 								Updated profile for
 								<tf-user id=${content.about} .users=${this.users}></tf-user>.
 							</div>`;
@@ -565,7 +608,7 @@ class TfMessageElement extends LitElement {
 				`);
 			} else if (content.type == 'contact') {
 				return html`
-					<div>
+					<div class="w3-padding">
 						<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 						is
 						${content.blocking === true
@@ -625,88 +668,26 @@ class TfMessageElement extends LitElement {
 				let is_encrypted = this.message?.decrypted
 					? html`<span style="align-self: center">🔓</span>`
 					: undefined;
-				return html`
-					<style>
-						code {
-							white-space: pre-wrap;
-							overflow-wrap: break-word;
-						}
-						div {
-							overflow-wrap: anywhere;
-						}
-						img {
-							max-width: 100%;
-							height: auto;
-							display: block;
-						}
-					</style>
-					<div
-						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-					>
-						<div style="display: flex; flex-direction: row">
-							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
-							${is_encrypted}
-							<span style="flex: 1"></span>
-							<span style="padding-right: 8px; text-wrap: nowrap"
-								><a
-									target="_top"
-									href=${'#' + encodeURIComponent(self.message.id)}
-									>%</a
-								>
-								${new Date(this.message.timestamp).toLocaleString()}</span
-							>
-							<span>${raw_button}</span>
-						</div>
-						${payload} ${this.render_votes()} ${this.render_actions()}
-					</div>
-				`;
+				return this.render_frame(html`
+					${this.render_header()}
+					<div class="w3-container">${payload}</div>
+					${this.render_votes()} ${this.render_actions()}
+				</div>
+				`);
 			} else if (content.type === 'issue') {
 				let is_encrypted = this.message?.decrypted
 					? html`<span style="align-self: center">🔓</span>`
 					: undefined;
-				return html`
-					<style>
-						code {
-							white-space: pre-wrap;
-							overflow-wrap: break-word;
-						}
-						div {
-							overflow-wrap: anywhere;
-						}
-						img {
-							max-width: 100%;
-							height: auto;
-							display: block;
-						}
-					</style>
-					<div
-						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-					>
-						<div style="display: flex; flex-direction: row">
-							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
-							${is_encrypted}
-							<span style="flex: 1"></span>
-							<span style="padding-right: 8px; text-wrap: nowrap"
-								><a
-									target="_top"
-									href=${'#' + encodeURIComponent(self.message.id)}
-									>%</a
-								>
-								${new Date(this.message.timestamp).toLocaleString()}</span
-							>
-							<span>${raw_button}</span>
-						</div>
-						${content.text} ${this.render_votes()}
-						<footer class="w3-container">
-							<button class="w3-button w3-theme-d1" @click=${this.react}>
-								React
-							</button>
-							${this.render_children()}
-						</footer>
-					</div>
-				`;
+				return this.render_frame(html`
+					${this.render_header()}
+					${content.text} ${this.render_votes()}
+					<footer class="w3-container">
+						<button class="w3-button w3-theme-d1" @click=${this.react}>
+							React
+						</button>
+						${this.render_children()}
+					</footer>
+				`);
 			} else if (content.type === 'blog') {
 				let self = this;
 				tfrpc.rpc.get_blob(content.blog).then(function (data) {
@@ -742,44 +723,12 @@ class TfMessageElement extends LitElement {
 						`;
 						break;
 				}
-				return html`
-					<style>
-						code {
-							white-space: pre-wrap;
-							overflow-wrap: break-word;
-						}
-						div {
-							overflow-wrap: anywhere;
-						}
-						img {
-							max-width: 100%;
-							height: auto;
-							display: block;
-						}
-					</style>
-					<div
-						class="w3-card-4 ${class_background} w3-border-theme"
-						style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
-					>
-						<div style="display: flex; flex-direction: row">
-							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
-							<span style="flex: 1"></span>
-							<span style="padding-right: 8px; text-wrap: nowrap"
-								><a
-									target="_top"
-									href=${'#' + encodeURIComponent(self.message.id)}
-									>%</a
-								>
-								${new Date(this.message.timestamp).toLocaleString()}</span
-							>
-							<span>${raw_button}</span>
-						</div>
-
-						<div>${body}</div>
-						${this.render_mentions()} ${this.render_votes()}
-						${this.render_actions()}
-					</div>
-				`;
+				return this.render_frame(html`
+					${this.render_header()}
+					<div>${body}</div>
+					${this.render_mentions()} ${this.render_votes()}
+					${this.render_actions()}
+				`);
 			} else if (content.type === 'pub') {
 				return this.render_small_frame(
 					html` <style>