feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="co-container">
|
||||
<!-- Header -->
|
||||
<div class="co-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="co-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Offices' | translate }}
|
||||
</button>
|
||||
<h2 class="co-header__title">{{ 'labels.heading.Create Office' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="co-card">
|
||||
<form [formGroup]="officeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #createOfficeFormRef class="layout-column">
|
||||
<mat-form-field>
|
||||
<!-- Office Details Section -->
|
||||
<div class="co-section">
|
||||
<div class="co-section__header">
|
||||
<i class="fas fa-building"></i>
|
||||
<h3>{{ 'labels.heading.Office Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="co-grid" #createOfficeFormRef>
|
||||
<mat-form-field appearance="outline" class="co-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input required matInput formControlName="name" />
|
||||
@if (officeForm.controls.name.hasError('required')) {
|
||||
@@ -22,7 +36,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="co-field">
|
||||
<mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="parentId">
|
||||
@for (office of officeData; track office) {
|
||||
@@ -39,7 +53,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field (click)="openedOnDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="co-field" (click)="openedOnDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -59,23 +73,24 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="co-field">
|
||||
<mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
|
||||
<input matInput formControlName="externalId" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<!-- Actions -->
|
||||
<div class="co-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="co-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'CREATE_OFFICE'">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!officeForm.valid" class="co-actions__submit" *mifosxHasPermission="'CREATE_OFFICE'">
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #templateCreateOfficeForm let-popover="popover">
|
||||
|
||||
@@ -6,6 +6,128 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.co-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.co-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.co-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.co-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.co-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.co-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.co-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.co-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="eo-container">
|
||||
<!-- Header -->
|
||||
<div class="eo-header">
|
||||
<button mat-stroked-button [routerLink]="['../general']" class="eo-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Office' | translate }}
|
||||
</button>
|
||||
<h2 class="eo-header__title">{{ 'labels.heading.Edit Office' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="eo-card">
|
||||
<form [formGroup]="officeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-column">
|
||||
<mat-form-field>
|
||||
<!-- Office Details Section -->
|
||||
<div class="eo-section">
|
||||
<div class="eo-section__header">
|
||||
<i class="fas fa-building"></i>
|
||||
<h3>{{ 'labels.heading.Office Details' | translate }}</h3>
|
||||
</div>
|
||||
<div class="eo-grid">
|
||||
<mat-form-field appearance="outline" class="eo-field">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
@if (officeForm.controls.name.hasError('required')) {
|
||||
@@ -23,7 +37,7 @@
|
||||
</mat-form-field>
|
||||
|
||||
@if (officeForm.contains('parentId')) {
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="eo-field">
|
||||
<mat-label>{{ 'labels.inputs.Parent Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="parentId">
|
||||
@for (office of officeData.allowedParents; track office) {
|
||||
@@ -41,7 +55,7 @@
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
<mat-form-field (click)="openingDatePicker.open()">
|
||||
<mat-form-field appearance="outline" class="eo-field" (click)="openingDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Opened On' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
@@ -61,21 +75,22 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-form-field appearance="outline" class="eo-field">
|
||||
<mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
|
||||
<input matInput formControlName="externalId" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']">
|
||||
<!-- Actions -->
|
||||
<div class="eo-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../general']" class="eo-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!officeForm.valid" *mifosxHasPermission="'UPDATE_OFFICE'">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button type="submit" mat-flat-button color="primary" [disabled]="!officeForm.valid" class="eo-actions__submit" *mifosxHasPermission="'UPDATE_OFFICE'">
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,128 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.eo-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.eo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.eo-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.eo-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.eo-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.eo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.eo-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.eo-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,178 +6,177 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<mat-button-toggle-group #buttonTreeView [formControl]="viewGroup">
|
||||
<mat-button-toggle value="listView">
|
||||
<fa-icon icon="list"></fa-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="treeView">
|
||||
<fa-icon icon="sitemap"></fa-icon>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
|
||||
<div #buttonCreateOffice class="in-block">
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Office' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div #buttonImportOffices class="in-block">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
*mifosxHasPermission="'CREATE_OFFICE'"
|
||||
[routerLink]="['/organization', 'bulk-import', 'Offices']"
|
||||
>
|
||||
<fa-icon icon="upload" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Import Offices' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" [hidden]="viewGroup.value !== 'listView'">
|
||||
<div #filter class="layout-row gap-20px">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
<div class="container">
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-building title-icon"></i>
|
||||
{{ 'labels.heading.Manage Offices' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div class="table-search">
|
||||
<mat-form-field appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<mat-label>{{ 'Filter' | translate }}</mat-label>
|
||||
<input #filter matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-button-toggle-group #buttonTreeView [formControl]="viewGroup">
|
||||
<mat-button-toggle value="listView">
|
||||
<fa-icon icon="list"></fa-icon>
|
||||
</mat-button-toggle>
|
||||
<mat-button-toggle value="treeView">
|
||||
<fa-icon icon="sitemap"></fa-icon>
|
||||
</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
<div class="table-buttons">
|
||||
<div #buttonImportOffices>
|
||||
<button mat-stroked-button class="btn-import" *mifosxHasPermission="'CREATE_OFFICE'" [routerLink]="['/organization', 'bulk-import', 'Offices']">
|
||||
<fa-icon icon="upload" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Import Offices' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<div #buttonCreateOffice>
|
||||
<button mat-flat-button color="primary" class="btn-create" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Office' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List View -->
|
||||
<div #tableOffices class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Office Name ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.name }}</td>
|
||||
</ng-container>
|
||||
<div [hidden]="viewGroup.value !== 'listView'">
|
||||
<div #tableOffices class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Office Name ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.name }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="externalId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' External ID ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.externalId }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="externalId">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' External ID ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.externalId }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="parentName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Parent Office ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.parentName }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="parentName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Parent Office ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.parentName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="openingDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Opened On ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.openingDate | dateFormat }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="openingDate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ ' Opened On ' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let offices">{{ offices.openingDate | dateFormat }}</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
class="select-row"
|
||||
[routerLink]="[row.id, 'general']"
|
||||
></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tree View -->
|
||||
<div class="container" [hidden]="viewGroup.value !== 'treeView'">
|
||||
<div class="m-b-20 layout-row align-start gap-20px">
|
||||
<button mat-raised-button (click)="toggleExpandCollapse()">
|
||||
{{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
|
||||
</button>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" class="table-row" [routerLink]="[row.id, 'general']"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layout-row gap-4percent responsive-column">
|
||||
<div class="flex-fill">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="office-tree">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
|
||||
<li class="mat-tree-node">
|
||||
<button mat-icon-button disabled></button>
|
||||
<span (click)="viewOfficeNode(node)" class="m-r-10">
|
||||
{{ node.name }}
|
||||
</span>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
<!-- Tree View -->
|
||||
<div [hidden]="viewGroup.value !== 'treeView'">
|
||||
<div class="m-b-20 layout-row align-start gap-20px">
|
||||
<button mat-raised-button (click)="toggleExpandCollapse()">
|
||||
{{ (isTreeExpanded ? 'labels.buttons.Collapse All' : 'labels.buttons.Expand All') | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
|
||||
<li>
|
||||
<div class="mat-tree-node">
|
||||
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
|
||||
<fa-icon
|
||||
class="mat-icon-rtl-mirror"
|
||||
icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"
|
||||
></fa-icon>
|
||||
</button>
|
||||
<div class="layout-row gap-4percent responsive-column">
|
||||
<div class="flex-fill">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<mat-tree [dataSource]="nestedTreeDataSource" [treeControl]="nestedTreeControl" class="office-tree">
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
|
||||
<li class="mat-tree-node">
|
||||
<button mat-icon-button disabled></button>
|
||||
<span (click)="viewOfficeNode(node)" class="m-r-10">
|
||||
{{ node.name }}
|
||||
</span>
|
||||
</div>
|
||||
<ul [class.office-tree-invisible]="!nestedTreeControl.isExpanded(node)">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
|
||||
@if (office) {
|
||||
<div class="flex-48">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row">
|
||||
<mat-card-title>
|
||||
{{ office.name }}
|
||||
</mat-card-title>
|
||||
<div class="flex align-end">
|
||||
<button mat-icon-button (click)="closeOffice()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-tab-group>
|
||||
<mat-tab label="General">
|
||||
<div class="layout-row-wrap">
|
||||
@if (office.parentId) {
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'Parent Office' | translate }}
|
||||
</div>
|
||||
}
|
||||
@if (office.parentId) {
|
||||
<div class="flex-50">
|
||||
{{ office.parentName }}
|
||||
</div>
|
||||
}
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ ' Opened On' | translate }}
|
||||
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
|
||||
<li>
|
||||
<div class="mat-tree-node">
|
||||
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
|
||||
<fa-icon
|
||||
class="mat-icon-rtl-mirror"
|
||||
icon="{{ nestedTreeControl.isExpanded(node) ? 'chevron-down' : 'chevron-right' }}"
|
||||
></fa-icon>
|
||||
</button>
|
||||
<span (click)="viewOfficeNode(node)" class="m-r-10">
|
||||
{{ node.name }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ office.openingDate | date }}
|
||||
</div>
|
||||
@if (office.externalId) {
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'External Id' | translate }}
|
||||
</div>
|
||||
}
|
||||
@if (office.externalId) {
|
||||
<div class="flex-50">
|
||||
<mifosx-external-identifier externalId="{{ office.externalId }}"></mifosx-external-identifier>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
@for (dataTable of dataTablesData; track dataTable) {
|
||||
<mat-tab label="{{ dataTable.registeredTableName }}"></mat-tab>
|
||||
}
|
||||
</mat-tab-group>
|
||||
<ul [class.office-tree-invisible]="!nestedTreeControl.isExpanded(node)">
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</ul>
|
||||
</li>
|
||||
</mat-nested-tree-node>
|
||||
</mat-tree>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (office) {
|
||||
<div class="flex-48">
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<div class="layout-row">
|
||||
<mat-card-title>
|
||||
{{ office.name }}
|
||||
</mat-card-title>
|
||||
<div class="flex align-end">
|
||||
<button mat-icon-button (click)="closeOffice()">
|
||||
<fa-icon icon="times"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<mat-tab-group>
|
||||
<mat-tab label="General">
|
||||
<div class="layout-row-wrap">
|
||||
@if (office.parentId) {
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'Parent Office' | translate }}
|
||||
</div>
|
||||
}
|
||||
@if (office.parentId) {
|
||||
<div class="flex-50">
|
||||
{{ office.parentName }}
|
||||
</div>
|
||||
}
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ ' Opened On' | translate }}
|
||||
</div>
|
||||
<div class="flex-50">
|
||||
{{ office.openingDate | date }}
|
||||
</div>
|
||||
@if (office.externalId) {
|
||||
<div class="flex-50 mat-body-strong">
|
||||
{{ 'External Id' | translate }}
|
||||
</div>
|
||||
}
|
||||
@if (office.externalId) {
|
||||
<div class="flex-50">
|
||||
<mifosx-external-identifier externalId="{{ office.externalId }}"></mifosx-external-identifier>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</mat-tab>
|
||||
@for (dataTable of dataTablesData; track dataTable) {
|
||||
<mat-tab label="{{ dataTable.registeredTableName }}"></mat-tab>
|
||||
}
|
||||
</mat-tab-group>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use '../../shared/styles/list-layout' as *;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
|
||||
@@ -6,48 +6,33 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="office-card-wrapper">
|
||||
<div class="card-header">
|
||||
<span class="card-title">
|
||||
{{ 'labels.heading.General' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="gt-detail">
|
||||
<div class="gt-grid">
|
||||
<div class="gt-cell">
|
||||
<div class="gt-cell__label">{{ 'labels.inputs.Parent Office' | translate }}</div>
|
||||
<div class="gt-cell__value">{{ officeData.parentName ? officeData.parentName : 'N/A' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-container mat-typography compact-view">
|
||||
<div class="layout-row-wrap responsive-column compact-details condensed">...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 class="gt-cell">
|
||||
<div class="gt-cell__label">{{ 'labels.inputs.Opened On' | translate }}</div>
|
||||
<div class="gt-cell__value">{{ officeData.openingDate ? (officeData.openingDate | dateFormat) : 'Unassigned' }}</div>
|
||||
</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 class="gt-cell">
|
||||
<div class="gt-cell__label">{{ 'labels.inputs.Name Decorated' | translate }}</div>
|
||||
<div class="gt-cell__value">{{ officeData.nameDecorated ? officeData.nameDecorated : 'Unassigned' }}</div>
|
||||
</div>
|
||||
<hr class="section-divider" />
|
||||
|
||||
<div class="flex-45 mat-body-strong left">{{ 'labels.inputs.External Id' | translate }}</div>
|
||||
@if (officeData.externalId) {
|
||||
<div class="flex-50 right">
|
||||
<mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
|
||||
<div class="gt-cell">
|
||||
<div class="gt-cell__label">{{ 'labels.inputs.External Id' | translate }}</div>
|
||||
<div class="gt-cell__value">
|
||||
@if (officeData.externalId) {
|
||||
<mifosx-external-identifier externalId="{{ officeData.externalId }}"></mifosx-external-identifier>
|
||||
}
|
||||
@if (!officeData.externalId) {
|
||||
{{ 'labels.inputs.Unassigned' | translate }}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (!officeData.externalId) {
|
||||
<div class="flex-50 right">
|
||||
{{ 'labels.inputs.Unassigned' | translate }}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,124 +6,52 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.office-card-wrapper {
|
||||
max-width: 450px;
|
||||
margin: 0 auto;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.gt-detail {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem 0.75rem 0.25rem;
|
||||
// Grid
|
||||
.gt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
padding: 0.5rem;
|
||||
margin: 1% auto;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
|
||||
.delete-button {
|
||||
margin-left: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-name {
|
||||
padding-left: 2%;
|
||||
}
|
||||
|
||||
.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;
|
||||
.gt-cell {
|
||||
padding: 14px 16px;
|
||||
background: $gray-50;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
transition: background 0.12s;
|
||||
|
||||
&: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;
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 4px 0;
|
||||
&__label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
@@ -6,53 +6,53 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container narrow-container extra-small">
|
||||
<div class="action-bar">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="edit-button"
|
||||
[routerLink]="['./edit']"
|
||||
*mifosxHasPermission="'UPDATE_OFFICE'"
|
||||
>
|
||||
<div class="vo-container">
|
||||
<!-- Header -->
|
||||
<div class="vo-header">
|
||||
<div class="vo-header__left">
|
||||
<button mat-stroked-button [routerLink]="['../../']" class="vo-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Offices' | translate }}
|
||||
</button>
|
||||
<h2 class="vo-header__title">{{ 'labels.heading.Office Details' | translate }}</h2>
|
||||
</div>
|
||||
<button mat-flat-button color="primary" [routerLink]="['./edit']" class="vo-edit-btn" *mifosxHasPermission="'UPDATE_OFFICE'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-card class="office-card">
|
||||
<mat-card-content class="card-content">
|
||||
<nav mat-tab-nav-bar class="navigation-tabs" [tabPanel]="tabPanel">
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="['./general']"
|
||||
routerLinkActive
|
||||
#general="routerLinkActive"
|
||||
[active]="general.isActive"
|
||||
class="compact-tab"
|
||||
>
|
||||
{{ 'labels.inputs.General' | translate }}
|
||||
</a>
|
||||
@for (officeDatatable of officeDatatables; track officeDatatable) {
|
||||
<span>
|
||||
<a
|
||||
mat-tab-link
|
||||
*mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
|
||||
[routerLink]="['./datatables', officeDatatable.registeredTableName]"
|
||||
routerLinkActive
|
||||
#datatable="routerLinkActive"
|
||||
[active]="datatable.isActive"
|
||||
class="compact-tab"
|
||||
>
|
||||
{{ officeDatatable.registeredTableName }}
|
||||
</a>
|
||||
</span>
|
||||
}
|
||||
</nav>
|
||||
<!-- Tab Card -->
|
||||
<div class="vo-card">
|
||||
<nav mat-tab-nav-bar class="vo-tabs" [tabPanel]="tabPanel">
|
||||
<a
|
||||
mat-tab-link
|
||||
[routerLink]="['./general']"
|
||||
routerLinkActive
|
||||
#general="routerLinkActive"
|
||||
[active]="general.isActive"
|
||||
class="vo-tab"
|
||||
>
|
||||
{{ 'labels.inputs.General' | translate }}
|
||||
</a>
|
||||
@for (officeDatatable of officeDatatables; track officeDatatable) {
|
||||
<span>
|
||||
<a
|
||||
mat-tab-link
|
||||
*mifosxHasPermission="'READ_' + officeDatatable.registeredTableName"
|
||||
[routerLink]="['./datatables', officeDatatable.registeredTableName]"
|
||||
routerLinkActive
|
||||
#datatable="routerLinkActive"
|
||||
[active]="datatable.isActive"
|
||||
class="vo-tab"
|
||||
>
|
||||
{{ officeDatatable.registeredTableName }}
|
||||
</a>
|
||||
</span>
|
||||
}
|
||||
</nav>
|
||||
|
||||
<mat-tab-nav-panel #tabPanel class="tab-panel">
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-tab-nav-panel #tabPanel class="vo-panel">
|
||||
<router-outlet></router-outlet>
|
||||
</mat-tab-nav-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,104 +6,95 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.action-button {
|
||||
width: 85%;
|
||||
margin: 0.2rem auto;
|
||||
padding: 0.3rem;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s ease;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.office-card {
|
||||
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;
|
||||
|
||||
&::-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;
|
||||
.vo-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 0.75rem;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.extra-small {
|
||||
max-width: 500px;
|
||||
// Header
|
||||
.vo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.compact-tab {
|
||||
.vo-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
.vo-edit-btn {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
}
|
||||
|
||||
// Card
|
||||
.vo-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.vo-tabs {
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
|
||||
.vo-tab {
|
||||
min-width: auto;
|
||||
padding: 0 12px;
|
||||
padding: 0 16px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 0.5rem;
|
||||
// Panel
|
||||
.vo-panel {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
min-width: 110px;
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.tab-header-with-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.5rem 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tab-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
// Responsive
|
||||
@media (max-width: 600px) {
|
||||
.vo-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user