granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make member row clickable, link to crew profile

Browse source
This commit is contained in:
Justin Edmund 2025-12-18 17:48:57 -08:00
parent 3a236032bd
commit 154eed2311
1 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/lib/components/crew/MemberRow.svelte
View file

@ -55,18 +55,20 @@
</script> </script>
<li class="member-row" class:retired={member.retired}> <li class="member-row" class:retired={member.retired}>
<div class="member-info"> <a href="/crew/members/{member.user?.username}" class="member-link">
<div class="member-details"> <div class="member-info">
{#if member.user?.username} <div class="member-details">
<a href="/{member.user.username}" class="username">{member.user.username}</a> {#if member.user?.username}
{:else} <span class="username">{member.user.username}</span>
<span class="username">Unknown</span> {:else}
{/if} <span class="username">Unknown</span>
{#if member.joinedAt} {/if}
<span class="joined-date">Joined {formatDate(member.joinedAt)}</span> {#if member.joinedAt}
{/if} <span class="joined-date">Joined {formatDate(member.joinedAt)}</span>
{/if}
</div>
</div> </div>
</div> </a>
<div class="member-actions"> <div class="member-actions">
<span class="role-badge {getRoleClass(member.role)}"> <span class="role-badge {getRoleClass(member.role)}">
@ -79,6 +81,12 @@
{/snippet} {/snippet}
{#snippet menu()} {#snippet menu()}
{#if member.user?.username} {#if member.user?.username}
<DropdownMenuBase.Item
class="dropdown-menu-item"
onclick={() => goto(`/crew/members/${member.user?.username}`)}
>
View crew profile
</DropdownMenuBase.Item>
<DropdownMenuBase.Item <DropdownMenuBase.Item
class="dropdown-menu-item" class="dropdown-menu-item"
onclick={() => goto(`/${member.user?.username}`)} onclick={() => goto(`/${member.user?.username}`)}
@ -122,7 +130,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: spacing.$unit spacing.$unit spacing.$unit spacing.$unit-2x;
border-radius: layout.$item-corner; border-radius: layout.$item-corner;
transition: background-color 0.15s; transition: background-color 0.15s;
@ -135,6 +142,15 @@
} }
} }
.member-link {
flex: 1;
display: flex;
align-items: center;
padding: spacing.$unit spacing.$unit spacing.$unit spacing.$unit-2x;
text-decoration: none;
color: inherit;
}
.member-info { .member-info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -151,17 +167,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: spacing.$unit; gap: spacing.$unit;
padding-right: spacing.$unit;
} }
.username { .username {
font-size: typography.$font-small; font-size: typography.$font-small;
font-weight: typography.$medium; font-weight: typography.$medium;
color: var(--text-primary); color: var(--text-primary);
text-decoration: none;
}
a.username:hover {
text-decoration: underline;
} }
.role-badge { .role-badge {