alemi/upub
alemi/upub
1
0
Fork 1
Code Issues 4 Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat(web): added CWs, better images

Browse source
This commit is contained in:
əlemi 2024-04-23 23:28:19 +02:00
parent d50a762f63
commit 8969780b29
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 46 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/index.html
View file

@ -155,10 +155,11 @@
max-height: 2em; max-height: 2em;
} }
img.attachment { img.attachment {
max-height: 15em; height: 10em;
max-width: 90%; width: 100%;
border: 5px solid #bf616a; border: 5px solid #bf616a;
padding: 5px; padding: 5px;
object-fit: cover;
} }
div.tl-header { div.tl-header {
background-color: #bf616a55; background-color: #bf616a55;
@ -181,6 +182,19 @@
td.bottom { td.bottom {
vertical-align: 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 { input[type="submit"].active {
background-color: var(--accent); background-color: var(--accent);
border-color: var(--accent); border-color: var(--accent);

33
web/src/components/object.rs
View file

@ -7,15 +7,23 @@ use apb::{target::Addressed, Base, Object};
#[component] #[component]
pub fn Object(object: serde_json::Value) -> impl IntoView { pub fn Object(object: serde_json::Value) -> impl IntoView {
let uid = object.id().unwrap_or_default().to_string(); 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 content = dissolve::strip_html_tags(object.content().unwrap_or_default());
let author_id = object.attributed_to().id().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 author = CACHE.get_or(&author_id, serde_json::Value::String(author_id.clone()));
let attachments = object.attachment() let attachments = object.attachment()
.map(|x| view! { .map(|x| view! {
<p class="center"><img class="attachment" src={x.url().id().unwrap_or_default()} title={x.name().unwrap_or_default().to_string()} /></p> <p class="center">
<a href={x.url().id().unwrap_or_default()} target="_blank">
<img class="attachment" src={x.url().id().unwrap_or_default()} title={x.name().unwrap_or_default().to_string()} />
</a>
</p>
}) })
.collect_view(); .collect_view();
let attachments_padding = if object.attachment().is_empty() {
None
} else {
Some(view! { <div class="pb-1"></div> })
};
view! { view! {
<table class="align w-100"> <table class="align w-100">
<tr> <tr>
@ -33,10 +41,27 @@ pub fn Object(object: serde_json::Value) -> impl IntoView {
</tr> </tr>
</table> </table>
<blockquote class="tl"> <blockquote class="tl">
{if summary.is_empty() { None } else { Some(view! { <code class="color ml-1">{summary}</code> })}} <Summary summary=object.summary().map(|x| x.to_string()) >
{content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()} {content.into_iter().map(|x| view! { <p>{x}</p> }).collect_view()}
</blockquote> {attachments_padding}
{attachments} {attachments}
</Summary>
</blockquote>
}
}
#[component]
pub fn Summary(summary: Option<String>, children: Children) -> impl IntoView {
match summary.filter(|x| !x.is_empty()) {
None => children().into_view(),
Some(summary) => view! {
<details class="pa-s">
<summary>
<code class="cw color ml-s w-100">{summary}</code>
</summary>
{children()}
</details>
}.into_view(),
} }
} }