[frontend/components] Display username host-part consistently

This commit is contained in:
pancakes 2025-03-25 15:13:22 +10:00
parent dc8a8b815b
commit 3d9c950b58
No known key found for this signature in database
7 changed files with 27 additions and 11 deletions

View file

@ -8,10 +8,6 @@
text-overflow: ellipsis;
overflow: clip;
white-space: wrap;
.host {
opacity: 0.5;
}
}
min-width: 2rem;
overflow: clip;

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/>
<div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div>
<div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
<div class="username">
@@@el.Username
@if (el.Host != null)
{
<span class="host">@@@el.Host</span>
}
</div>
</div>
</div>
}

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/>
<div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div>
<div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
<div class="username">
@@@el.Username
@if (el.Host != null)
{
<span class="host">@@@el.Host</span>
}
</div>
</div>
</div>
}

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/>
<div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div>
<div class="username">@@@el.Username@(el.Host != null ? $"@{el.Host}" : "")</div>
<div class="username">
@@@el.Username
@if (el.Host != null)
{
<span class="host">@@@el.Host</span>
}
</div>
</div>
</div>
}

View file

@ -20,8 +20,7 @@
@@@User.Username
@if (User.Host != null)
{
var host = $"@{User.Host}";
@host
<span class="host">@@@User.Host</span>
}
</div>
<div class="metadata">

View file

@ -48,8 +48,7 @@
@@@UserResponse.Username
@if (UserResponse.Host != null)
{
var host = $"@{UserResponse.Host}";
@host
<span class="host">@@@UserResponse.Host</span>
}
@if (Profile != null && Profile.Relations.HasFlag(Relations.FollowedBy))
{

View file

@ -348,6 +348,10 @@ pre:has(code) {
animation: 3s spinner infinite;
}
.host {
opacity: 0.5;
}
.lazy-component-target-internal.visible {
transition: min-height 1s ease-in;
min-height: 0;