andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

improve styling of filter panel

Browse Source 
Adapt width so that the date range fits.
Width of form fields is now 100%.
y-range restrictions are now rendered in one line.
This commit is contained in:
Andreas Huber
2019-10-12 09:06:19 +02:00
parent 708a85c28c
commit 2825654b7a
5 changed files with 32 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -2,19 +2,19 @@
</style> </style>
<div id="visualization"> <div id="visualization">
<div id="query-box"> <div id="query-box">
<input matInput placeholder="Query" value="{{query}}" /> <input matInput placeholder="Query" value="{{query}}" />
<pdb-query-autocomplete></pdb-query-autocomplete>
</div> </div>
<div id="filters"> <div id="filters">
<mat-form-field class="mat-field-full-width">
<mat-form-field>
<mat-label>Date Range:</mat-label> <mat-label>Date Range:</mat-label>
<input matInput [formControl]="dateRange" name="dates" /> <input matInput [formControl]="dateRange" name="dates" />
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field class="mat-field-full-width">
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select [formControl]="selectedPlotType"> <mat-select [formControl]="selectedPlotType">
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name"> <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" /> <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot Plot
</button> </button>
<!-- <!--
<button mat-button (click)="gallery()"> <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)" /> <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> </div>
<div id="results"></div> <div id="results"></div>
</div>
</div>

8
pdb-js/src/app/visualization-page/visualization-page.component.scss
View File

@@ -14,7 +14,7 @@
grid: grid:
"query-box query-box" auto "query-box query-box" auto
"filters results" 1fr "filters results" 1fr
/ minmax(200px, 1fr) 3fr; / 23em 3fr;
} }
} }
@@ -40,9 +40,11 @@
#filters { #filters {
grid-area: filters; grid-area: filters;
background-color: #eee; background-color: #eee;
padding-left: 1em; padding: 1em;
} }
#results { #results {
grid-area: results; grid-area: results;
} }

3
pdb-js/src/app/y-axis-range/y-axis-range.component.html
View File

@@ -4,7 +4,8 @@
<mat-form-field> <mat-form-field>
<input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}"> <input matInput type="number" placeholder="Max Y-Value" min="0" value="{{maxYValue}}">
</mat-form-field> </mat-form-field>
<mat-form-field> <mat-form-field class="yAxisUnit">
<mat-label>Unit:</mat-label>
<mat-select [(value)]="yAxisUnit"> <mat-select [(value)]="yAxisUnit">
<mat-option value="AUTOMATIC">automatic</mat-option> <mat-option value="AUTOMATIC">automatic</mat-option>
<mat-option value="MILLISECONDS">milli seconds</mat-option> <mat-option value="MILLISECONDS">milli seconds</mat-option>

9
pdb-js/src/app/y-axis-range/y-axis-range.component.scss
View File

@@ -0,0 +1,9 @@
mat-form-field {
width: 5em;
margin-right: 1ex;
}
.yAxisUnit{
width: 8em;
margin-right: 0;
}

8
pdb-js/src/styles.scss
View File

@@ -70,3 +70,11 @@ a.external-link:after {
body .mat-select-panel { body .mat-select-panel {
max-height: 500px; max-height: 500px;
} }
.mat-form-field {
font-family: Arial, sans-serif;
}
mat-form-field {
width: 100%;
}