CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Enhance profile layout: Single-row box layout for user details (#2664)

Browse Source
This commit is contained in:
Shubham Kumar
2025-09-17 20:41:51 -06:00
committed by GitHub
parent f55883b4f8
commit e845a45e76
2 changed files with 94 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/profile/profile.component.html
+44 -32
View File
@@ -1,9 +1,9 @@
<div class="container m-b-10 layout-row layout-lt-md-column align-end gap-1percent">
<button mat-raised-button color="primary" [routerLink]="['/system', 'roles-and-permissions']">
<button mat-raised-button color="primary" class="m-r-10" [routerLink]="['/system', 'roles-and-permissions']">
<fa-icon icon="check" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Permissions' | translate }}
</button>
<button mat-raised-button color="primary" (click)="changeUserPassword()">
<button mat-raised-button color="primary" class="m-r-10" (click)="changeUserPassword()">
<fa-icon icon="cog" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Change Password' | translate }}
</button>
@@ -11,41 +11,53 @@
<div class="container layout-column gap-1percent">
<mat-card>
<div class="layout-row-wrap">
<div class="flex-50 header">
{{ 'labels.inputs.Tenant Id' | translate }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.Tenant Id' | translate }}
</div>
<div>
{{ tenantIdentifier }}
</div>
</div>
<div class="flex-50">
{{ tenantIdentifier }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.User Id' | translate }}
</div>
<div>
{{ profileData.userId }}
</div>
</div>
<div class="flex-50 header">
{{ 'labels.inputs.User Id' | translate }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.User Name' | translate }}
</div>
<div>
{{ profileData.username }}
</div>
</div>
<div class="flex-50">
{{ profileData.userId }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.Office' | translate }}
</div>
<div>
{{ profileData.officeName }}
</div>
</div>
<div class="flex-50 header">
{{ 'labels.inputs.User Name' | translate }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.Status' | translate }}
</div>
<div>
{{ profileData.authenticated ? 'Authenticated' : 'Not Authenticated' }}
</div>
</div>
<div class="flex-50">
{{ profileData.username }}
</div>
<div class="flex-50 header">
{{ 'labels.inputs.Office' | translate }}
</div>
<div class="flex-50">
{{ profileData.officeName }}
</div>
<div class="flex-50 header">
{{ 'labels.inputs.Status' | translate }}
</div>
<div class="flex-50">
{{ profileData.authenticated ? 'Authenticated' : 'Not Authenticated' }}
</div>
<div class="flex-50 header">
{{ 'labels.inputs.Language' | translate }}
</div>
<div class="flex-50">
{{ language }}
<div class="info-box">
<div class="header">
{{ 'labels.inputs.Language' | translate }}
</div>
<div>
{{ language }}
</div>
</div>
</div>
</mat-card>
src/app/profile/profile.component.scss
+50 -14
View File
@@ -1,14 +1,33 @@
.container {
max-width: 37rem;
padding: 0.5rem;
padding: 1rem;
mat-card {
margin-bottom: 1rem;
padding: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid #ddd;
border-radius: 6px;
.layout-row-wrap {
padding: 0.5rem 0;
display: grid;
grid-template-columns: 50% 50%;
gap: 1rem;
.info-box {
display: flex;
flex-direction: column;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
.header {
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
}
}
}
@@ -18,8 +37,9 @@
word-wrap: break-word;
&.header {
font-weight: 500;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.1rem;
}
}
}
@@ -27,20 +47,36 @@
table {
width: 100%;
margin-top: 1rem;
border-collapse: collapse;
th {
font-weight: 600;
text-align: left;
}
td {
padding: 0.75rem;
border: 1px solid #ddd;
}
tr:hover {
background-color: #f9f9f9;
}
}
}
.container table th,
.container table td {
border-top: 1px solid rgb(0 0 0 / 12%);
}
th.mat-header-cell:not(:first-of-type),
td.mat-cell:not(:first-of-type) {
border-left: 1px solid rgb(0 0 0 / 12%);
}
.mat-elevation-z1 {
margin: 0.5rem 0;
box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
th,
td {
border-top: 1px solid rgb(0 0 0 / 12%);
}
th.mat-header-cell:not(:first-of-type),
td.mat-cell:not(:first-of-type) {
border-left: 1px solid rgb(0 0 0 / 12%);
}
border-radius: 6px;
}