From 2825654b7a6938020a8319ebfdbf7657879f3522 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sat, 12 Oct 2019 09:06:19 +0200
Subject: [PATCH] improve styling of filter panel

Adapt width so that the date range fits.
Width of form fields is now 100%.
y-range restrictions are now rendered in one line.
---
 .../visualization-page.component.html              | 14 ++++++++------
 .../visualization-page.component.scss              |  8 +++++---
 .../app/y-axis-range/y-axis-range.component.html   |  3 ++-
 .../app/y-axis-range/y-axis-range.component.scss   |  9 +++++++++
 pdb-js/src/styles.scss                             |  8 ++++++++
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index d646021..b03fb7e 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -2,19 +2,19 @@
 
 </style>
 
+
 <div id="visualization">
   <div id="query-box">
       <input matInput placeholder="Query" value="{{query}}" />
+      <pdb-query-autocomplete></pdb-query-autocomplete>
   </div>
   <div id="filters">
-    
-    
-    <mat-form-field>
+    <mat-form-field class="mat-field-full-width">
       <mat-label>Date Range:</mat-label>
       <input matInput [formControl]="dateRange" name="dates" />
     </mat-form-field>
   
-    <mat-form-field>
+    <mat-form-field class="mat-field-full-width">
       <mat-label>Type:</mat-label>
       <mat-select [formControl]="selectedPlotType">
         <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
@@ -68,7 +68,6 @@
         <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
         Plot
       </button>
-    
       <!--
       <button mat-button (click)="gallery()">
         <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
@@ -79,4 +78,7 @@
     </div>
   </div>
   <div id="results"></div>
-</div>
\ No newline at end of file
+  
+</div>
+
+
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
index d07161c..fc2dcb7 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -14,7 +14,7 @@
     grid:
       "query-box query-box" auto
       "filters results" 1fr
-      / minmax(200px, 1fr) 3fr;
+      / 23em 3fr;
   }
 }
 
@@ -40,9 +40,11 @@
 #filters {
   grid-area: filters;
   background-color: #eee;
-  padding-left: 1em;
+  padding: 1em;
 }
 
 #results {
   grid-area: results;
-}
\ No newline at end of file
+}
+
+
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.html b/pdb-js/src/app/y-axis-range/y-axis-range.component.html
index 91272a0..49ecc9b 100644
--- a/pdb-js/src/app/y-axis-range/y-axis-range.component.html
+++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.html
@@ -4,7 +4,8 @@
 <mat-form-field>
   <input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
 </mat-form-field>
- <mat-form-field>
+ <mat-form-field class="yAxisUnit">
+  <mat-label>Unit:</mat-label>
   <mat-select [(value)]="yAxisUnit">
     <mat-option value="AUTOMATIC">automatic</mat-option>
     <mat-option value="MILLISECONDS">milli seconds</mat-option>
diff --git a/pdb-js/src/app/y-axis-range/y-axis-range.component.scss b/pdb-js/src/app/y-axis-range/y-axis-range.component.scss
index e69de29..6b22302 100644
--- a/pdb-js/src/app/y-axis-range/y-axis-range.component.scss
+++ b/pdb-js/src/app/y-axis-range/y-axis-range.component.scss
@@ -0,0 +1,9 @@
+mat-form-field {
+  width: 5em;
+  margin-right: 1ex;
+}
+
+.yAxisUnit{
+  width: 8em;
+  margin-right: 0;
+}
\ No newline at end of file
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 297b48f..e46fc26 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -70,3 +70,11 @@ a.external-link:after {
 body .mat-select-panel {
   max-height: 500px;
 }
+
+.mat-form-field {
+  font-family: Arial, sans-serif;
+}
+
+mat-form-field {
+  width: 100%;
+}