fix widths for advanced search for - when selecting publication date and specific date range

This commit is contained in:
Alex Martzios 2022-08-02 15:42:32 +03:00
parent 23c0ea997c
commit 3f7a9dda90
2 changed files with 31 additions and 32 deletions

View File

@ -18,7 +18,7 @@
<form (ngSubmit)="queryChanged()" class="uk-card uk-card-default uk-box-shadow-medium">
<button type="submit" class="uk-hidden"></button>
<div class="uk-card-body uk-height-medium uk-overflow-auto">
<table class="uk-table uk-table-middle uk-text-small uk-table-responsive uk-table-small uk-margin-remove">
<table class="uk-table uk-text-small uk-table-responsive uk-table-small uk-margin-remove">
<tr>
<td class="uk-text-bold uk-text-uppercase uk-width-2-5">Searching Fields</td>
<td class="uk-text-bold uk-text-uppercase uk-width-1-3">Terms</td>

View File

@ -7,37 +7,36 @@ import { MatDatepickerInputEvent } from "@angular/material/datepicker";
@Component({
selector: 'date-filter',
template: `
<div class="">
<mat-select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" class=" matSelection uk-input" [(ngModel)]=dateValue.type [disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
<div *ngIf="dateValue && dateValue.type=='range' ">
<div class=" uk-grid uk-margin-remove-left" >
<div class="uk-padding-remove uk-width-small">
<mat-select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
</div>
<div class="uk-padding-remove uk-margin-small-left" style="">
<mat-form-field class="uk-width-small">
<input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date"
[formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</div>
<div class="uk-padding-remove uk-margin-small-left" style="">
<mat-form-field class="uk-width-small">
<input matInput [matDatepicker]="pickerTo" placeholder="Choose to date"
[formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
</div>
<div>
<mat-select *ngIf="dateValue && dateValue.type!='range' " name="{{'select_date_type'+filterId}}" class=" matSelection uk-input" [(ngModel)]=dateValue.type [disableOptionCentering]="true" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
<div *ngIf="dateValue && dateValue.type=='range' ">
<div class=" uk-grid uk-margin-remove-left" >
<div class="uk-padding-remove uk-margin-small-bottom uk-width-1-1">
<mat-select name="{{'select_date_type'+filterId}}" [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
<mat-option *ngFor="let type of dateValue.types let i = index" [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
</mat-select>
</div>
<div class="uk-padding-remove uk-margin-small-left uk-width-1-1">
<mat-form-field class="uk-width-1-1">
<input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date"
[formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
<mat-datepicker #pickerFrom></mat-datepicker>
</mat-form-field>
</div>
<div class="uk-padding-remove uk-margin-small-left uk-width-1-1">
<mat-form-field class="uk-width-1-1">
<input matInput [matDatepicker]="pickerTo" placeholder="Choose to date"
[formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
<mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
<mat-datepicker #pickerTo></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
</div>
`
})