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

feat(web): expandable images

Browse source 
is it sustainable to create a signal for each image? we'll find out!
This commit is contained in:
əlemi 2024-04-24 04:58:46 +02:00
parent 1ce364276b
commit 7617170206
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/index.html
View file

@ -155,12 +155,18 @@
max-height: 2em; max-height: 2em;
} }
img.attachment { img.attachment {
cursor: pointer;
height: 10em; height: 10em;
width: 100%; width: 100%;
border: 5px solid #bf616a; border: 5px solid #bf616a;
padding: 5px; padding: 5px;
object-fit: cover; object-fit: cover;
} }
img.expand {
height: unset;
max-height: 50vh;
object-fit: contain;
}
div.tl-header { div.tl-header {
background-color: #bf616a55; background-color: #bf616a55;
color: #bf616a; color: #bf616a;

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

@ -11,12 +11,19 @@ pub fn Object(object: serde_json::Value) -> impl IntoView {
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| {
<p class="center"> let (expand, set_expand) = create_signal(false);
<a href={x.url().id().unwrap_or_default()} target="_blank"> view! {
<img class="attachment ml-1" src={x.url().id().unwrap_or_default()} title={x.name().unwrap_or_default().to_string()} /> <p class="center">
</a> <img
</p> class="attachment ml-1"
class:expand=expand
src={x.url().id().unwrap_or_default()}
title={x.name().unwrap_or_default().to_string()}
on:click=move |_| set_expand.set(!expand.get())
/>
</p>
}
}) })
.collect_view(); .collect_view();
let attachments_padding = if object.attachment().is_empty() { let attachments_padding = if object.attachment().is_empty() {