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

Merge pull request #2687 from shubhamkumar9199/fix/manage-grups.component

Browse Source 
WEB-329-style(ui): redesign card component and improve css
This commit is contained in:
Jose Alberto Hernandez
2025-09-27 21:25:51 -05:00
committed by GitHub
parent 1d0fa55baa 6f5dee83fb
commit 253bd7d4aa
2 changed files with 70 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.html
+9 -4
View File
@@ -33,14 +33,19 @@
</div>
</mat-card>
<mat-card class="flex-40">
<mat-card class="flex-50">
<h3 matSubheader>{{ 'labels.heading.Group Members' | translate }}</h3>
<mat-nav-list *ngIf="groupMembers?.length">
<div mat-list-item *ngFor="let group of groupMembers; index as i">
<div mat-list-item class="member-item center-gap" *ngFor="let group of groupMembers; index as i">
<span matLine class="p-t-10">{{ group.name }}</span>
<div class="flex-fill"></div>
<button mat-icon-button color="warn" (click)="removeGroup(i, group)">
<button
mat-icon-button
color="warn"
class="delete-btn"
aria-label="Remove group"
(click)="removeGroup(i, group)"
>
<fa-icon icon="trash"></fa-icon>
</button>
</div>
src/app/centers/centers-view/center-actions/manage-groups/manage-groups.component.scss
+61 -4
View File
@@ -1,17 +1,20 @@
.container {
max-width: 50rem;
max-width: 70rem;
.mat-table {
display: block;
font-family: Tahoma, Verdana, sans-serif;
font-family: Roboto, 'Helvetica Neue', sans-serif;
width: 100%;
margin-top: -2rem;
padding: 1.5rem;
}
.mat-row,
.mat-header-row {
display: flex;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom: 1px solid var(--border-color-light, #eee);
color: var(--text-color, inherit);
font-weight: 500;
align-items: center;
min-height: 48px;
padding: 0 24px;
@@ -22,14 +25,68 @@
flex: 1;
overflow: hidden;
word-wrap: break-word;
flex-direction: column;
}
h3 {
padding-left: 0;
margin-bottom: 0;
font-weight: 500;
border-bottom: 2px solid var(--border-color-light, #eee);
padding-bottom: 1rem;
}
.group-card {
max-height: 20rem;
margin-bottom: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}
.p-t-10 {
padding-top: 10px;
font-weight: 500;
margin-left: 1rem;
}
.flex-50 {
max-height: 20rem;
margin-bottom: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
.mat-nav-list {
.member-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
}
.center-gap {
display: flex;
align-items: center;
gap: 0.5rem;
}
.member-item .p-t-10 {
margin: 0;
font-weight: 500;
}
.delete-btn {
margin-left: 0.25rem;
}
}
}
}