Fix profile card avatar size and menu button
Build And Push Image / docker (push) Successful in 1m56s
Details
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:
parent
36b8f9d2d4
commit
e74f12eaa0
|
|
@ -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%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue