feat(ui): compact navigation with grouped mega menus and branded loaders
Navigation bar (shell.component.html/.scss) - Restyle top-level nav items as compact tabs and add responsive breakpoints (1400px, 1200px, 1080px, 880px) that shrink icon, caret and padding so the full menu fits on smaller laptop screens. - Long labels now carry a short form shown on narrow widths: Loan Origination -> Loans, General Ledger -> GL, Sub Ledger -> Sub GL, Reconciliation -> Recon, Documents Hub -> Docs Hub. - Reports and Insurance menus are regrouped into titled mega panels (reports-mega-panel, insurance-mega-panel) using deposit-menu-group sections instead of one long flat list. - No route was added or removed: all 64 menu links (Account Register, Day Book, End of the Day, Form 97/98, Risk Review, Re-KYC, Dormancy, Savings/FD Interest Posting, TDS, BOR, DIP lookups, digital payment reports, CKYC, DICGC, Clerk Desk, ...) still point to the same routes. Global mega panel styles (main.scss) - Shared grid and overlay styling for every Material mega menu (cdk-overlay-pane with a menu panel) plus a coloured top accent per panel: admin, cashier, clerk, branch-ops, hrm, digital, reports, share, others, npa, letter, insurance, ckyc and reconciliation. - Fixed column layouts for the dense panels (NPA 3 columns, Reconciliation 5 columns, Reports, CKYC). Toolbar (toolbar.component.html/.scss) - User account dropdown gets its own t-user-menu panel style and opens towards the left (xPosition="before") so it no longer clips at the screen edge. - Restyled AI assistant menu cards. Density and products page - Material density lowered from 0 to -1 (mifosx-theme.scss) for a tighter, more data-dense UI. - Products page cards: wider container (1280px), smaller icons, fonts, gaps and padding to match the compact look. Loaders (index.html, loading-screen component) - Boot splash in index.html and the fullscreen mifosx-loading-screen now show the CBS Nexora logo image (assets/images/cbsnexora-logo.png) instead of the generic four-square SVG and text title. Lint clean-up required by the pre-commit hook - Prettier formatting and stylelint auto-fixes (modern rgb() notation, range media queries, shorthand properties, empty lines before rules). - Merged duplicate selectors into their first block without changing the cascade: the second .reports-mega-panel (top accent border) in main.scss and the second ::ng-deep .ai-menu (AI card styles) in toolbar.component.scss. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+343
-37
@@ -81,66 +81,332 @@
|
||||
|
||||
// ===== Sub-menu Mega Panels (rendered in CDK overlay) =====
|
||||
.deposits-mega-panel,
|
||||
.hrm-mega-panel {
|
||||
max-width: 700px !important;
|
||||
.hrm-mega-panel,
|
||||
.cashier-mega-panel,
|
||||
.clerk-mega-panel,
|
||||
.clearing-mega-panel,
|
||||
.npa-mega-panel,
|
||||
.advances-mega-panel,
|
||||
.admin-mega-panel {
|
||||
min-width: 680px !important;
|
||||
max-width: 740px !important;
|
||||
}
|
||||
|
||||
.branch-ops-mega-panel,
|
||||
.insurance-mega-panel,
|
||||
.digital-mega-panel,
|
||||
.ckyc-mega-panel {
|
||||
min-width: 440px !important;
|
||||
max-width: 480px !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.share-mega-panel,
|
||||
.others-mega-panel {
|
||||
max-width: 850px !important;
|
||||
min-width: 780px !important;
|
||||
max-width: 840px !important;
|
||||
}
|
||||
|
||||
.share-grid,
|
||||
.others-grid {
|
||||
grid-template-columns: repeat(4, 1fr) !important;
|
||||
}
|
||||
|
||||
.others-grid,
|
||||
.npa-grid {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
}
|
||||
|
||||
.npa-mega-panel,
|
||||
.advances-mega-panel {
|
||||
.reports-mega-panel {
|
||||
min-width: 740px !important;
|
||||
max-width: 800px !important;
|
||||
border-top: 2.5px solid #0369a1 !important;
|
||||
}
|
||||
|
||||
.advances-grid {
|
||||
grid-template-columns: repeat(3, 1fr) !important;
|
||||
.letter-mega-panel,
|
||||
.reconciliation-mega-panel {
|
||||
min-width: 900px !important;
|
||||
max-width: 960px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Mega Menu Panel CDK Overlay Rules (Anchor naturally under triggers)
|
||||
========================================================================== */
|
||||
.cdk-overlay-pane:has(.mat-mdc-menu-panel) {
|
||||
max-width: 96vw !important;
|
||||
}
|
||||
|
||||
/* Individual Top Accent Border for Mega Panels */
|
||||
.deposits-mega-panel,
|
||||
.advances-mega-panel {
|
||||
border-top: 2.5px solid #1074b9 !important;
|
||||
}
|
||||
|
||||
.cashier-mega-panel {
|
||||
border-top: 2.5px solid #0284c7 !important;
|
||||
}
|
||||
|
||||
.clerk-mega-panel {
|
||||
border-top: 2.5px solid #2563eb !important;
|
||||
}
|
||||
|
||||
.branch-ops-mega-panel {
|
||||
border-top: 2.5px solid #4f46e5 !important;
|
||||
}
|
||||
|
||||
.clearing-mega-panel,
|
||||
.reconciliation-mega-panel {
|
||||
border-top: 2.5px solid #0d9488 !important;
|
||||
}
|
||||
|
||||
.hrm-mega-panel {
|
||||
border-top: 2.5px solid #0284c7 !important;
|
||||
}
|
||||
|
||||
.admin-mega-panel,
|
||||
.digital-mega-panel {
|
||||
border-top: 2.5px solid #7c3aed !important;
|
||||
}
|
||||
|
||||
.share-mega-panel {
|
||||
border-top: 2.5px solid #d97706 !important;
|
||||
}
|
||||
|
||||
.others-mega-panel {
|
||||
border-top: 2.5px solid #0284c7 !important;
|
||||
}
|
||||
|
||||
.npa-mega-panel {
|
||||
border-top: 2.5px solid #dc2626 !important;
|
||||
}
|
||||
|
||||
.letter-mega-panel {
|
||||
max-width: 1100px !important;
|
||||
border-top: 2.5px solid #15803d !important;
|
||||
}
|
||||
|
||||
.letter-grid {
|
||||
grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
|
||||
min-width: 1040px;
|
||||
.insurance-mega-panel {
|
||||
border-top: 2.5px solid #c2410c !important;
|
||||
}
|
||||
|
||||
.reconciliation-mega-panel {
|
||||
max-width: 1100px !important;
|
||||
.ckyc-mega-panel {
|
||||
border-top: 2.5px solid #be185d !important;
|
||||
}
|
||||
|
||||
/* Universal Mega Panel Grid styling inside Material Menu Overlays */
|
||||
.deposit-menu-grid {
|
||||
display: grid !important;
|
||||
gap: 4px 12px !important;
|
||||
padding: 6px 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
min-width: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
/* Mega Panel Grids with exact column definitions */
|
||||
.deposit-menu-grid.cashier-grid,
|
||||
.deposit-menu-grid.clerk-grid,
|
||||
.deposit-menu-grid.clearing-grid,
|
||||
.deposit-menu-grid.advances-grid,
|
||||
.deposit-menu-grid.deposits-grid,
|
||||
.deposit-menu-grid.hrm-grid,
|
||||
.deposit-menu-grid.admin-grid,
|
||||
.deposit-menu-grid.npa-grid,
|
||||
.cashier-grid,
|
||||
.clerk-grid,
|
||||
.clearing-grid,
|
||||
.advances-grid,
|
||||
.deposits-grid,
|
||||
.hrm-grid,
|
||||
.admin-grid,
|
||||
.npa-grid {
|
||||
grid-template-columns: repeat(3, minmax(210px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.deposit-menu-grid.reports-grid,
|
||||
.reports-grid {
|
||||
grid-template-columns: repeat(3, minmax(230px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.deposit-menu-grid.branch-ops-grid,
|
||||
.deposit-menu-grid.insurance-grid,
|
||||
.deposit-menu-grid.digital-grid,
|
||||
.deposit-menu-grid.ckyc-grid,
|
||||
.branch-ops-grid,
|
||||
.insurance-grid,
|
||||
.digital-grid,
|
||||
.ckyc-grid {
|
||||
grid-template-columns: repeat(2, minmax(200px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.deposit-menu-grid.share-grid,
|
||||
.deposit-menu-grid.others-grid,
|
||||
.share-grid,
|
||||
.others-grid {
|
||||
grid-template-columns: repeat(4, minmax(185px, 1fr)) !important;
|
||||
}
|
||||
|
||||
.deposit-menu-grid.letter-grid,
|
||||
.deposit-menu-grid.reconciliation-grid,
|
||||
.letter-grid,
|
||||
.reconciliation-grid {
|
||||
grid-template-columns: repeat(5, minmax(190px, 1fr)) !important;
|
||||
min-width: 1040px;
|
||||
grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
|
||||
}
|
||||
|
||||
/* Admin Mega Menu — 3-column rectangular panel (Setup · Catalog ·
|
||||
Audit & Compliance). Reuses the deposit-mega-menu grid + group chrome
|
||||
and retints the group-title accent to Admin purple. */
|
||||
.admin-mega-panel {
|
||||
max-width: 760px !important;
|
||||
}
|
||||
|
||||
.admin-grid {
|
||||
grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
|
||||
min-width: 680px;
|
||||
.deposit-menu-group {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1px !important;
|
||||
min-width: 0 !important;
|
||||
|
||||
.deposit-group-title {
|
||||
color: #7c3aed !important;
|
||||
border-bottom-color: #7c3aed !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 9.5px !important;
|
||||
text-transform: uppercase !important;
|
||||
letter-spacing: 0.6px !important;
|
||||
color: #1074b9 !important;
|
||||
padding: 3px 6px !important;
|
||||
margin-bottom: 2px !important;
|
||||
border-bottom: 1.5px solid #1074b9 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
line-height: 1.2 !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Specific Accent Colors for Mega Panel Group Titles */
|
||||
.cashier-grid .deposit-group-title {
|
||||
color: #0284c7 !important;
|
||||
border-bottom-color: #0284c7 !important;
|
||||
}
|
||||
|
||||
.clerk-grid .deposit-group-title {
|
||||
color: #2563eb !important;
|
||||
border-bottom-color: #2563eb !important;
|
||||
}
|
||||
|
||||
.clearing-grid .deposit-group-title {
|
||||
color: #0d9488 !important;
|
||||
border-bottom-color: #0d9488 !important;
|
||||
}
|
||||
|
||||
.branch-ops-grid .deposit-group-title {
|
||||
color: #4f46e5 !important;
|
||||
border-bottom-color: #4f46e5 !important;
|
||||
}
|
||||
|
||||
.reports-grid .deposit-group-title {
|
||||
color: #0369a1 !important;
|
||||
border-bottom-color: #0369a1 !important;
|
||||
}
|
||||
|
||||
.insurance-grid .deposit-group-title {
|
||||
color: #c2410c !important;
|
||||
border-bottom-color: #c2410c !important;
|
||||
}
|
||||
|
||||
.digital-grid .deposit-group-title {
|
||||
color: #7c3aed !important;
|
||||
border-bottom-color: #7c3aed !important;
|
||||
}
|
||||
|
||||
.ckyc-grid .deposit-group-title {
|
||||
color: #be185d !important;
|
||||
border-bottom-color: #be185d !important;
|
||||
}
|
||||
|
||||
.admin-grid .deposit-group-title {
|
||||
color: #7c3aed !important;
|
||||
border-bottom-color: #7c3aed !important;
|
||||
}
|
||||
|
||||
.reconciliation-grid .deposit-group-title {
|
||||
color: #0d9488 !important;
|
||||
border-bottom-color: #0d9488 !important;
|
||||
}
|
||||
|
||||
/* Compact, RBI-Style Menu Item Overrides in CDK Overlays */
|
||||
|
||||
/* Compact, RBI-Style Menu Item Overrides for Navbar Mega Panels ONLY */
|
||||
.mat-mdc-menu-panel:has(.deposit-menu-grid) {
|
||||
--mat-menu-item-label-text-size: 10.5px !important;
|
||||
--mat-menu-item-label-text-line-height: 14px !important;
|
||||
|
||||
border-radius: 8px !important;
|
||||
box-shadow:
|
||||
0 10px 28px rgb(15 23 42 / 14%),
|
||||
0 2px 6px rgb(15 23 42 / 8%) !important;
|
||||
border: 1px solid #d1d5db !important;
|
||||
background: #fff !important;
|
||||
max-height: 75vh !important;
|
||||
overflow: hidden auto !important;
|
||||
|
||||
.mat-mdc-menu-content {
|
||||
padding: 4px 6px !important;
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.deposit-menu-grid .mat-mdc-menu-item {
|
||||
font-size: 10.5px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 25px !important;
|
||||
min-height: 25px !important;
|
||||
line-height: 25px !important;
|
||||
padding: 0 6px !important;
|
||||
border-radius: 4px !important;
|
||||
color: #334155 !important;
|
||||
font-family:
|
||||
'IBM Plex Sans',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif !important;
|
||||
transition:
|
||||
background-color 0.12s ease,
|
||||
color 0.12s ease !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
min-width: 0 !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
|
||||
.mat-mdc-menu-item-text,
|
||||
.mdc-list-item__primary-text,
|
||||
.mdc-list-item__content {
|
||||
font-size: 10.5px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 1.25 !important;
|
||||
color: #334155 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.menu-item-icon,
|
||||
fa-icon,
|
||||
i {
|
||||
font-size: 10.5px !important;
|
||||
width: 13px !important;
|
||||
min-width: 13px !important;
|
||||
text-align: center !important;
|
||||
margin-right: 5px !important;
|
||||
opacity: 0.8 !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f7ff !important;
|
||||
color: #0d47a1 !important;
|
||||
|
||||
.mat-mdc-menu-item-text,
|
||||
.mdc-list-item__primary-text {
|
||||
color: #0d47a1 !important;
|
||||
}
|
||||
|
||||
.menu-item-icon,
|
||||
fa-icon,
|
||||
i {
|
||||
opacity: 1 !important;
|
||||
color: #0d47a1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2012,3 +2278,43 @@ mifosx-client-datatable-step * {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ===== CBS Compact Enterprise Density Polish =====
|
||||
// Reduces excessive whitespace and oversized elements across the banking UI
|
||||
.mat-mdc-table {
|
||||
th.mat-mdc-header-cell {
|
||||
padding: 8px 12px !important;
|
||||
font-size: 11px !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 0.04em !important;
|
||||
}
|
||||
|
||||
td.mat-mdc-cell {
|
||||
padding: 6px 12px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.35 !important;
|
||||
}
|
||||
|
||||
tr.mat-mdc-row,
|
||||
tr.mat-mdc-header-row {
|
||||
height: 36px !important;
|
||||
min-height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Compact Material Cards
|
||||
.mat-mdc-card {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
// Breadcrumb & Page Titles Compact Spacing
|
||||
.breadcrumb-container {
|
||||
margin-bottom: 8px !important;
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
|
||||
.mifosx-page-title,
|
||||
.page-title {
|
||||
font-size: 17px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user