From 02752704ef52bb2c2068e8586c9d4062a7fdcadd Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sat, 25 Apr 2020 19:34:55 +0300 Subject: Put CSS code into it's own separate CSS file --- bh20simplewebuploader/static/main.css | 155 ++++++++++++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 bh20simplewebuploader/static/main.css (limited to 'bh20simplewebuploader/static/main.css') diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css new file mode 100644 index 0000000..30b1d04 --- /dev/null +++ b/bh20simplewebuploader/static/main.css @@ -0,0 +1,155 @@ +hr { + margin: auto 0; +} + +body { + color: #101010; + background-color: #F9EDE1; + margin: 0; +} + +h1, h2, h3, h4 { + font-family: 'Roboto Slab', serif; + color: darkblue; +} + +h1 { + text-align: center; +} + +p { + color: #505050; + font-style: italic; +} +.header { + background-color: white; + margin: 0 auto; + padding: 20px; + text-align: center; + height: 150px; +} + +.logo { + float: right; +} + +p, form, .about, .footer { + font-family: 'Raleway', sans-serif; + line-height: 1.5; +} + +form h4 { + text-transform: 'uppercase'; +} + +.intro, form { + padding: 20px; +} + +.intro { + background-color: lightgrey; + margin: 0 auto; + padding: 20px; +} + +.about { + background-color: lightgrey; + margin: 0 auto; + padding: 20px; +} +.footer { + background-color: white; + margin: 0 auto; +} + +span.dropt {border-bottom: thin dotted; background: #ffeedd;} +span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } + +.grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: auto; + row-gap:5px; + grid-template-areas: + "a a b b" + "a a c c" + "a a d d" + "e e e e" + "f f f f"; + grid-auto-flow: column; +} + +.intro { + grid-area: a; +} + +.fasta-file-select { + padding: 1em; + grid-area: b; +} + +.metadata { + padding: 1em; + grid-area: c; +} +.metadata_upload_form { + padding: 1em; + grid-area: c; +} + +#metadata_upload_form_spot { + grid-area: d; +} + +#metadata_fill_form_spot { + grid-area: e; +} + +#metadata_fill_form { + column-count: 4; + margin-top: 0.5em; + column-width: 250px; +} + +.record { + display: flex; + flex-direction: column; + border: solid 1px #808080; + padding: 1em; + background: #F8F8F8; + margin-bottom: 1em; + -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ + page-break-inside: avoid; /* Firefox */ + break-inside: avoid; +} + +.record label { + font-size: small; + margin-top: 10px; +} + +.submit { + grid-area: f; + width: 17em; + justify-self: center; +} + +footer { + display: block; + width: 100%; +} + +.sponsors { + width: inherit; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +@media only screen and (max-device-width: 480px) { + .grid-container { + display: flex; + flex-direction: column; + } +} -- cgit v1.2.3 From 03cbed808805ccdbff639eaa67e8f8b26c7275b3 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sat, 25 Apr 2020 22:52:54 +0300 Subject: Remove unnecessary JS --- bh20simplewebuploader/static/main.css | 11 +++++++ bh20simplewebuploader/static/main.js | 50 +++++++++++-------------------- bh20simplewebuploader/templates/form.html | 25 ++++++++-------- 3 files changed, 41 insertions(+), 45 deletions(-) (limited to 'bh20simplewebuploader/static/main.css') diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 30b1d04..609ae19 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -147,6 +147,17 @@ footer { justify-content: space-around; } +.metadata input#metadata_upload:checked ~ #metadata_upload_form_spot { + display: block; +} + +.metadata input#metadata_upload ~ #metadata_upload_form_spot { + display: none; +} + +.invisible { + display: none; +} @media only screen and (max-device-width: 480px) { .grid-container { display: flex; diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js index ab810cd..e8d4776 100644 --- a/bh20simplewebuploader/static/main.js +++ b/bh20simplewebuploader/static/main.js @@ -1,37 +1,21 @@ -let r = new XMLHttpRequest(); -let test; -r.open("GET", scriptRoot + "/api/getAllaccessions", true); -r.onreadystatechange = function () { - if (r.readyState != 4 || r.status != 200) return; - test = r.responseText; - console.log(JSON.parse(test)); -}; -r.send(); -let uploadForm = document.getElementById('metadata_upload_form') -let uploadFormSpot = document.getElementById('metadata_upload_form_spot') -let fillForm = document.getElementById('metadata_fill_form') -let fillFormSpot = document.getElementById('metadata_fill_form_spot') +fetch(scriptRoot + "/api/getAllaccessions") + .then(response => { + return response.json(); + }) + .then(data => { + console.log('test'); + console.log(data); + }) -function setUploadMode() { - // Make the upload form the one in use - uploadFormSpot.appendChild(uploadForm) - fillFormSpot.removeChild(fillForm) -} - -function setFillMode() { - // Make the fillable form the one in use - uploadFormSpot.removeChild(uploadForm) - fillFormSpot.appendChild(fillForm) -} - -function setMode() { - // Pick mode based on radio - if (document.getElementById('metadata_upload').checked) { - setUploadMode() +/** + * Show form if checked + */ +let fillFormSpot = document.getElementById('metadata_fill_form_spot'); +function displayForm() { + if (document.getElementById('metadata_form').checked) { + fillFormSpot.classList.remove("invisible"); } else { - setFillMode() + fillFormSpot.classList.add("invisible"); + console.log("visible"); } } - -// Start in mode appropriate to selected form item -setMode() diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index 7b1fd98..ea3caab 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -46,16 +46,16 @@
+