fix(web): img max width, slim activity header

This commit is contained in:
əlemi 2024-04-22 03:31:51 +02:00
parent af8310bfc9
commit a51a70da0a
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 19 additions and 16 deletions

View file

@ -154,6 +154,7 @@
} }
img.attachment { img.attachment {
max-height: 15em; max-height: 15em;
max-width: 90%;
border: 5px solid #bf616a; border: 5px solid #bf616a;
padding: 5px; padding: 5px;
} }
@ -184,7 +185,13 @@
color: var(--background); color: var(--background);
cursor: pointer; cursor: pointer;
} }
.ml-1-r {
margin-left: 1em;
}
@media screen and (max-width: 786px) { @media screen and (max-width: 786px) {
.ml-1-r {
margin-left: 0;
}
.hidden-on-mobile { .hidden-on-mobile {
display: none; display: none;
} }

View file

@ -16,22 +16,18 @@ pub fn ActivityLine(activity: serde_json::Value) -> impl IntoView {
let kind = activity.activity_type().unwrap_or(apb::ActivityType::Activity); let kind = activity.activity_type().unwrap_or(apb::ActivityType::Activity);
view! { view! {
<div> <div>
<table class="align w-100" style="table-layout: fixed">
<tr>
<td>
<a href={Uri::web(FetchKind::User, &actor_id)} class="clean hover"> <a href={Uri::web(FetchKind::User, &actor_id)} class="clean hover">
<img src={avatar} class="avatar-inline mr-s ml-1" /><b>{username}</b><small>@{domain}</small> <img src={avatar} class="avatar-inline mr-s ml-1-r" /><b>{username}</b><small>@{domain}</small>
</a> </a>
</td> <span style="float:right">
<td class="rev" > <a class="upub-title clean" href={Uri::web(FetchKind::Object, &object_id)} ><code class="color moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code></a>
<code class="color moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code> <a class="hover ml-1 hidden-on-mobile" href={Uri::web(FetchKind::Object, &object_id)} >
<a class="hover ml-1" href={Uri::web(FetchKind::Object, &object_id)} >
<DateTime t=activity.published() /> <DateTime t=activity.published() />
</a> </a>
<span class="hidden-on-mobile">
<PrivacyMarker addressed=activity.addressed() /> <PrivacyMarker addressed=activity.addressed() />
</td> </span>
</tr> </span>
</table>
</div> </div>
} }
} }