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; font-style: normal;
} }
#content{ body{
display: flex; display: grid;
flex-flow: column; height: 100vh;
height: 100%; 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 { #top-menu-bar {
grid-area: head;
background-color: black; background-color: black;
color: white; color: white;
padding: 3px; padding: 3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
} }
#logo { #logo {
@@ -34,11 +45,9 @@ html, body {
} }
#search-bar { #search-bar {
grid-area: search;
background-color: #aaa; background-color: #aaa;
padding-bottom:3px; padding-bottom:3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
} }
#search-bar .autocomplete .active { #search-bar .autocomplete .active {
@@ -53,6 +62,14 @@ html, body {
box-sizing: border-box; box-sizing: border-box;
} }
#search-bar #search-limit-value {
width: 4em;
}
.input_date {
width: 10ex;
}
#filter-bar { #filter-bar {
} }
@@ -75,13 +92,11 @@ html, body {
} }
#result-view { #result-view {
grid-area: result;
background: #eee; background: #eee;
bottom: 0; bottom: 0;
left:0; left:0;
right: 0; right: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
} }
#result-view i { #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"> <link rel="stylesheet" type="text/css" href="css/autocomplete.min.css">
</head> </head>
<body> <body>
<div id="content"> <div id="top-menu-bar">
<div id="top-menu-bar"> <div id="logo">LOGO</div>
<div id="logo">LOGO</div> </div>
</div> <div id="search-bar">
<div id="search-bar"> <div id="search-input-wrapper">
<div id="search-input-wrapper"> <input id="search-input" data-autocomplete="autocomplete"
<input id="search-input" data-autocomplete="autocomplete" data-autocomplete-empty-message="nothing found" />
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> </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> </div>
</body> </body>
</html> </html>

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

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