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

fix(web): even more reliable actor header

Browse source
This commit is contained in:
əlemi 2024-12-27 01:21:15 +01:00
parent a6494e8068
commit 5c0577b00c
Signed by: alemi
GPG key ID: A4895B84D311642C
2 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
web/index.html
View file

@ -203,8 +203,8 @@
} }
div.overlap { div.overlap {
position: relative; position: relative;
bottom: 3em; bottom: 2em;
margin-bottom: -3em; margin-bottom: -2em;
} }
img { img {
max-width: 100%; max-width: 100%;
@ -280,6 +280,12 @@
p.tiny-text { p.tiny-text {
line-height: .75em; line-height: .75em;
} }
p.line {
margin: 0;
}
p.shadow {
text-shadow: 0px 0px 3px var(--background);
}
table.post-table { table.post-table {
border-collapse: collapse; border-collapse: collapse;
} }

26
web/src/actors/header.rs
View file

@ -68,15 +68,17 @@ pub fn ActorHeader() -> impl IntoView {
<div class="pl-1 pr-1" style="display: flex"> <div class="pl-1 pr-1" style="display: flex">
<img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em" onerror={format!("this.onerror=null; this.src='{FALLBACK_IMAGE_URL}';")} /> <img class="avatar avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em" onerror={format!("this.onerror=null; this.src='{FALLBACK_IMAGE_URL}';")} />
<div class="ma-s pt-3"> <div class="ma-s">
<b class="big">{name}</b>{actor_type_tag}<br/> <p class="line shadow">
<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small><br/> <span class="emoji mr-s">"\u{1f582}"</span><small>{actor.statuses_count().unwrap_or_default()}</small>
<DateTime t=created /> <span class="emoji ml-1 mr-s">"👥"</span><small>{actor.following_count().unwrap_or_default()}</small>
<span class="emoji ml-1 mr-s">"📢"</span><small>{actor.followers_count().unwrap_or_default()}</small>
</p>
<p class="line pt-1"><b class="big mt-1">{name}</b>{actor_type_tag}</p>
<p class="line"><small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small></p>
<p class="line"><DateTime t=created /></p>
</div> </div>
<div class="ma-s pt-3 rev" style="flex-grow: 1; white-space: nowrap;"> <div class="ma-s pt-3 rev" style="flex-grow: 1; white-space: nowrap;">
{actor.statuses_count().unwrap_or_default()}" "<span class="emoji">"\u{1f582}"</span><br/>
{actor.following_count().unwrap_or_default()}" "<span class="emoji">"👥"</span><br/>
{actor.followers_count().unwrap_or_default()}" "<span class="emoji">"📢"</span>
</div> </div>
</div> </div>
<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid> <div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
@ -102,13 +104,13 @@ pub fn ActorHeader() -> impl IntoView {
</div> </div>
<p class="mt-2"> <p class="mt-2">
<span class:tab-active=move || matches!(matched_route.get(), FeedRoute::User)> <span class:tab-active=move || matches!(matched_route.get(), FeedRoute::User)>
<a class="clean" href=web_path.clone()><span class="emoji ml-2">"🖂 "</span>"statuses"</a> <a class="clean" href=web_path.clone()><span class="emoji">"🖂 "</span>"outbox"</a>
</span> </span>
<span style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Followers)> <span class="ml-1" style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Followers)>
<a class="clean" href=format!("{web_path}/followers")><span class="emoji ml-2">"📢 "</span>"followers"</a> <a class="clean" href=format!("{web_path}/followers")><span class="emoji">"📢"</span><span class:hidden-on-mobile=move || !matches!(matched_route.get(), FeedRoute::Followers)>" followers"</span></a>
</span> </span>
<span style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Following)> <span class="ml-1" style="float: right" class:tab-active=move || matches!(matched_route.get(), FeedRoute::Following)>
<a class="clean" href=format!("{web_path}/following")><span class="emoji ml-2">"👥 "</span>"following"</a> <a class="clean" href=format!("{web_path}/following")><span class="emoji">"👥"</span><span class:hidden-on-mobile=move || !matches!(matched_route.get(), FeedRoute::Following)>" following"</span></a>
</span> </span>
</p> </p>
<hr class="color" /> <hr class="color" />