matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve profile card layout in sidebar
Build And Push Image / docker (push) Successful in 2m6s Details 

- Made profile card taller with min-height of 180px
- Stacked profile image above name and email vertically
- Centered profile content for better visual balance
- Increased profile avatar size to 'large' for better visibility
- Moved menu button to absolute position in top-right corner
- Adjusted font sizes slightly for better readability
- Fixed text overflow with proper ellipsis

🤖 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:08:54 +02:00
parent 6e0e640f1d
commit 36b8f9d2d4
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
layouts/member.vue
View File

@ -65,20 +65,22 @@
<div class="profile-footer">
<v-divider class="mb-3" />
<div class="profile-card-footer">
<div class="profile-avatar-wrapper">
<ProfileAvatar
v-if="memberData"
:member-id="memberData?.member_id"
:first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName"
size="default"
:show-badge="false"
/>
<div class="online-indicator" />
</div>
<div class="profile-info">
<div class="profile-name">{{ fullName }}</div>
<div class="profile-email">{{ email }}</div>
<div class="profile-content">
<div class="profile-avatar-wrapper">
<ProfileAvatar
v-if="memberData"
:member-id="memberData?.member_id"
:first-name="memberData?.first_name || user?.firstName"
:last-name="memberData?.last_name || user?.lastName"
size="large"
:show-badge="false"
/>
<div class="online-indicator" />
</div>
<div class="profile-info">
<div class="profile-name">{{ fullName }}</div>
<div class="profile-email">{{ email }}</div>
</div>
</div>
<v-menu offset-y>
<template v-slot:activator="{ props }">
@ -534,20 +536,21 @@ watch(width, (newWidth) => {
}
.profile-info {
flex: 1;
min-width: 0;
text-align: center;
width: 100%;
.profile-name {
font-size: 0.875rem;
font-size: 0.925rem;
font-weight: 600;
color: rgb(31, 41, 55);
margin-bottom: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-email {
font-size: 0.75rem;
font-size: 0.8rem;
color: rgb(107, 114, 128);
overflow: hidden;
text-overflow: ellipsis;