Merge pull request #2999 from AnvayKharb/web-583-improving-the-ui-of-the-investor
WEB-583: Improve UI Alignment of Investor Filters
This commit is contained in:
Jose Alberto Hernandez
@@ -8,68 +8,72 @@
|
||||
|
||||
<mat-card class="container">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-18">
|
||||
<mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
|
||||
<input matInput [formControl]="searchText" />
|
||||
</mat-form-field>
|
||||
<div class="investor-filter-section">
|
||||
<div class="filter-row">
|
||||
<mat-form-field class="filter-field">
|
||||
<mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
|
||||
<input matInput [formControl]="searchText" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-18" (click)="effectiveFromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="effectiveFromDatePicker"
|
||||
[formControl]="effectiveFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="filter-field" (click)="effectiveFromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="effectiveFromDatePicker"
|
||||
[formControl]="effectiveFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-18" (click)="effectiveToDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="effectiveToDatePicker"
|
||||
[formControl]="effectiveToDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="filter-field" (click)="effectiveToDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="effectiveToDatePicker"
|
||||
[formControl]="effectiveToDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #effectiveToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-form-field class="flex-18" (click)="settlementFromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="settlementFromDatePicker"
|
||||
[formControl]="settlementFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<div class="filter-row">
|
||||
<mat-form-field class="filter-field" (click)="settlementFromDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="settlementFromDatePicker"
|
||||
[formControl]="settlementFromDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementFromDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-18" (click)="settlementToDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="settlementToDatePicker"
|
||||
[formControl]="settlementToDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="filter-field" (click)="settlementToDatePicker.open()">
|
||||
<mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="settlementToDatePicker"
|
||||
[formControl]="settlementToDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #settlementToDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="center m-t-15 flex-98">
|
||||
<button mat-raised-button color="primary" (click)="searchEAO()">
|
||||
<fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
|
||||
</button>
|
||||
<div class="filter-button-container">
|
||||
<button mat-raised-button color="primary" (click)="searchEAO()" class="search-button">
|
||||
<fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -6,6 +6,90 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
// Filter Section Styling
|
||||
.investor-filter-section {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-field {
|
||||
flex: 1 1 calc(33.333% - 11px);
|
||||
min-width: 200px;
|
||||
max-width: 100%;
|
||||
|
||||
// Ensure consistent height across all fields
|
||||
::ng-deep .mat-mdc-form-field-infix {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
// Align datepicker icons consistently
|
||||
::ng-deep .mat-datepicker-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-button-container {
|
||||
flex: 1 1 calc(33.333% - 11px);
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 4px;
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
fa-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments for tablets
|
||||
@media screen and (width <= 1024px) {
|
||||
.filter-field,
|
||||
.filter-button-container {
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments for mobile
|
||||
@media screen and (width <= 768px) {
|
||||
.filter-row {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-field,
|
||||
.filter-button-container {
|
||||
flex: 1 1 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.filter-button-container {
|
||||
padding-bottom: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
color: black;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user