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

add left/right panel to visualization page

Browse Source
This commit is contained in:
Andreas Huber
2019-10-09 16:47:19 +02:00
parent 8b42476b72
commit 1afcc7cf38
3 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pdb-js/src/app/app.component.scss
View File

@@ -5,7 +5,7 @@
width: 100%; width: 100%;
padding-bottom: 0.5em; padding-bottom: 0.5em;
border-bottom: solid 1px black; border-bottom: solid 1px black;
background-color: #eee; background-color: #ccc;
} }
.right{ .right{

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

@@ -2,4 +2,9 @@
</style> </style>
visualization-page works! <div id="visualization">
<div id="filters">
filters
</div>
<div id="results"></div>
</div>

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

@@ -1,16 +1,39 @@
:host{ :host{
font-weight: bold; font-weight: bold;
width: 100%; width: 100%;
height: 100%; height: calc(100% - 29px);
position: absolute; position: absolute;
display: grid;
} }
@media screen { @media screen {
* { #visualization {
background-color: #aaa; display: grid;
height: 100%;
margin: 0;
grid:
"filters results" 1fr
/ minmax(200px, 1fr) 3fr;
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#visualization {
display: grid;
height: 100%;
margin: 0;
grid:
"filters" auto
"results" 1fr
/ 1fr;
}
}
#filters {
grid-area: filters;
background-color: #eee;
}
#results {
grid-area: results;
} }