diff --git a/pdb-ui/src/main/resources/resources/css/design.css b/pdb-ui/src/main/resources/resources/css/design.css index 536deed..28731b1 100644 --- a/pdb-ui/src/main/resources/resources/css/design.css +++ b/pdb-ui/src/main/resources/resources/css/design.css @@ -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 { diff --git a/pdb-ui/src/main/resources/resources/index.html b/pdb-ui/src/main/resources/resources/index.html index 2f67f4f..db90446 100644 --- a/pdb-ui/src/main/resources/resources/index.html +++ b/pdb-ui/src/main/resources/resources/index.html @@ -11,35 +11,33 @@ -
-
- -
- -
+
+ +
+ +
\ No newline at end of file diff --git a/pdb-ui/src/main/resources/resources/js/search.js b/pdb-ui/src/main/resources/resources/js/search.js index 11eb2f0..a91c156 100644 --- a/pdb-ui/src/main/resources/resources/js/search.js +++ b/pdb-ui/src/main/resources/resources/js/search.js @@ -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 = {};