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"
:first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName"
size="large"
size="small"
:show-badge="false"
/>
<div class="online-indicator" />
@ -81,29 +81,30 @@
<div class="profile-name">{{ fullName }}</div>
<div class="profile-email">{{ email }}</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>
<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>
</template>
@ -497,8 +498,9 @@ watch(width, (newWidth) => {
.profile-card-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
gap: 0.5rem;
padding: 1rem;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.9),
@ -508,6 +510,7 @@ watch(width, (newWidth) => {
margin: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
&:hover {
background: linear-gradient(135deg,
@ -516,6 +519,27 @@ watch(width, (newWidth) => {
);
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 {
@ -524,10 +548,10 @@ watch(width, (newWidth) => {
.online-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
bottom: -2px;
right: -2px;
width: 10px;
height: 10px;
background: #22c55e;
border: 2px solid white;
border-radius: 50%;