Improve message layout

This commit is contained in:
2026-02-16 23:28:28 +00:00
parent f3ced1bfd8
commit 073a5b0d0c
2 changed files with 53 additions and 2 deletions

View File

@@ -257,6 +257,14 @@
<div class="compose-source-badge-wrap">
<span class="compose-source-badge source-{{ msg.source_service|default:'web'|lower }}">{{ msg.source_label }}</span>
</div>
{% if msg.block_gap_display %}
<p
class="compose-block-gap"
title="Time since previous message in this sender block">
<span class="icon is-small"><i class="fa-regular fa-hourglass-half"></i></span>
<span class="compose-block-gap-val">{{ msg.block_gap_display }}</span>
</p>
{% endif %}
{% if msg.image_urls %}
{% for image_url in msg.image_urls %}
<figure class="compose-media">
@@ -462,6 +470,20 @@
justify-content: flex-start;
margin-bottom: 0.36rem;
}
#{{ panel_id }} .compose-block-gap {
margin: -0.12rem 0 0.26rem;
display: inline-flex;
align-items: center;
gap: 0.22rem;
font-size: 0.64rem;
line-height: 1.1;
color: #5f6c7d;
opacity: 0.95;
}
#{{ panel_id }} .compose-block-gap-val {
font-weight: 700;
letter-spacing: 0.01em;
}
#{{ panel_id }} .compose-source-badge {
font-size: 0.84rem;
padding: 0.12rem 0.5rem;
@@ -1815,6 +1837,22 @@
badgeWrap.appendChild(badge);
bubble.appendChild(badgeWrap);
}
if (msg.block_gap_display) {
const blockGap = document.createElement("p");
blockGap.className = "compose-block-gap";
blockGap.title = "Time since previous message in this sender block";
const icon = document.createElement("span");
icon.className = "icon is-small";
const i = document.createElement("i");
i.className = "fa-regular fa-hourglass-half";
icon.appendChild(i);
const value = document.createElement("span");
value.className = "compose-block-gap-val";
value.textContent = String(msg.block_gap_display || "");
blockGap.appendChild(icon);
blockGap.appendChild(value);
bubble.appendChild(blockGap);
}
const imageCandidatesFromPayload = Array.isArray(msg.image_urls) && msg.image_urls.length
? msg.image_urls
: (msg.image_url ? [msg.image_url] : []);
@@ -1858,7 +1896,7 @@
icon.appendChild(i);
const timeSpan = document.createElement("span");
timeSpan.className = "compose-tick-time";
timeSpan.textContent = String(msg.read_display || "");
timeSpan.textContent = String(msg.read_delta_display || "");
tickWrap.appendChild(icon);
tickWrap.appendChild(timeSpan);
meta.appendChild(document.createTextNode(" "));
@@ -1874,7 +1912,7 @@
icon.appendChild(i);
const timeSpan = document.createElement("span");
timeSpan.className = "compose-tick-time";
timeSpan.textContent = String(msg.delivered_display || "");
timeSpan.textContent = String(msg.delivered_delta_display || "");
tickWrap.appendChild(icon);
tickWrap.appendChild(timeSpan);
meta.appendChild(document.createTextNode(" "));