forked from alemi/upub
feat(web): added CWs, better images
This commit is contained in:
parent
d50a762f63
commit
8969780b29
2 changed files with 46 additions and 7 deletions
|
@ -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);
|
||||||
|
|
|
@ -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()}
|
||||||
|
{attachments_padding}
|
||||||
|
{attachments}
|
||||||
|
</Summary>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
{attachments}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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(),
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue