Skip to content

Commit 557da18

Browse files
alberto-art3chalberto-art3ch
authored
Merge pull request #2630 from aaanishaaa/Web-207-alignment-of-buttons
(fix): Alignment of buttons and boxes missing on Clients, Groups and …
2 parents 78028a7 + db6a03d commit 557da18

File tree

7 files changed

+216
-214
lines changed

7 files changed

+216
-214
lines changed

‎src/app/centers/centers.component.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<mat-card class="container">
2-
<div class="layout-row align-start-center">
3-
<div class="search-box">
4-
<mat-form-field>
2+
<div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
3+
<div class="search-box m-r-30">
4+
<mat-form-field class="search-box">
55
<input matInput placeholder="Search by Name" [formControl]="name" />
66
</mat-form-field>
7-
<mat-form-field>
7+
<mat-form-field class="search-box">
88
<input matInput placeholder="Search by ExternalID" [formControl]="externalId" />
99
</mat-form-field>
10-
<mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">
10+
<mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()" class="m-r-10">
1111
{{ 'labels.inputs.Show Closed Centers' | translate }}
1212
</mat-checkbox>
1313
</div>
@@ -26,7 +26,7 @@
2626
</div>
2727
</div>
2828

29-
<table mat-table [dataSource]="dataSource" matSort>
29+
<table mat-table [dataSource]="dataSource" matSort class="bordered-table">
3030
<ng-container matColumnDef="name">
3131
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
3232
<td mat-cell *matCellDef="let center">{{ center.name }}</td>

‎src/app/centers/centers.component.scss‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1 @@
1-
.container {
2-
.action-button {
3-
margin-left: auto;
4-
}
5-
6-
.search-button {
7-
min-width: 30px;
8-
margin: 4px;
9-
}
10-
}
11-
12-
table {
13-
width: 100%;
14-
15-
.select-row:hover {
16-
cursor: pointer;
17-
}
18-
}
1+
@use '../shared/styles/list-layout' as *;

‎src/app/clients/clients.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@
2222
[routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
2323
*mifosxHasPermission="'CREATE_CLIENT'"
2424
>
25-
<fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
25+
<fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
2626
</button>
2727
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
28-
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
28+
<fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
2929
</button>
3030
</div>
3131
</div>
@@ -34,7 +34,7 @@
3434
<div *ngIf="isLoading">
3535
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
3636
</div>
37-
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
37+
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)" class="bordered-table">
3838
<!-- Name Column -->
3939
<ng-container matColumnDef="displayName">
4040
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>

‎src/app/clients/clients.component.scss‎

Lines changed: 1 addition & 164 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1 @@
1-
.container {
2-
.action-button {
3-
margin-left: auto;
4-
}
5-
6-
.search-button {
7-
min-width: 30px;
8-
margin: 4px;
9-
}
10-
11-
.search-box {
12-
min-width: 320px;
13-
}
14-
15-
.filter-box {
16-
min-width: 280px;
17-
}
18-
}
19-
20-
table {
21-
tr.select-row:hover {
22-
cursor: pointer;
23-
}
24-
25-
tr:nth-child(odd).td {
26-
color: black;
27-
}
28-
}
29-
30-
$bar: 150px;
31-
$foo: $bar * 8;
32-
$color: #e2e4ec;
33-
34-
.sidenav {
35-
overflow-x: hidden;
36-
}
37-
38-
@keyframes move {
39-
0% {
40-
left: 0;
41-
}
42-
43-
16.7% {
44-
left: 0;
45-
}
46-
47-
33.3% {
48-
left: calc($foo / 2);
49-
}
50-
51-
50% {
52-
left: $foo - $bar;
53-
}
54-
55-
66.7% {
56-
left: calc($foo / 2);
57-
}
58-
59-
83.3% {
60-
left: 0;
61-
}
62-
63-
100% {
64-
left: 0;
65-
}
66-
}
67-
68-
@keyframes grow {
69-
0% {
70-
width: $bar;
71-
}
72-
73-
16.7% {
74-
width: calc($foo / 2);
75-
}
76-
77-
33.3% {
78-
width: calc($foo / 2);
79-
}
80-
81-
50% {
82-
width: $bar;
83-
}
84-
85-
66.7% {
86-
width: calc($foo / 2);
87-
}
88-
89-
83.3% {
90-
width: calc($foo / 2);
91-
}
92-
93-
100% {
94-
width: $bar;
95-
}
96-
}
97-
98-
@media (max-width <= 768px) {
99-
.container {
100-
.search-box,
101-
.filter-box,
102-
.action-button {
103-
width: 100%;
104-
margin-bottom: 15px;
105-
}
106-
107-
.search-box mat-form-field {
108-
width: 100%;
109-
}
110-
111-
.action-button {
112-
display: flex;
113-
flex-direction: column;
114-
gap: 10px;
115-
align-items: stretch;
116-
}
117-
118-
.filter-box {
119-
display: flex;
120-
align-items: center;
121-
}
122-
}
123-
124-
table {
125-
width: 100%;
126-
overflow-x: auto;
127-
display: block;
128-
129-
thead,
130-
tbody,
131-
tr,
132-
th,
133-
td {
134-
white-space: nowrap;
135-
}
136-
}
137-
138-
.mat-paginator {
139-
overflow-x: auto;
140-
display: block;
141-
}
142-
143-
.alert {
144-
text-align: center;
145-
padding: 10px;
146-
}
147-
}
148-
149-
@media screen and (max-width > 768px) {
150-
.action-button {
151-
width: 100%;
152-
display: flex;
153-
flex-direction: column;
154-
gap: 10px;
155-
156-
button {
157-
width: 100%;
158-
}
159-
}
160-
}
161-
162-
.client-list {
163-
padding: 1%;
164-
}
1+
@use '../shared/styles/list-layout' as *;

‎src/app/groups/groups.component.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<mat-card class="container">
2-
<div class="layout-row align-start-center">
3-
<div class="search-box">
4-
<mat-form-field>
2+
<div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
3+
<div class="search-box m-r-30">
4+
<mat-form-field class="search-box">
55
<input matInput placeholder="Search by Name" [formControl]="name" />
66
</mat-form-field>
7-
<mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{
7+
<mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()" class="m-r-10">{{
88
'labels.inputs.Show Closed Groups' | translate
99
}}</mat-checkbox>
1010
</div>
1111
<div class="action-button gap-25px">
1212
<button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
13-
<fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
13+
<fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
1414
</button>
1515
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
16-
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
16+
<fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
1717
</button>
1818
</div>
1919
</div>
2020

21-
<table mat-table [dataSource]="dataSource" matSort>
21+
<table mat-table [dataSource]="dataSource" matSort class="bordered-table">
2222
<ng-container matColumnDef="name">
2323
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
2424
<td mat-cell *matCellDef="let group">{{ group.name }}</td>

‎src/app/groups/groups.component.scss‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1 @@
1-
.container {
2-
.action-button {
3-
margin-left: auto;
4-
}
5-
6-
.search-button {
7-
min-width: 30px;
8-
margin: 4px;
9-
}
10-
}
11-
12-
table {
13-
tr.select-row:hover {
14-
cursor: pointer;
15-
}
16-
}
1+
@use '../shared/styles/list-layout' as *;

0 commit comments

Comments
 (0)