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

make filter panel thinner

Browse Source 
Making the filter panel thinner by 18%. To do this
we moved the date range next to the query box.
The thinner filter box gives us more width for the plot.
This commit is contained in:
Andreas Huber
2019-11-01 09:45:52 +01:00
parent 78f9f3fe16
commit 7e1349b25a
4 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,13 +2,18 @@
<div id="query-box"> <div id="query-box">
<pdb-query-autocomplete #query></pdb-query-autocomplete> <pdb-query-autocomplete #query></pdb-query-autocomplete>
</div> </div>
<div id="filters">
<div id="filterpanel"> <div id="date-box">
<mat-form-field class="mat-field-full-width"> <mat-form-field class="mat-field-full-width">
<mat-label>Date Range:</mat-label> <mat-label>Date Range:</mat-label>
<input matInput id="search-date-range" value="dateRange" name="dates" (input)="changeDate($event)" /> <input matInput id="search-date-range" value="dateRange" name="dates" (input)="changeDate($event)" />
<input type="hidden" id="hidden-search-date-range" [(ngModel)]="hiddenSearchDateRange" /> <input type="hidden" id="hidden-search-date-range" [(ngModel)]="hiddenSearchDateRange" />
</mat-form-field> </mat-form-field>
</div>
<div id="filters">
<div id="filterpanel">
<mat-form-field class="mat-field-full-width"> <mat-form-field class="mat-field-full-width">
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>

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

@@ -12,9 +12,9 @@
height: 100%; height: 100%;
margin: 0; margin: 0;
grid: grid:
"query-box query-box" auto "query-box query-box date-box" auto
"filters results" 1fr "filters results results" 1fr
/ 24em 3fr; / 19.7em 3fr 21em;
} }
} }
@@ -24,6 +24,7 @@
margin: 0; margin: 0;
grid: grid:
"query-box" auto "query-box" auto
"date-box" auto
"filters" auto "filters" auto
"results" 1fr "results" 1fr
/ 1fr; / 1fr;
@@ -35,7 +36,12 @@
#query-box { #query-box {
grid-area: query-box; grid-area: query-box;
margin: 1em; margin: 1em 0.5em 0.5em 0.5em;
}
#date-box{
grid-area: date-box;
margin-right: 1em;
} }
#filters { #filters {
@@ -43,15 +49,15 @@
} }
#filterpanel { #filterpanel {
background-color: #f8f8f8;/*#fafafa;*/ background-color: #f8f8f8;/*#fafafa;*/
padding: 1em; padding: 0.5em;
margin: 0 1em 1em 1em; margin: 0 0.5em 0.5em 0.5em;
border-radius: 5px; border-radius: 5px;
} }
#results { #results {
grid-area: results; grid-area: results;
overflow: hidden; overflow: hidden;
margin-right: 1em; margin-right: 0.5em;
position:relative; /* ??? */ position:relative; /* ??? */
} }

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

@@ -3,7 +3,7 @@
<mat-label>Y-Axis Range:</mat-label> <mat-label>Y-Axis Range:</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">millis</mat-option>
<mat-option value="SECONDS">seconds</mat-option> <mat-option value="SECONDS">seconds</mat-option>
<mat-option value="MINUTES">minutes</mat-option> <mat-option value="MINUTES">minutes</mat-option>
<mat-option value="HOURS">hours</mat-option> <mat-option value="HOURS">hours</mat-option>
@@ -11,9 +11,9 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number"> <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number">
<input matInput type="number" placeholder="Min Y-Value" min="0" [(ngModel)]="minYValue"> <input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number"> <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC'" class="pdb-form-number">
<input matInput type="number" placeholder="Max Y-Value" min="0" [(ngModel)]="maxYValue"> <input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
</mat-form-field> </mat-form-field>
</div> </div>

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

@@ -81,16 +81,16 @@ body .mat-select-panel, body .mat-autocomplete-panel {
mat-form-field { mat-form-field {
width: 100%; width: 100%;
margin-right: 1em; margin-right: 1ex;
} }
mat-form-field:last-child { mat-form-field:last-child {
margin-right: 0ex; margin-right: 0ex;
} }
mat-form-field.pdb-form-number { mat-form-field.pdb-form-number {
width: 5em; width: 3.5em;
} }
mat-form-field.pdb-form-mid { mat-form-field.pdb-form-mid {
width: 8em; width: 7.5em;
} }