diff --git a/server/src/html/forum/ingest.rs b/server/src/html/forum/ingest.rs index 168106e495cf1a81f62f6a49e35c64beea287924..308358abc6cd6811079d9ec41b114093c0294d02 100644 --- a/server/src/html/forum/ingest.rs +++ b/server/src/html/forum/ingest.rs @@ -45,6 +45,7 @@ fn post_header_meta( principal: &str, ts: i64, now: i64, + delete_post_id: Option<&str>, ) -> Markup { let post_href = nav.post_url(tag, post_idx); let profile = profile_href(principal); @@ -52,11 +53,19 @@ fn post_header_meta( let ago = timeago::timeago(now, ts); html! { div class="ingest-meta muted" title=(hover) { - a href=(post_href) class="post-num" { "#" (post_idx) } - " " - a href=(profile) class="post-author" { "@" (principal) } - " · " - (ago) + span class="ingest-meta-primary" { + a href=(post_href) class="post-num" { "#" (post_idx) } + " " + a href=(profile) class="post-author" { "@" (principal) } + " · " + (ago) + } + @if let Some(pid) = delete_post_id { + form class="post-delete-form" method="POST" action="/ui" { + input type="hidden" name=(UI_RPC_FIELD) value=(template_json_compact(&HtmlUiAction::RedactPost { post_id: pid.to_string() }).unwrap()); + button type="submit" class="post-delete-btn" { "delete" } + } + } } } } @@ -70,18 +79,12 @@ pub(super) fn post_header_row( now: i64, show_delete: bool, ) -> Markup { - let meta = post_header_meta(nav, tag, post_idx, &ing.principal, ing.ts, now); - html! { - div class="ingest-header-row" { - (meta) - @if show_delete { - form class="post-delete-form" method="POST" action="/ui" { - input type="hidden" name=(UI_RPC_FIELD) value=(template_json_compact(&HtmlUiAction::RedactPost { post_id: ing.id.clone() }).unwrap()); - button type="submit" class="post-delete-btn" { "delete" } - } - } - } - } + let delete_post_id = if show_delete { + Some(ing.id.as_str()) + } else { + None + }; + post_header_meta(nav, tag, post_idx, &ing.principal, ing.ts, now, delete_post_id) } pub(super) fn redacted_header_row( @@ -92,7 +95,7 @@ pub(super) fn redacted_header_row( now: i64, expanded: bool, ) -> Markup { - let meta = post_header_meta(nav, tag, post_idx, &ing.principal, ing.ts, now); + let meta = post_header_meta(nav, tag, post_idx, &ing.principal, ing.ts, now, None); let rpc_expand = template_json_compact(&json!({ "action": "expand_redacted_post", "room": nav.room_wire, diff --git a/server/static/theme_default.css b/server/static/theme_default.css index 560881c1eec62f12d1e66875287be3c2f39198fc..83b49d079e6bf3e47c27fbd443a0ae75b1a03051 100644 --- a/server/static/theme_default.css +++ b/server/static/theme_default.css @@ -552,12 +552,21 @@ pre a.pre-link { } div.ingest-meta { + align-items: center; background: var(--g3); border-bottom: 2px solid var(--lo); color: var(--meta); + display: flex; + flex-wrap: wrap; font-size: 12px; + gap: 6px 10px; + justify-content: space-between; padding: 3px 10px; } +span.ingest-meta-primary { + flex: 1 1 auto; + min-width: 0; +} a.post-num { color: var(--meta); font-size: 12px; } a.post-num:hover { color: var(--signal); } a.post-author { color: var(--meta); font-size: 12px; text-decoration: none; } @@ -579,7 +588,12 @@ div.ingest-header-row div.ingest-meta { flex: 1 1 auto; padding: 0; } -form.post-delete-form { display: inline; margin: 0; } +form.post-delete-form { + display: block; + flex-shrink: 0; + margin: 0; + margin-left: auto; +} button.post-delete-btn { background: var(--g4); border: var(--bv) solid; diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css index eb022a8c84c1d0cff36410541872d68a11195e31..7181c7f8547940a402ae0211220fd6ee93ee1364 100644 --- a/server/static/theme_retro_craft.css +++ b/server/static/theme_retro_craft.css @@ -132,8 +132,22 @@ p.post-truncation-action { margin: 0; } div.ingest-meta { + align-items: center; border-bottom: 1px solid var(--line); - padding: 0.35rem 0.65rem; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding-left: 0.35rem; +} +span.ingest-meta-primary { + flex: 1 1 auto; + min-width: 0; +} +form.post-delete-form { + display: block; + flex-shrink: 0; + margin: 0; + margin-left: auto; } a.post-num { color: var(--ink-dim);