diff options
Diffstat (limited to 'uploader/static')
| -rw-r--r-- | uploader/static/css/layout-common.css | 3 | ||||
| -rw-r--r-- | uploader/static/css/layout-large.css | 62 | ||||
| -rw-r--r-- | uploader/static/css/layout-medium.css | 64 | ||||
| -rw-r--r-- | uploader/static/css/layout-small.css | 60 | ||||
| -rw-r--r-- | uploader/static/css/theme.css | 90 | ||||
| -rw-r--r-- | uploader/static/js/populations.js | 17 | ||||
| -rw-r--r-- | uploader/static/js/pubmed.js | 2 | ||||
| -rw-r--r-- | uploader/static/js/species.js | 16 | ||||
| -rw-r--r-- | uploader/static/js/upload_samples.js | 24 | ||||
| -rw-r--r-- | uploader/static/js/urls.js | 26 |
10 files changed, 349 insertions, 15 deletions
diff --git a/uploader/static/css/layout-common.css b/uploader/static/css/layout-common.css new file mode 100644 index 0000000..36a5735 --- /dev/null +++ b/uploader/static/css/layout-common.css @@ -0,0 +1,3 @@ +* { + box-sizing: border-box; +} diff --git a/uploader/static/css/layout-large.css b/uploader/static/css/layout-large.css new file mode 100644 index 0000000..8abd2dd --- /dev/null +++ b/uploader/static/css/layout-large.css @@ -0,0 +1,62 @@ +@media screen and (min-width: 20.1in) { + body { + display: grid; + grid-template-columns: 7fr 3fr; + grid-gap: 1em; + } + + #header { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 8fr 2fr; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; + } + + #main { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 7fr 3fr; + grid-gap: 1.5em; + } + + #main #breadcrumbs { + grid-column-start: 1; + grid-column-end: 3; + padding: 0 3px; + } + + #main #main-content { + max-width: 950px; + + grid-column-start: 1; + grid-column-end: 2; + } + + #main #sidebar-content { + grid-column-start: 2; + grid-column-end: 3; + padding: 1em 0 0 0; + } +} diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css new file mode 100644 index 0000000..2cca711 --- /dev/null +++ b/uploader/static/css/layout-medium.css @@ -0,0 +1,64 @@ +@media screen and (width > 8in) and (max-width: 20in) { + body { + display: grid; + grid-template-columns: 65fr 35fr; + grid-gap: 1em; + } + + #header { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 8fr 2fr; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; + } + + #main { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 7fr 3fr; + grid-gap: 5px; + } + + #main #breadcrumbs { + grid-column-start: 1; + grid-column-end: 3; + padding: 0 3px; + } + + #main #main-content { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + grid-gap: 5px; + + /* Define layout for the children elements */ + max-width: 100%; + } + + #main #sidebar-content { + grid-column-start: 2; + grid-column-end: 3; + } +} diff --git a/uploader/static/css/layout-small.css b/uploader/static/css/layout-small.css new file mode 100644 index 0000000..80a3759 --- /dev/null +++ b/uploader/static/css/layout-small.css @@ -0,0 +1,60 @@ +@media screen and (max-width: 8in) { + body { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 7fr; + grid-gap: 1em; + } + + #header { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 1fr; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + } + + #main { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + display: grid; + + /* Define layout for the children elements */ + grid-template-rows: 1.5em 80% 20%; + grid-template-columns: 1fr; + } + + #main #breadcrumbs { + grid-row-start: 1; + grid-row-end: 2; + + } + + #main #main-content { + grid-row-start: 2; + grid-row-end: 3; + } + + #main #sidebar-content { + grid-row-start: 3; + grid-row-end: 4; + } +} diff --git a/uploader/static/css/theme.css b/uploader/static/css/theme.css new file mode 100644 index 0000000..bdac745 --- /dev/null +++ b/uploader/static/css/theme.css @@ -0,0 +1,90 @@ +body { + margin: 0.7em; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-size: 20px; +} + +#header { + background-color: #336699; + color: #FFFFFF; + border-radius: 3px; + min-height: 30px; +} + +#header #header-nav .nav li a { + /* Content styling */ + color: #FFFFFF; + background: #4477AA; + border: solid 5px #336699; + border-radius: 5px; + font-size: 0.7em; + text-align: center; + padding: 1px 7px; +} + +#main #breadcrumbs { + border-radius:3px; + text-align: center; +} + +#main #main-content { + border-radius: 5px; + padding: 0 5px; +} + +#main #sidebar-content { + background: #EEEEEE; + + border-radius: 5px; + padding: 10px 5px; +} + +#main .row { + margin: 0 2px; +} + + +.heading { + border-bottom: solid #EEBB88; + text-transform: capitalize; +} + +.subheading { + padding: 1em 0 0.1em 0.5em; + border-bottom: solid #88BBEE; + text-transform: capitalize; +} + +label { + text-transform: Capitalize; +} + +input[type="search"] { + border-radius: 5px; +} + +.btn { + text-transform: Capitalize; +} + +table.dataTable thead th, table.dataTable tfoot th{ + border-right: 1px solid white; + color: white; + background-color: #369 !important; +} + +table.dataTable tbody tr.selected td { + background-color: #ffee99 !important; +} + +.form-group { + margin-bottom: 2em; + padding-bottom: 0.2em; + border-bottom: solid gray 1px; +} + + +.breadcrumb-item { + text-transform: Capitalize; +} diff --git a/uploader/static/js/populations.js b/uploader/static/js/populations.js index be1231f..111ebb7 100644 --- a/uploader/static/js/populations.js +++ b/uploader/static/js/populations.js @@ -13,9 +13,24 @@ $(() => { } }, { + searchable: true, data: (apopulation) => { return `${apopulation.FullName} (${apopulation.InbredSetName})`; } } - ]); + ], + { + select: "single", + paging: true, + scrollY: 500, + deferRender: true, + scroller: true, + scrollCollapse: true, + layout: { + topStart: "info", + topEnd: "search", + bottomStart: "pageLength", + bottomEnd: false + } + }); }); diff --git a/uploader/static/js/pubmed.js b/uploader/static/js/pubmed.js index 9afd4c3..f425f49 100644 --- a/uploader/static/js/pubmed.js +++ b/uploader/static/js/pubmed.js @@ -22,7 +22,7 @@ var extract_details = (pubmed_id, details) => { "journal": details[pubmed_id].fulljournalname, "volume": details[pubmed_id].volume, "pages": details[pubmed_id].pages, - "month": _date.length > 1 ? months[_date[1].toLowerCase()] : "jan", + "month": _date.length > 1 ? (months[_date[1].toLowerCase()] || "January") : "January", "year": _date[0], }; }; diff --git a/uploader/static/js/species.js b/uploader/static/js/species.js index 9ea3017..fb0d2d2 100644 --- a/uploader/static/js/species.js +++ b/uploader/static/js/species.js @@ -16,5 +16,19 @@ $(() => { return `${aspecies.FullName} (${aspecies.SpeciesName})`; } } - ]); + ], + { + select: "single", + paging: true, + scrollY: 500, + deferRender: true, + scroller: true, + scrollCollapse: true, + layout: { + topStart: "info", + topEnd: "search", + bottomStart: "pageLength", + bottomEnd: false + } + }); }); diff --git a/uploader/static/js/upload_samples.js b/uploader/static/js/upload_samples.js index aed536f..1c25a1d 100644 --- a/uploader/static/js/upload_samples.js +++ b/uploader/static/js/upload_samples.js @@ -87,20 +87,20 @@ function display_preview(event) { var data_preview_table = document.getElementById("tbl:samples-preview"); remove_rows(data_preview_table); - var separator = document.getElementById("select:separator").value; + var separator = document.getElementById("select-separator").value; if(separator === "other") { - separator = document.getElementById("txt:separator").value; + separator = document.getElementById("txt-separator").value; } if(separator == "") { display_error_row(data_preview_table, "Please provide a separator."); return false; } - var delimiter = document.getElementById("txt:delimiter").value; + var delimiter = document.getElementById("txt-delimiter").value; - var firstlineheading = document.getElementById("chk:heading").checked; + var firstlineheading = document.getElementById("chk-heading").checked; - var fileelement = document.getElementById("file:samples"); + var fileelement = document.getElementById("file-samples"); var preview_data = JSON.parse( fileelement.getAttribute("data-preview-content") || "[]"); if(preview_data.length == 0) { @@ -115,18 +115,18 @@ function display_preview(event) { delimiter)); } -document.getElementById("chk:heading").addEventListener( +document.getElementById("chk-heading").addEventListener( "change", display_preview); -document.getElementById("select:separator").addEventListener( +document.getElementById("select-separator").addEventListener( "change", display_preview); -document.getElementById("txt:separator").addEventListener( +document.getElementById("txt-separator").addEventListener( "keyup", display_preview); -document.getElementById("txt:delimiter").addEventListener( +document.getElementById("txt-delimiter").addEventListener( "keyup", display_preview); -document.getElementById("file:samples").addEventListener( +document.getElementById("file-samples").addEventListener( "change", (event) => { read_first_n_lines(event, - document.getElementById("file:samples"), + document.getElementById("file-samples"), 30, - document.getElementById("chk:heading").checked); + document.getElementById("chk-heading").checked); }); diff --git a/uploader/static/js/urls.js b/uploader/static/js/urls.js new file mode 100644 index 0000000..e3fb7c6 --- /dev/null +++ b/uploader/static/js/urls.js @@ -0,0 +1,26 @@ +function baseURL() { + return new URL(`${window.location.protocol}//${window.location.host}`); +}; + +function buildURLFromCurrentURL(pathname, searchParams = new URLSearchParams()) { + var uri = baseURL(); + uri.pathname=pathname; + var _search = new URLSearchParams(window.location.search); + searchParams.forEach(function(value, key) { + _search.set(key, value); + }); + uri.search = _search.toString(); + return uri +}; + +function deleteSearchParams(url, listOfParams = []) { + _params = new URLSearchParams(url.search); + listOfParams.forEach(function(paramName) { + _params.delete(paramName); + }); + + + newUrl = new URL(url.toString()); + newUrl.search = _params.toString(); + return newUrl; +} |
