Merge pull request #2630 from aaanishaaa/Web-207-alignment-of-buttons
(fix): Alignment of buttons and boxes missing on Clients, Groups and …
This commit is contained in:
Jose Alberto Hernandez
@@ -1,13 +1,13 @@
|
||||
<mat-card class="container">
|
||||
<div class="layout-row align-start-center">
|
||||
<div class="search-box">
|
||||
<mat-form-field>
|
||||
<div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
|
||||
<div class="search-box m-r-30">
|
||||
<mat-form-field class="search-box">
|
||||
<input matInput placeholder="Search by Name" [formControl]="name" />
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-form-field class="search-box">
|
||||
<input matInput placeholder="Search by ExternalID" [formControl]="externalId" />
|
||||
</mat-form-field>
|
||||
<mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()">
|
||||
<mat-checkbox #showClosedCenters labelPosition="after" (change)="changeShowClosedCenters()" class="m-r-10">
|
||||
{{ 'labels.inputs.Show Closed Centers' | translate }}
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="bordered-table">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let center">{{ center.name }}</td>
|
||||
|
||||
@@ -1,18 +1 @@
|
||||
.container {
|
||||
.action-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
min-width: 30px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@use '../shared/styles/list-layout' as *;
|
||||
|
||||
@@ -22,10 +22,10 @@
|
||||
[routerLink]="['../', 'organization', 'bulk-import', 'Clients']"
|
||||
*mifosxHasPermission="'CREATE_CLIENT'"
|
||||
>
|
||||
<fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
|
||||
<fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Client' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CLIENT'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
|
||||
<fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Client' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
<div *ngIf="isLoading">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)">
|
||||
<table mat-table [dataSource]="dataSource" matSort (matSortChange)="sortChanged($event)" class="bordered-table">
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="displayName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
|
||||
|
||||
@@ -1,164 +1 @@
|
||||
.container {
|
||||
.action-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
min-width: 30px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
min-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tr:nth-child(odd).td {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
$bar: 150px;
|
||||
$foo: $bar * 8;
|
||||
$color: #e2e4ec;
|
||||
|
||||
.sidenav {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
16.7% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
33.3% {
|
||||
left: calc($foo / 2);
|
||||
}
|
||||
|
||||
50% {
|
||||
left: $foo - $bar;
|
||||
}
|
||||
|
||||
66.7% {
|
||||
left: calc($foo / 2);
|
||||
}
|
||||
|
||||
83.3% {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
0% {
|
||||
width: $bar;
|
||||
}
|
||||
|
||||
16.7% {
|
||||
width: calc($foo / 2);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
width: calc($foo / 2);
|
||||
}
|
||||
|
||||
50% {
|
||||
width: $bar;
|
||||
}
|
||||
|
||||
66.7% {
|
||||
width: calc($foo / 2);
|
||||
}
|
||||
|
||||
83.3% {
|
||||
width: calc($foo / 2);
|
||||
}
|
||||
|
||||
100% {
|
||||
width: $bar;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width <= 768px) {
|
||||
.container {
|
||||
.search-box,
|
||||
.filter-box,
|
||||
.action-button {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-box mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-paginator {
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width > 768px) {
|
||||
.action-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.client-list {
|
||||
padding: 1%;
|
||||
}
|
||||
@use '../shared/styles/list-layout' as *;
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
<mat-card class="container">
|
||||
<div class="layout-row align-start-center">
|
||||
<div class="search-box">
|
||||
<mat-form-field>
|
||||
<div class="layout-column layout-gt-sm-row align-gt-sm-start-center">
|
||||
<div class="search-box m-r-30">
|
||||
<mat-form-field class="search-box">
|
||||
<input matInput placeholder="Search by Name" [formControl]="name" />
|
||||
</mat-form-field>
|
||||
<mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()">{{
|
||||
<mat-checkbox #showClosedGroups labelPosition="after" (change)="changeShowClosedGroups()" class="m-r-10">{{
|
||||
'labels.inputs.Show Closed Groups' | translate
|
||||
}}</mat-checkbox>
|
||||
</div>
|
||||
<div class="action-button gap-25px">
|
||||
<button mat-raised-button color="primary" [routerLink]="['../', 'organization', 'bulk-import', 'Groups']">
|
||||
<fa-icon icon="download" class="m-r-10"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
|
||||
<fa-icon icon="download" class="m-r-20"></fa-icon>{{ 'labels.buttons.Import Group' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GROUP'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
|
||||
<fa-icon icon="plus" class="m-r-20"></fa-icon>{{ 'labels.buttons.Create Group' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<table mat-table [dataSource]="dataSource" matSort class="bordered-table">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let group">{{ group.name }}</td>
|
||||
|
||||
@@ -1,16 +1 @@
|
||||
.container {
|
||||
.action-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
min-width: 30px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@use '../shared/styles/list-layout' as *;
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
// Variables
|
||||
$bar: 150px;
|
||||
$foo: $bar * 8;
|
||||
$color: #e2e4ec;
|
||||
|
||||
// Container styles
|
||||
.container {
|
||||
padding: 24px;
|
||||
|
||||
// Support for existing layout classes
|
||||
.layout-column,
|
||||
.layout-gt-sm-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: nowrap;
|
||||
gap: 20px;
|
||||
|
||||
&.align-gt-sm-start-center {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
&.m-r-30 {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
// Handle multiple form fields in search box
|
||||
mat-form-field {
|
||||
min-width: 200px;
|
||||
flex: 1;
|
||||
|
||||
&.search-box {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Ensure form fields are inline
|
||||
+ mat-form-field {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
margin-left: 15px;
|
||||
|
||||
&.m-r-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
|
||||
&.gap-25px {
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
button {
|
||||
white-space: nowrap;
|
||||
|
||||
fa-icon {
|
||||
&.m-r-10,
|
||||
&.m-r-20 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table styling
|
||||
.bordered-table {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 16px;
|
||||
|
||||
.select-row {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Paginator styling
|
||||
mat-paginator {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
background: white;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
mat-progress-bar {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (width <= 768px) {
|
||||
.container {
|
||||
padding: 16px;
|
||||
|
||||
.layout-column,
|
||||
.layout-gt-sm-row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
margin-right: 0 !important;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
mat-form-field {
|
||||
min-width: 150px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
+ mat-form-field {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
margin-left: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
&.gap-25px {
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table styles
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
tr.select-row:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility classes
|
||||
.m-r-10 {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.m-r-20 {
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
.m-r-30 {
|
||||
margin-right: 30px !important;
|
||||
}
|
||||
Reference in New Issue
Block a user