Skip to content

Commit c271ad8

Browse files
alberto-art3chalberto-art3ch
authored
Merge pull request #2675 from shubhamkumar9199/fix/accountingrules-layout
WEB-320-fix: correct alignment and styling of AccountingRules 2 section
2 parents 95220e2 + d7ce39f commit c271ad8

File tree

2 files changed

+165
-96
lines changed

2 files changed

+165
-96
lines changed

‎src/app/accounting/accounting-rules/view-rule/view-rule.component.html‎

Lines changed: 66 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,77 @@
1-
<div class="layout-row align-end gap-2px responsive-column container m-b-20">
2-
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
3-
<fa-icon icon="edit" class="m-r-10"></fa-icon>
4-
{{ 'labels.buttons.Edit' | translate }}
5-
</button>
6-
<button
7-
mat-raised-button
8-
color="warn"
9-
(click)="deleteAccountingRule()"
10-
*mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
11-
>
12-
<fa-icon icon="trash" class="m-r-10"></fa-icon>
13-
{{ 'labels.buttons.Delete' | translate }}
14-
</button>
15-
</div>
16-
17-
<div class="container layout-row gap-2-percent responsive-column">
18-
<div class="flex-48">
19-
<mat-card>
20-
<mat-card-content>
21-
<div class="layout-row-wrap">
22-
<div class="flex-50 header">
23-
{{ 'labels.inputs.Office' | translate }}
24-
</div>
25-
26-
<div class="flex-50">
27-
{{ accountingRule.officeName }}
28-
</div>
29-
30-
<div class="flex-50 header" *ngIf="accountingRule.description">
31-
{{ 'labels.inputs.Description' | translate }}
32-
</div>
1+
<div class="container">
2+
<div class="layout-row align-end gap-2px responsive-column m-b-20">
3+
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_ACCOUNTINGRULE'">
4+
<fa-icon icon="edit" class="m-r-10"></fa-icon>
5+
{{ 'labels.buttons.Edit' | translate }}
6+
</button>
7+
<button
8+
mat-raised-button
9+
color="warn"
10+
(click)="deleteAccountingRule()"
11+
*mifosxHasPermission="'DELETE_ACCOUNTINGRULE'"
12+
>
13+
<fa-icon icon="trash" class="m-r-10"></fa-icon>
14+
{{ 'labels.buttons.Delete' | translate }}
15+
</button>
16+
</div>
3317

34-
<div class="flex-50" *ngIf="accountingRule.description">
35-
{{ accountingRule.description }}
36-
</div>
18+
<mat-card>
19+
<mat-card-content class="content-rows">
20+
<div class="content-row">
21+
<div class="label">{{ 'labels.inputs.Office' | translate }}</div>
22+
<div class="value">{{ accountingRule.officeName }}</div>
23+
</div>
3724

