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

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

@@ -12,9 +12,9 @@
height: 100%;
margin: 0;
grid:
"query-box query-box" auto
"filters results" 1fr
/ 24em 3fr;
"query-box query-box date-box" auto
"filters results results" 1fr
/ 19.7em 3fr 21em;
}
}
@@ -24,6 +24,7 @@
margin: 0;
grid:
"query-box" auto
"date-box" auto
"filters" auto
"results" 1fr
/ 1fr;
@@ -35,7 +36,12 @@
#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 {
@@ -43,15 +49,15 @@
}
#filterpanel {
background-color: #f8f8f8;/*#fafafa;*/
padding: 1em;
margin: 0 1em 1em 1em;
padding: 0.5em;
margin: 0 0.5em 0.5em 0.5em;
border-radius: 5px;
}
#results {
grid-area: results;
overflow: hidden;
margin-right: 1em;
margin-right: 0.5em;
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-select [(value)]="yAxisUnit">
<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="MINUTES">minutes</mat-option>
<mat-option value="HOURS">hours</mat-option>
@@ -11,9 +11,9 @@
</mat-select>
</mat-form-field>
<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 *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>
</div>