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

improve the css of general-tab (#2721)

Browse Source 
remove  the dupicate line of code
This commit is contained in:
Shubham Kumar
2025-10-27 09:31:05 -06:00
committed by GitHub
parent 6eecb45e2e
commit 28c8f7b9c4
4 changed files with 173 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/organization/offices/view-office/general-tab/general-tab.component.html
+13 -10
View File
@@ -1,27 +1,22 @@
<div class="tab-container mat-typography">
<div class="layout-align-end action-button m-b-20">
<span *mifosxHasPermission="'UPDATE_OFFICE'">
<button mat-raised-button color="primary" [routerLink]="['../edit']">
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
</span>
</div>
<div class="layout-row-wrap responsive-column">
<div class="tab-container mat-typography compact-view">
<div class="layout-row-wrap responsive-column compact-details condensed">
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Parent Office' | translate }}</div>
<div class="flex-50 right">
{{ officeData.parentName ? officeData.parentName : 'N/A' }}
</div>
<hr class="section-divider" />
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Opened On' | translate }}</div>
<div class="flex-50 right">
{{ officeData.openingDate ? (officeData.openingDate | dateFormat) : 'Unassigned' }}
</div>
<hr class="section-divider" />
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.Name Decorated' | translate }}</div>
<div class="flex-50 right">
{{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}
</div>
<hr class="section-divider" />
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
<div class="flex-50 right" *ngIf="officeData.externalId">
@@ -31,4 +26,12 @@
{{ 'labels.inputs.Unassigned' | translate }}
</div>
</div>
<div class="bottom-button-container small-buttons">
<span *mifosxHasPermission="'UPDATE_OFFICE'">
<button mat-raised-button color="primary" [routerLink]="['../edit']" class="edit-button">
<fa-icon icon="edit" class="m-r-5"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
</button>
</span>
</div>
</div>
src/app/organization/offices/view-office/general-tab/general-tab.component.scss
+90 -2
View File
@@ -1,6 +1,8 @@
.tab-container {
padding: 1%;
margin: 1%;
padding: 0.5rem;
margin: 1% auto;
max-width: 600px;
width: 90%;
.delete-button {
margin-left: 1%;
@@ -14,3 +16,89 @@
.table-data {
margin-top: 3px;
}
.compact-button {
padding: 0.25rem 0.75rem;
font-size: 0.9rem;
line-height: 1.75;
}
.compact-details {
font-size: 0.9rem;
.left,
.right {
padding: 0.25rem 0;
}
.mat-body-strong {
font-size: 0.9rem;
}
}
.bottom-button-container {
display: flex;
justify-content: center;
margin-top: 2rem;
padding: 1rem 0;
}
.edit-button {
min-width: 120px;
padding: 0.5rem 1.5rem;
font-size: 1rem;
border-radius: 4px;
box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
transform: translateY(-2px);
}
}
.layout-row-wrap {
margin: 0 auto;
padding: 0.5rem;
}
.section-divider {
width: 100%;
border: 0;
border-top: 1px solid rgb(0 0 0 / 10%);
margin: 8px 0;
}
.compact-view {
padding: 0.3rem;
margin: 0 auto;
max-width: 450px;
width: 90%;
}
.condensed {
.flex-45,
.flex-50 {
padding: 0.2rem 0;
font-size: 0.85rem;
}
.section-divider {
margin: 4px 0;
}
}
.small-buttons {
margin-top: 1rem;
.edit-button {
min-width: 100px;
padding: 0.35rem 1rem;
font-size: 0.9rem;
}
}
.tab-container.compact-view {
max-width: 450px;
width: 90%;
}
src/app/organization/offices/view-office/view-office.component.html
+5 -3
View File
@@ -1,6 +1,6 @@
<div class="container">
<div class="container narrow-container extra-small">
<mat-card class="office-card">
<mat-card-content>
<mat-card-content class="card-content">
<nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
<a
mat-tab-link
@@ -8,6 +8,7 @@
routerLinkActive
#general="routerLinkActive"
[active]="general.isActive"
class="compact-tab"
>
{{ 'labels.inputs.General' | translate }}
</a>
@@ -19,13 +20,14 @@
routerLinkActive
#datatable="routerLinkActive"
[active]="datatable.isActive"
class="compact-tab"
>
{{ officeDatatable.registeredTableName }}
</a>
</span>
</nav>
<mat-tab-nav-panel #tabPanel>
<mat-tab-nav-panel #tabPanel class="tab-panel">
<router-outlet></router-outlet>
</mat-tab-nav-panel>
</mat-card-content>
src/app/organization/offices/view-office/view-office.component.scss
+65 -4
View File
@@ -1,13 +1,74 @@
.action-button {
width: 95%;
width: 85%;
margin: 0.2rem auto;
padding: 0.3rem;
border-radius: 3px;
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
}
}
.office-card {
margin: 0 auto;
width: 90%;
padding: 0;
width: 100%;
margin: 0.75rem auto;
padding: 0.5rem;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
.navigation-tabs {
overflow: auto;
padding: 0.2rem 0;
scrollbar-width: thin;
&::-webkit-scrollbar {
height: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(0 0 0 / 20%);
border-radius: 4px;
}
.mat-tab-label {
min-width: 80px;
padding: 0 0.5rem;
height: 36px;
font-size: 0.85rem;
}
}
@media (width <= 768px) {
width: 85%;
padding: 0.4rem;
}
}
.container {
padding: 0.5rem;
}
.narrow-container {
max-width: 600px;
margin: 0 auto;
padding: 0.75rem;
}
.extra-small {
max-width: 500px;
}
.compact-tab {
min-width: auto;
padding: 0 12px;
}
.card-content {
padding: 0.5rem;
}
.tab-panel {
padding: 0.5rem 0;
}