From 3f7a9dda90c43414f7e9615548c248c31b12f758 Mon Sep 17 00:00:00 2001
From: Alex Martzios <alexandros.martzios@gmail.com>
Date: Tue, 2 Aug 2022 15:42:32 +0300
Subject: [PATCH] fix widths for advanced search for - when selecting
 publication date and specific date range

---
 .../advancedSearchForm.component.html         |  2 +-
 .../searchUtils/dateFilter.component.ts       | 61 +++++++++----------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html
index 7aaf282f..dd27b089 100644
--- a/searchPages/searchUtils/advancedSearchForm.component.html
+++ b/searchPages/searchUtils/advancedSearchForm.component.html
@@ -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>
diff --git a/searchPages/searchUtils/dateFilter.component.ts b/searchPages/searchUtils/dateFilter.component.ts
index 7c595ba9..7dec2a2c 100644
--- a/searchPages/searchUtils/dateFilter.component.ts
+++ b/searchPages/searchUtils/dateFilter.component.ts
@@ -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>
     `
 
 })