CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #2999 from AnvayKharb/web-583-improving-the-ui-of-the-investor

Browse Source 
WEB-583: Improve UI Alignment of Investor Filters
This commit is contained in:
Jose Alberto Hernandez
2026-01-16 12:18:36 -05:00
committed by GitHub
parent cc39b34a57 40a16c8c18
commit 7beb08579d
2 changed files with 145 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/organization/investors/investors.component.html
+61 -57
View File
@@ -8,68 +8,72 @@
<mat-card class="container"> <mat-card class="container">
<mat-card-content> <mat-card-content>
<div class="layout-row-wrap gap-2px responsive-column"> <div class="investor-filter-section">
<mat-form-field class="flex-18"> <div class="filter-row">
<mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label> <mat-form-field class="filter-field">
<input matInput [formControl]="searchText" /> <mat-label>{{ 'labels.text.Search by Text' | translate }}</mat-label>
</mat-form-field> <input matInput [formControl]="searchText" />
</mat-form-field>
<mat-form-field class="flex-18" (click)="effectiveFromDatePicker.open()"> <mat-form-field class="filter-field" (click)="effectiveFromDatePicker.open()">
<mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label> <mat-label>{{ 'labels.text.Effective Date From' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="effectiveFromDatePicker" [matDatepicker]="effectiveFromDatePicker"
[formControl]="effectiveFromDate" [formControl]="effectiveFromDate"
/> />
<mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
<mat-datepicker #effectiveFromDatePicker></mat-datepicker> <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field class="flex-18" (click)="effectiveToDatePicker.open()"> <mat-form-field class="filter-field" (click)="effectiveToDatePicker.open()">
<mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label> <mat-label>{{ 'labels.text.Effective Date To' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="effectiveToDatePicker" [matDatepicker]="effectiveToDatePicker"
[formControl]="effectiveToDate" [formControl]="effectiveToDate"
/> />
<mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
<mat-datepicker #effectiveToDatePicker></mat-datepicker> <mat-datepicker #effectiveToDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
</div>
<mat-form-field class="flex-18" (click)="settlementFromDatePicker.open()"> <div class="filter-row">
<mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label> <mat-form-field class="filter-field" (click)="settlementFromDatePicker.open()">
<input <mat-label>{{ 'labels.text.Settlement Date From' | translate }}</mat-label>
matInput <input
[min]="minDate" matInput
[max]="maxDate" [min]="minDate"
[matDatepicker]="settlementFromDatePicker" [max]="maxDate"
[formControl]="settlementFromDate" [matDatepicker]="settlementFromDatePicker"
/> [formControl]="settlementFromDate"
<mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle> />
<mat-datepicker #settlementFromDatePicker></mat-datepicker> <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
</mat-form-field> <mat-datepicker #settlementFromDatePicker></mat-datepicker>
</mat-form-field>
<mat-form-field class="flex-18" (click)="settlementToDatePicker.open()"> <mat-form-field class="filter-field" (click)="settlementToDatePicker.open()">
<mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label> <mat-label>{{ 'labels.text.Settlement Date To' | translate }}</mat-label>
<input <input
matInput matInput
[min]="minDate" [min]="minDate"
[max]="maxDate" [max]="maxDate"
[matDatepicker]="settlementToDatePicker" [matDatepicker]="settlementToDatePicker"
[formControl]="settlementToDate" [formControl]="settlementToDate"
/> />
<mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
<mat-datepicker #settlementToDatePicker></mat-datepicker> <mat-datepicker #settlementToDatePicker></mat-datepicker>
</mat-form-field> </mat-form-field>
<div class="center m-t-15 flex-98"> <div class="filter-button-container">
<button mat-raised-button color="primary" (click)="searchEAO()"> <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 }} <fa-icon icon="search" class="m-r-10"></fa-icon> {{ 'labels.buttons.Search' | translate }}
</button> </button>
</div>
</div> </div>
</div> </div>
src/app/organization/investors/investors.component.scss
+84
View File
@@ -6,6 +6,90 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. * 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 { .status {
color: black; color: black;
} }