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

replace flex boxes with new grids

Browse Source
This commit is contained in:
Andreas Huber
2017-03-17 13:13:12 +01:00
parent 3456177291
commit 182a907466
3 changed files with 67 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -13,19 +13,30 @@ html, body {
font-style: normal;
}
#content{
display: flex;
flex-flow: column;
height: 100%;
body{
display: grid;
height: 100vh;
margin: 0;
grid:
"head" 2em
"search" auto
"result" 1fr
/ 1fr;
/*
align-content: space-evenly;
justify-content: center;
grid-auto-columns: 25%;
grid-gap: 1em .5em;
grid-auto-flow: column;
/**/
}
#top-menu-bar {
grid-area: head;
background-color: black;
color: white;
padding: 3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
#logo {
@@ -34,11 +45,9 @@ html, body {
}
#search-bar {
grid-area: search;
background-color: #aaa;
padding-bottom:3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
#search-bar .autocomplete .active {
@@ -53,6 +62,14 @@ html, body {
box-sizing: border-box;
}
#search-bar #search-limit-value {
width: 4em;
}
.input_date {
width: 10ex;
}
#filter-bar {
}
@@ -75,13 +92,11 @@ html, body {
}
#result-view {
grid-area: result;
background: #eee;
bottom: 0;
left:0;
right: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
#result-view i {

54
pdb-ui/src/main/resources/resources/index.html
View File

@@ -11,35 +11,33 @@
<link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
</head>
<body>
<div id="content">
<div id="top-menu-bar">
<div id="logo">LOGO</div>
</div>
<div id="search-bar">
<div id="search-input-wrapper">
<input id="search-input" data-autocomplete="autocomplete"
data-autocomplete-empty-message="nothing found" />
</div>
<label for="search-group-by">Group By:</label> <select id="search-group-by"></select>
<label for="search-limit-by">Limit By:</label>
<select id="search-limit-by">
<option value="NO_LIMIT" selected="selected">no limit</option>
<option value="MOST_VALUES">most values</option>
<option value="FEWEST_VALUES">fewest values</option>
</select>
<input type="number" id="search-limit-value" name="search-limit-value" min="1" max="1000000" value="10" style="display: none;"/>
<label>From Date:</label>
<input id="search-date-from" type="date">
<label>To Date:</label>
<input id="search-date-to" type="date">
<button id="search-submit"><i class="fa fa-area-chart"> Plot</i></button>
</div>
<div id="result-view">
<div id="top-menu-bar">
<div id="logo">LOGO</div>
</div>
<div id="search-bar">
<div id="search-input-wrapper">
<input id="search-input" data-autocomplete="autocomplete"
data-autocomplete-empty-message="nothing found" />
</div>
<label for="search-group-by">Group By:</label> <select id="search-group-by"></select>
<label for="search-limit-by">Limit By:</label>
<select id="search-limit-by">
<option value="NO_LIMIT" selected="selected">no limit</option>
<option value="MOST_VALUES">most values</option>
<option value="FEWEST_VALUES">fewest values</option>
</select>
<input type="number" id="search-limit-value" name="search-limit-value" min="1" max="1000" value="10"/>
<label for="search-date-from">From Date:</label>
<input id="search-date-from" class="input_date" type="date">
<label for="search-date-to">To Date:</label>
<input id="search-date-to" class="input_date" type="date">
<button id="search-submit"><i class="fa fa-area-chart"> Plot</i></button>
</div>
<div id="result-view">
</div>
</body>
</html>

23
pdb-ui/src/main/resources/resources/js/search.js
View File

@@ -4,17 +4,9 @@ $(document).ready(function(){
$('#search-submit').click(plot);
renderGroupBy();
updateSearchLimitValue();
$('#search-limit-by').change(function () {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val();
if (valueSelected == "NO_LIMIT"){
$('#search-limit-value').hide();
}else{
$('#search-limit-value').show();
}
});
$('#search-limit-by').change(updateSearchLimitValue);
AutoComplete({
HttpMethod: "GET",
@@ -43,6 +35,17 @@ $(document).ready(function(){
});
});
function updateSearchLimitValue () {
var optionSelected = $('#search-limit-by').find("option:selected");
var valueSelected = optionSelected.val();
if (valueSelected == "NO_LIMIT"){
$('#search-limit-value').hide();
}else{
$('#search-limit-value').show();
}
}
function renderGroupBy()
{
var request = {};