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