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"
|
: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%;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue