Fix profile card avatar size and menu button
Build And Push Image / docker (push) Successful in 1m56s Details

- Reduced avatar size from 'large' to 'small' for better proportions
- Made menu button extra small and moved it inside profile-content
- Positioned menu button absolutely in top-right of content area
- Reduced online indicator size to match smaller avatar
- Added subtle opacity to menu button (visible on hover)
- Improved overall visual balance of profile card

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Matt 2025-08-31 15:16:15 +02:00
parent 36b8f9d2d4
commit e74f12eaa0
1 changed files with 52 additions and 28 deletions

View File

@ -72,7 +72,7 @@
:member-id="memberData?.member_id" :member-id="memberData?.member_id"
:first-name="memberData?.first_name || user?.firstName" :first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName" :last-name="memberData?.last_name || user?.lastName"
size="large" size="small"
:show-badge="false" :show-badge="false"
/> />
<div class="online-indicator" /> <div class="online-indicator" />
@ -81,29 +81,30 @@
<div class="profile-name">{{ fullName }}</div> <div class="profile-name">{{ fullName }}</div>
<div class="profile-email">{{ email }}</div> <div class="profile-email">{{ email }}</div>
</div> </div>
<v-menu offset-y>
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-dots-vertical"
size="x-small"
variant="text"
v-bind="props"
class="profile-menu-btn"
/>
</template>
<v-list class="glass-dropdown">
<v-list-item
prepend-icon="mdi-cog"
title="Settings"
to="/member/settings"
/>
<v-list-item
prepend-icon="mdi-logout"
title="Logout"
@click="handleLogout"
/>
</v-list>
</v-menu>
</div> </div>
<v-menu offset-y>
<template v-slot:activator="{ props }">
<v-btn
icon="mdi-dots-vertical"
size="small"
variant="text"
v-bind="props"
/>
</template>
<v-list class="glass-dropdown">
<v-list-item
prepend-icon="mdi-cog"
title="Settings"
to="/member/settings"
/>
<v-list-item
prepend-icon="mdi-logout"
title="Logout"
@click="handleLogout"
/>
</v-list>
</v-menu>
</div> </div>
</div> </div>
</template> </template>
@ -497,8 +498,9 @@ watch(width, (newWidth) => {
.profile-card-footer { .profile-card-footer {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
background: linear-gradient(135deg, background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9),
@ -508,6 +510,7 @@ watch(width, (newWidth) => {
margin: 0.5rem; margin: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative;
&:hover { &:hover {
background: linear-gradient(135deg, background: linear-gradient(135deg,
@ -516,6 +519,27 @@ watch(width, (newWidth) => {
); );
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
} }
.profile-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
position: relative;
.profile-menu-btn {
position: absolute;
top: -0.5rem;
right: -0.5rem;
opacity: 0.6;
transition: opacity 0.2s ease;
&:hover {
opacity: 1;
}
}
}
} }
.profile-avatar-wrapper { .profile-avatar-wrapper {
@ -524,10 +548,10 @@ watch(width, (newWidth) => {
.online-indicator { .online-indicator {
position: absolute; position: absolute;
bottom: 0; bottom: -2px;
right: 0; right: -2px;
width: 12px; width: 10px;
height: 12px; height: 10px;
background: #22c55e; background: #22c55e;
border: 2px solid white; border: 2px solid white;
border-radius: 50%; border-radius: 50%;