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

WEB-492: Material Design 3 implementation: Login

Browse Source
This commit is contained in:
Jose Alberto Hernandez
2026-01-04 14:06:28 -05:00
parent 5af11fe757
commit df7274626c
58 changed files with 3396 additions and 855 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/shared/footer/footer.component.html
+58 -40
View File
@@ -1,41 +1,59 @@
<div class="layout-column m-b-20 f12" ngClass="{{ styleClass }}" id="footer" *ngIf="displayBackEndInfo">
<mat-divider class="divider align-center"></mat-divider>
<div class="layout-column m-b-20 content-wrapper footer-center">
<table class="versions">
<tr>
<td class="footer-content">Tenant</td>
<td class="right footer-content">
{{ tenant | titlecase }}
</td>
</tr>
<tr>
<td class="footer-content">Mifos</td>
<td class="right footer-content">
{{ versions.mifos }} - <b>{{ hash }}</b>
</td>
</tr>
<tr>
<td class="footer-content">{{ 'labels.text.Fineract' | translate }}</td>
<td class="right footer-content">
{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b>
</td>
</tr>
<tr *ngIf="displayBackEndInfo">
<td class="footer-content">{{ 'labels.inputs.Server' | translate }}</td>
<td class="right footer-content">
{{ server }}
</td>
</tr>
<tr *ngIf="isBusinessDateDefined">
<td class="footer-content">{{ 'labels.text.Current Business Date' | translate }}:</td>
<td class="center footer-content business-date">
<b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b>
</td>
</tr>
</table>
@if (variant === 'compact') {
<!-- Compact mode for Login -->
<div class="footer-compact">
@if (displayBackEndInfo) {
<div class="footer-info">
<span class="info-item">
<span class="info-label">Mifos:</span>
<span class="info-value">{{ versions.mifos }}</span>
</span>
<span class="info-separator">•</span>
<span class="info-item">
<span class="info-label">{{ 'labels.text.Fineract' | translate }}:</span>
<span class="info-value">{{ versions.fineract.version }}</span>
</span>
<span class="info-separator">•</span>
<span class="info-item">
<span class="info-label">{{ 'labels.inputs.Server' | translate }}:</span>
<span class="info-value">{{ server }}</span>
</span>
</div>
}
</div>
<div class="layout-column m-b-20 copy-label">
<p class="footer-content align-center">{{ 'APP_NAME' | translate }} {{ 'labels.text.by' | translate }} Mifos</p>
</div>
</div>
} @else {
<!-- Default mode for Shell -->
@if (displayBackEndInfo) {
<div class="layout-column m-b-20 f12" ngClass="{{ styleClass }}" id="footer">
<div class="layout-column m-t-10 m-b-10 content-wrapper footer-center">
<table class="versions">
<tr>
<td class="footer-content">Mifos</td>
<td class="right footer-content">
{{ versions.mifos }} - <b>{{ hash }}</b>
</td>
</tr>
<tr>
<td class="footer-content">{{ 'labels.text.Fineract' | translate }}</td>
<td class="right footer-content">
{{ versions.fineract.version }} - <b>{{ versions.fineract.hash }}</b>
</td>
</tr>
<tr>
<td class="footer-content">{{ 'labels.inputs.Server' | translate }}</td>
<td class="right footer-content">
{{ server }}
</td>
</tr>
@if (isBusinessDateDefined) {
<tr>
<td class="footer-content">{{ 'labels.text.Current Business Date' | translate }}:</td>
<td class="center footer-content business-date">
<b>{{ businessDate | date: 'EEEE, MMMM dd, y' }}</b>
</td>
</tr>
}
</table>
</div>
</div>
}
}
src/app/shared/footer/footer.component.scss
+69 -1
View File
@@ -1,6 +1,58 @@
@use 'assets/styles/helper';
@use 'assets/styles/colours' as *;
// ===== Compact Mode (Login) =====
.footer-compact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
font-size: 0.75rem;
color: var(--md-sys-color-on-surface-variant, #44474e);
.footer-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
line-height: 1.4;
}
.info-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.info-label {
font-weight: 500;
opacity: 0.8;
}
.info-value {
font-weight: 400;
opacity: 0.9;
}
.info-separator {
opacity: 0.4;
font-size: 0.875rem;
}
.footer-copyright {
font-size: 0.875rem;
opacity: 0.7;
margin-top: 0.25rem;
}
}
// Dark theme support for compact mode
.dark-theme .footer-compact {
color: var(--md-sys-color-on-surface-variant, #c4c6d0);
}
// ===== Default Mode (Shell) =====
#footer {
align-items: center;
min-width: 400px;
@@ -48,5 +100,21 @@
.copy-label {
min-width: 100%;
text-align: center;
font-size: large;
font-size: medium;
margin-bottom: 10px;
}
// ===== Responsive for Compact Mode =====
@media (width <= 480px) {
.footer-compact {
font-size: 0.7rem;
.footer-info {
gap: 0.375rem;
}
.footer-copyright {
font-size: 0.8rem;
}
}
}
src/app/shared/footer/footer.component.ts
+1 -2
View File
@@ -12,7 +12,6 @@ import { VersionService } from 'app/system/version.service';
import { environment } from '../../../environments/environment';
import { Subscription } from 'rxjs';
import { NgClass, DatePipe } from '@angular/common';
import { MatDivider } from '@angular/material/divider';
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
/**
@@ -25,7 +24,6 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
imports: [
...STANDALONE_SHARED_IMPORTS,
NgClass,
MatDivider,
DatePipe
]
})
@@ -38,6 +36,7 @@ export class FooterComponent implements OnInit, OnDestroy {
private versionService = inject(VersionService);
@Input() styleClass: string = '';
@Input() variant: 'default' | 'compact' = 'default';
/** Mifos X version. */
versions: any = {