neoris/openvidu-meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backend: update profile layout and styles for improved user details display

Browse Source
This commit is contained in:
CSantosM 2026-02-23 12:42:38 +01:00
parent f1b9f1c6e3
commit 1f603a683d
2 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.html
View File

@ -33,7 +33,7 @@
} @else if (targetUser()) {
<!-- ─── Two-column layout ──────────────────────────────────────────────── -->
<div class="profile-layout">
<!-- LEFT — Profile Header -->
<!-- LEFT — Profile Sidebar -->
<aside class="profile-sidebar">
<mat-card class="section-card profile-header-card">
<mat-card-content>
@ -55,48 +55,22 @@
<mat-icon class="meta-icon">calendar_today</mat-icon>
Member since {{ formatDate(targetUser()!.registrationDate) }}
</p>
<mat-divider class="sidebar-divider"></mat-divider>
<!-- Account Details -->
<div class="sidebar-details">
<div class="sidebar-detail-item">
<span class="info-label">User ID</span>
<span class="info-value monospace">{{ targetUser()!.userId }}</span>
</div>
</div>
</mat-card-content>
</mat-card>
</aside>
<!-- RIGHT — Details -->
<!-- RIGHT — Main Content -->
<div class="profile-main">
<!-- ─── Account Information ──────────────────────────────────── -->
<mat-card class="section-card">
<mat-card-header>
<div mat-card-avatar class="section-avatar">
<mat-icon class="section-icon">person</mat-icon>
</div>
<mat-card-title>Account Information</mat-card-title>
<mat-card-subtitle>Read-only details for this account</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<div class="info-grid">
<div class="info-item">
<span class="info-label">User ID</span>
<span class="info-value monospace">{{ targetUser()!.userId }}</span>
</div>
<div class="info-item">
<span class="info-label">Name</span>
<span class="info-value">{{ targetUser()!.name }}</span>
</div>
<div class="info-item">
<span class="info-label">Role</span>
<span class="info-value">
<span class="role-chip" [ngClass]="'role-' + targetUser()!.role">
{{ getRoleLabel(targetUser()!.role) }}
</span>
</span>
</div>
<div class="info-item">
<span class="info-label">Member since</span>
<span class="info-value">{{ formatDate(targetUser()!.registrationDate) }}</span>
</div>
</div>
</mat-card-content>
</mat-card>
<!-- ─── Security: Change Password (own profile only) ──────────── -->
@if (isOwnProfile()) {
<mat-card class="section-card">

38
meet-ce/frontend/projects/shared-meet-components/src/lib/domains/console/pages/profile/profile.component.scss
View File

@ -92,6 +92,44 @@
}
}
.sidebar-divider {
width: 100%;
margin: var(--ov-meet-spacing-md) 0 !important;
}
.sidebar-details {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--ov-meet-spacing-md);
text-align: left;
}
.sidebar-detail-item {
display: flex;
flex-direction: column;
gap: var(--ov-meet-spacing-xs);
.info-label {
font-size: var(--ov-meet-font-size-sm);
font-weight: var(--ov-meet-font-weight-medium);
color: var(--ov-meet-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.info-value {
font-size: var(--ov-meet-font-size-md);
color: var(--ov-meet-text-primary);
font-weight: var(--ov-meet-font-weight-regular);
word-break: break-all;
&.monospace {
font-family: monospace;
}
}
}
// ─── Role chip ────────────────────────────────────────────────────────────────
.role-chip {