diff --git a/web/index.html b/web/index.html index 73bc3a28..32d7b87f 100644 --- a/web/index.html +++ b/web/index.html @@ -155,10 +155,11 @@ max-height: 2em; } img.attachment { - max-height: 15em; - max-width: 90%; + height: 10em; + width: 100%; border: 5px solid #bf616a; padding: 5px; + object-fit: cover; } div.tl-header { background-color: #bf616a55; @@ -181,6 +182,19 @@ td.bottom { vertical-align: bottom; } + details>summary::marker { + display: none; + } + details>summary { + list-style: none; + cursor: pointer; + } + details>summary:hover { + font-weight: bold; + } + code.cw { + display: block; + } input[type="submit"].active { background-color: var(--accent); border-color: var(--accent); diff --git a/web/src/components/object.rs b/web/src/components/object.rs index c35986a3..adab2703 100644 --- a/web/src/components/object.rs +++ b/web/src/components/object.rs @@ -7,15 +7,23 @@ use apb::{target::Addressed, Base, Object}; #[component] pub fn Object(object: serde_json::Value) -> impl IntoView { let uid = object.id().unwrap_or_default().to_string(); - let summary = object.summary().unwrap_or_default().to_string(); let content = dissolve::strip_html_tags(object.content().unwrap_or_default()); let author_id = object.attributed_to().id().unwrap_or_default(); let author = CACHE.get_or(&author_id, serde_json::Value::String(author_id.clone())); let attachments = object.attachment() .map(|x| view! { -

+

+ + + +

}) .collect_view(); + let attachments_padding = if object.attachment().is_empty() { + None + } else { + Some(view! {
}) + }; view! { @@ -33,10 +41,27 @@ pub fn Object(object: serde_json::Value) -> impl IntoView {
- {if summary.is_empty() { None } else { Some(view! { {summary} })}} - {content.into_iter().map(|x| view! {

{x}

}).collect_view()} + + {content.into_iter().map(|x| view! {

{x}

}).collect_view()} + {attachments_padding} + {attachments} +
- {attachments} + } +} + +#[component] +pub fn Summary(summary: Option, children: Children) -> impl IntoView { + match summary.filter(|x| !x.is_empty()) { + None => children().into_view(), + Some(summary) => view! { +
+ + {summary} + + {children()} +
+ }.into_view(), } }