fix: correct alignment and styling of AccountingRules 2 section
This commit is contained in:
shubhamsharma9199
@@ -1,101 +1,77 @@
|
|||||||
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
|
<div class="container">
|
||||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
|
<div class="layout-row align-end gap-2px responsive-column m-b-20">
|
||||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
|
||||||
{{ 'labels.buttons.Edit' | translate }}
|
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||||
</button>
|
{{ 'labels.buttons.Edit' | translate }}
|
||||||
<button
|
</button>
|
||||||
mat-raised-button
|
<button
|
||||||
color="warn"
|
mat-raised-button
|
||||||
(click)="deleteAccountingRule()"
|
color="warn"
|
||||||
*mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
|
(click)="deleteAccountingRule()"
|
||||||
>
|
*mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
|
||||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
>
|
||||||
{{ 'labels.buttons.Delete' | translate }}
|
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||||
</button>
|
{{ 'labels.buttons.Delete' | translate }}
|
||||||
</div>
|
</button>
|
||||||
|
|
||||||
<div class="container layout-row gap-2-percent responsive-column">
|
|
||||||
<div class="flex-48">
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="layout-row-wrap">
|
|
||||||
<div class="flex-50 header">
|
|
||||||
{{ 'labels.inputs.Office' | translate }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50">
|
|
||||||
{{ accountingRule.officeName }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 header" *ngIf="accountingRule.description">
|
|
||||||
{{ 'labels.inputs.Description' | translate }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50" *ngIf="accountingRule.description">
|
|
||||||
{{ accountingRule.description }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 header">
|
|
||||||
{{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50">
|
|
||||||
{{ accountingRule.allowMultipleDebitEntries }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 header">
|
|
||||||
{{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50">
|
|
||||||
{{ accountingRule.allowMultipleCreditEntries }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex-fill">
|
<mat-card>
|
||||||
<mat-card>
|
<mat-card-content class="content-rows">
|
||||||
<mat-card-content>
|
<div class="content-row">
|
||||||
<div class="layout-row content">
|
<div class="label">{{ 'labels.inputs.Office' | translate }}</div>
|
||||||
<div class="flex-50 layout-column" *ngIf="accountingRule.debitTags">
|
<div class="value">{{ accountingRule.officeName }}</div>
|
||||||
<div class="header">
|
</div>
|
||||||
{{ 'labels.inputs.Debit Tags' | translate }}
|
|
||||||
</div>
|
|
||||||
<div *ngFor="let debitTag of accountingRule.debitTags">
|
|
||||||
{{ debitTag.tag.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 layout-column" *ngIf="accountingRule.debitAccounts">
|
<div class="content-row" *ngIf="accountingRule.description">
|
||||||
<div class="header">
|
<div class="label">{{ 'labels.inputs.Description' | translate }}</div>
|
||||||
{{ 'labels.inputs.Debit Account Name' | translate }}
|
<div class="value">{{ accountingRule.description }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngFor="let debitAccount of accountingRule.debitAccounts">
|
|
||||||
{{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 layout-column" *ngIf="accountingRule.creditTags">
|
<div class="content-row">
|
||||||
<div class="header">
|
<div class="label">{{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}</div>
|
||||||
{{ 'labels.inputs.Credit Tags' | translate }}
|
<div class="value">{{ accountingRule.allowMultipleDebitEntries }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngFor="let creditTag of accountingRule.creditTags">
|
|
||||||
{{ creditTag.tag.name }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-50 layout-column" *ngIf="accountingRule.creditAccounts">
|
<div class="content-row">
|
||||||
<div class="header">
|
<div class="label">{{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}</div>
|
||||||
{{ 'labels.inputs.Credit Account Name' | translate }}
|
<div class="value">{{ accountingRule.allowMultipleCreditEntries }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngFor="let creditAccount of accountingRule.creditAccounts">
|
</mat-card-content>
|
||||||
{{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
|
</mat-card>
|
||||||
</div>
|
|
||||||
</div>
|
<mat-card>
|
||||||
|
<mat-card-content class="content-rows">
|
||||||
|
<div class="content-row" *ngIf="accountingRule.debitTags?.length">
|
||||||
|
<div class="label">{{ 'labels.inputs.Debit Tags' | translate }}</div>
|
||||||
|
<div class="value">
|
||||||
|
<span *ngFor="let debitTag of accountingRule.debitTags">{{ debitTag.tag.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</mat-card-content>
|
</div>
|
||||||
</mat-card>
|
|
||||||
</div>
|
<div class="content-row" *ngIf="accountingRule.debitAccounts?.length">
|
||||||
|
<div class="label">{{ 'labels.inputs.Debit Account Name' | translate }}</div>
|
||||||
|
<div class="value">
|
||||||
|
<span *ngFor="let debitAccount of accountingRule.debitAccounts">{{
|
||||||
|
debitAccount.name + ' (' + debitAccount.glCode + ')'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-row" *ngIf="accountingRule.creditTags?.length">
|
||||||
|
<div class="label">{{ 'labels.inputs.Credit Tags' | translate }}</div>
|
||||||
|
<div class="value">
|
||||||
|
<span *ngFor="let creditTag of accountingRule.creditTags">{{ creditTag.tag.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-row" *ngIf="accountingRule.creditAccounts?.length">
|
||||||
|
<div class="label">{{ 'labels.inputs.Credit Account Name' | translate }}</div>
|
||||||
|
<div class="value">
|
||||||
|
<span *ngFor="let creditAccount of accountingRule.creditAccounts">{{
|
||||||
|
creditAccount.name + ' (' + creditAccount.glCode + ')'
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,10 +1,103 @@
|
|||||||
.content {
|
.container {
|
||||||
div {
|
max-width: 37rem;
|
||||||
margin: 1rem 0;
|
margin: 0 auto;
|
||||||
word-wrap: break-word;
|
padding: 1rem;
|
||||||
|
|
||||||
&.header {
|
mat-card {
|
||||||
font-weight: 500;
|
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;
|
||||||
|
background-color: var(--card-background, #fff);
|
||||||
|
transition:
|
||||||
|
background-color 0.3s ease,
|
||||||
|
border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-row-wrap {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 50% 50%;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.flex-50 {
|
||||||
|
padding: 0.5rem;
|
||||||
|
|
||||||
|
&.mat-body-strong {
|
||||||
|
color: var(--label-color, #555);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
div {
|
||||||
|
margin: 1rem 0;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
color: var(--text-color, inherit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-rows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.content-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border-bottom: 1px solid var(--border-color-light, #eee);
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex: 0 0 40%;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--label-color, #555);
|
||||||
|
padding: 0.5rem 1rem 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 0 0 60%;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
color: var(--text-color, inherit);
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-button-container {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dark mode styles
|
||||||
|
:host-context(.dark-theme) {
|
||||||
|
--border-color: #444;
|
||||||
|
--border-color-light: #3a3a3a;
|
||||||
|
--card-background: #2d2d2d;
|
||||||
|
--label-color: #b8b8b8;
|
||||||
|
--text-color: #e0e0e0;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
mat-card {
|
||||||
|
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user