[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; text-overflow: ellipsis;
overflow: clip; overflow: clip;
white-space: wrap; white-space: wrap;
.host {
opacity: 0.5;
}
} }
min-width: 2rem; min-width: 2rem;
overflow: clip; overflow: clip;

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/> <UserAvatar User="@el"/>
<div class="name-section"> <div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div> <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>
</div> </div>
} }

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/> <UserAvatar User="@el"/>
<div class="name-section"> <div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div> <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>
</div> </div>
} }

View file

@ -14,7 +14,13 @@
<UserAvatar User="@el"/> <UserAvatar User="@el"/>
<div class="name-section"> <div class="name-section">
<div class="displayname"><UserDisplayName User="@el"/></div> <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>
</div> </div>
} }

View file

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

View file

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

View file

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