38-
<div class="flex-50 header">
39-
{{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}
40-
</div>
25+
<div class="content-row" *ngIf="accountingRule.description">
26+
<div class="label">{{ 'labels.inputs.Description' | translate }}</div>
27+
<div class="value">{{ accountingRule.description }}</div>
28+
</div>
4129

42-
<div class="flex-50">
43-
{{ accountingRule.allowMultipleDebitEntries }}
44-
</div>
30+
<div class="content-row">
31+
<div class="label">{{ 'labels.inputs.Multiple Debit Entries Allowed' | translate }}</div>
32+
<div class="value">{{ accountingRule.allowMultipleDebitEntries }}</div>
33+
</div>
4534

46-
<div class="flex-50 header">
47-
{{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}
48-
</div>
35+
<div class="content-row">
36+
<div class="label">{{ 'labels.inputs.Multiple Credit Entries Allowed' | translate }}</div>
37+
<div class="value">{{ accountingRule.allowMultipleCreditEntries }}</div>
38+
</div>
39+
</mat-card-content>
40+
</mat-card>
4941

50-
<div class="flex-50">
51-
{{ accountingRule.allowMultipleCreditEntries }}
52-
</div>
42+
<mat-card>
43+
<mat-card-content class="content-rows">
44+
<div class="content-row" *ngIf="accountingRule.debitTags?.length">
45+
<div class="label">{{ 'labels.inputs.Debit Tags' | translate }}</div>
46+
<div class="value">
47+
<span *ngFor="let debitTag of accountingRule.debitTags">{{ debitTag.tag.name }}</span>
5348
</div>
54-
</mat-card-content>
55-
</mat-card>
56-
</div>
57-
58-
<div class="flex-fill">
59-
<mat-card>
60-
<mat-card-content>
61-
<div class="layout-row content">
62-
<div class="flex-50 layout-column" *ngIf="accountingRule.debitTags">
63-
<div class="header">
64-
{{ 'labels.inputs.Debit Tags' | translate }}
65-
</div>
66-
<div *ngFor="let debitTag of accountingRule.debitTags">
67-
{{ debitTag.tag.name }}
68-
</div>
69-
</div>
49+
</div>
7050

71-
<div class="flex-50 layout-column" *ngIf="accountingRule.debitAccounts">
72-
<div class="header">
73-
{{ 'labels.inputs.Debit Account Name' | translate }}
74-
</div>
75-
<div *ngFor="let debitAccount of accountingRule.debitAccounts">
76-
{{ debitAccount.name + ' (' + debitAccount.glCode + ')' }}
77-
</div>
78-
</div>
51+
<div class="content-row" *ngIf="accountingRule.debitAccounts?.length">
52+
<div class="label">{{ 'labels.inputs.Debit Account Name' | translate }}</div>
53+
<div class="value">
54+
<span *ngFor="let debitAccount of accountingRule.debitAccounts">{{
55+
debitAccount.name + ' (' + debitAccount.glCode + ')'
56+
}}</span>
57+
</div>
58+
</div>
7959

80-
<div class="flex-50 layout-column" *ngIf="accountingRule.creditTags">
81-
<div class="header">
82-
{{ 'labels.inputs.Credit Tags' | translate }}
83-
</div>
84-
<div *ngFor="let creditTag of accountingRule.creditTags">
85-
{{ creditTag.tag.name }}
86-
</div>
87-
</div>
60+
<div class="content-row" *ngIf="accountingRule.creditTags?.length">
61+
<div class="label">{{ 'labels.inputs.Credit Tags' | translate }}</div>
62+
<div class="value">
63+
<span *ngFor="let creditTag of accountingRule.creditTags">{{ creditTag.tag.name }}</span>
64+
</div>
65+
</div>
8866

89-
<div class="flex-50 layout-column" *ngIf="accountingRule.creditAccounts">
90-
<div class="header">
91-
{{ 'labels.inputs.Credit Account Name' | translate }}
92-
</div>
93-
<div *ngFor="let creditAccount of accountingRule.creditAccounts">
94-
{{ creditAccount.name + ' (' + creditAccount.glCode + ')' }}
95-
</div>
96-
</div>
67+
<div class="content-row" *ngIf="accountingRule.creditAccounts?.length">
68+
<div class="label">{{ 'labels.inputs.Credit Account Name' | translate }}</div>
69+
<div class="value">
70+
<span *ngFor="let creditAccount of accountingRule.creditAccounts">{{
71+
creditAccount.name + ' (' + creditAccount.glCode + ')'
72+
}}</span>
9773
</div>
98-
</mat-card-content>
99-
</mat-card>
100-
</div>
74+
</div>
75+
</mat-card-content>
76+
</mat-card>
10177
</div>

‎src/app/accounting/accounting-rules/view-rule/view-rule.component.scss‎

Lines changed: 99 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,103 @@
1-
.content {
2-
div {
3-
margin: 1rem 0;
4-
word-wrap: break-word;
1+
.container {
2+
max-width: 37rem;
3+
margin: 0 auto;
4+
padding: 1rem;
55

6-
&.header {
7-
font-weight: 500;
6+
mat-card {
7+
margin-bottom: 1rem;
8+
padding: 1.5rem;
9+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
10+
border: 1px solid var(--border-color, #ddd);
11+
border-radius: 8px;
12+
background-color: var(--card-background, #fff);
13+
transition:
14+
background-color 0.3s ease,
15+
border-color 0.3s ease;
16+
}
17+
18+
.layout-row-wrap {
19+
display: grid;
20+
grid-template-columns: 50% 50%;
21+
gap: 1rem;
22+
23+
.flex-50 {
24+
padding: 0.5rem;
25+
26+
&.mat-body-strong {
27+
color: var(--label-color, #555);
28+
font-weight: 600;
29+
}
30+
}
31+
}
32+
33+
.content {
34+
div {
35+
margin: 1rem 0;
36+
word-wrap: break-word;
37+
38+
span {
39+
display: block;
40+
padding: 0.25rem 0;
41+
color: var(--text-color, inherit);
42+
}
43+
}
44+
}
45+
46+
.content-rows {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 1rem;
50+
51+
.content-row {
52+
display: flex;
53+
flex-direction: row;
54+
border-bottom: 1px solid var(--border-color-light, #eee);
55+
padding-bottom: 0.5rem;
56+
57+
.label {
58+
flex: 0 0 40%;
59+
font-weight: 600;
60+
color: var(--label-color, #555);
61+
padding: 0.5rem 1rem 0.5rem 0;
62+
}
63+
64+
.value {
65+
flex: 0 0 60%;
66+
padding: 0.5rem 0;
67+
color: var(--text-color, inherit);
68+
69+
span {
70+
display: block;
71+
padding: 0.25rem 0;
72+
}
73+
}
74+
}
75+
}
76+
77+
.back-button-container {
78+
margin-top: 2rem;
79+
}
80+
81+
button {
82+
transition: all 0.2s ease;
83+
84+
&:hover {
85+
transform: translateY(-2px);
86+
}
87+
}
88+
}
89+
90+
// Dark mode styles
91+
:host-context(.dark-theme) {
92+
--border-color: #444;
93+
--border-color-light: #3a3a3a;
94+
--card-background: #2d2d2d;
95+
--label-color: #b8b8b8;
96+
--text-color: #e0e0e0;
97+
98+
.container {
99+
mat-card {
100+
box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
8101
}
9102
}
10103
}

0 commit comments

Comments
 (0)