Show user card when hovering user avatar on team member listing

Kadantte · Jan 21, 2025 · 312363c · 312363c
1 parent 01a93dc
commit 312363c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/resources/css/bem/team-members-manage.less b/resources/css/bem/team-members-manage.less
@@ -8,7 +8,7 @@
   font-size: @font-size--title-small;
   display: grid;
   gap: 2px 10px;
-  grid-template-columns: auto 1fr auto auto auto;
+  grid-template-columns: 1fr auto auto auto;
 
   &__avatar {
     .default-border-radius();
@@ -38,4 +38,11 @@
       font-weight: 600;
     }
   }
+
+  &__username {
+    display: flex;
+    align-items: center;
+    width: max-content;
+    gap: 10px;
+  }
 }
diff --git a/resources/views/teams/members/index.blade.php b/resources/views/teams/members/index.blade.php
@@ -18,7 +18,6 @@
                 </h2>
                 <ul class="team-members-manage">
                     <li class="team-members-manage__item team-members-manage__item--header">
-                        <span></span>
                         <span></span>
                         <span>{{ osu_trans('teams.members.index.table.status') }}</span>
                         <span>{{ osu_trans('teams.members.index.table.joined_at') }}</span>
@@ -28,15 +27,20 @@
                             $user = $member->userOrDeleted();
                         @endphp
                         <li class="team-members-manage__item">
-                            <span class="team-members-manage__avatar">
-                                <span
-                                    class="avatar avatar--full avatar--guest"
-                                    {!! background_image($user->user_avatar) !!}
-                                ></span>
-                            </span>
-                            <span>
-                                {!! link_to_user($user, null, '', []) !!}
-                            </span>
+                            <a
+                                class="team-members-manage__username js-usercard"
+                                data-user-id="{{ $user->getKey() }}"
+                                href="{{ route('users.show', $user->getKey()) }}"
+                            >
+                                <span class="team-members-manage__avatar">
+                                    <span
+                                        class="avatar avatar--full avatar--guest"
+                                        {!! background_image($user->user_avatar) !!}
+                                    ></span>
+                                </span>
+
+                                {{ $user->username }}
+                            </a>
                             <span>
                                 {{ osu_trans('teams.members.index.status.status_'.(int) $user->isActive()) }}
                                 @if ($user->isOnline())