aboutsummaryrefslogtreecommitdiff
path: root/bh20simplewebuploader/static
diff options
context:
space:
mode:
authorPjotr Prins2020-05-06 09:03:08 -0500
committerPjotr Prins2020-05-06 09:03:08 -0500
commit0031e778ee1ad8b934411da5082fcb3115646e67 (patch)
treebe17fb9aff6351e967a9210cd4c58a60ad55a382 /bh20simplewebuploader/static
parent7d7af6cde75d09da7a05cf5bc05ef2556c3aea92 (diff)
parentb6d846b5de6c67b28adab1fa520953115a1a1e30 (diff)
downloadbh20-seq-resource-0031e778ee1ad8b934411da5082fcb3115646e67.tar.gz
bh20-seq-resource-0031e778ee1ad8b934411da5082fcb3115646e67.tar.lz
bh20-seq-resource-0031e778ee1ad8b934411da5082fcb3115646e67.zip
Merge branch 'master' of github.com:arvados/bh20-seq-resource
Diffstat (limited to 'bh20simplewebuploader/static')
-rw-r--r--bh20simplewebuploader/static/main.css269
-rw-r--r--bh20simplewebuploader/static/main.js47
2 files changed, 316 insertions, 0 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
new file mode 100644
index 0000000..57e29ef
--- /dev/null
+++ b/bh20simplewebuploader/static/main.css
@@ -0,0 +1,269 @@
+hr {
+ margin: auto 0;
+}
+
+body {
+ color: #101010;
+ background-color: #F5FFFF;
+ margin: 0;
+}
+
+h1, h2, h3, h4 {
+ font-family: 'Inter', sans-serif;
+ color: #0ED1CD;
+}
+
+h1 {
+ text-align: center;
+}
+
+.intro {
+ color: #505050;
+ font-weight: 300;
+}
+
+.header {
+ background-color: white;
+ margin: 0 auto;
+ padding: 20px;
+ text-align: center;
+ height: 150px;
+}
+
+h2 > svg {
+ position: relative;
+ top: 8px;
+}
+
+.logo {
+ float: right;
+}
+
+p, form, .about, .footer {
+ font-family: 'Inter', sans-serif;
+ line-height: 1.5;
+}
+
+form h4 {
+ text-transform: 'uppercase';
+}
+
+.intro, form, .search {
+ padding: 20px;
+}
+
+.intro {
+ background-color: inherit;
+ margin: 0 auto;
+ padding: 20px;
+}
+
+.about {
+ background-color: #B2F8F8;
+ margin: 30px auto;
+ padding: 20px;
+ width: 95%;
+ border-radius: 20px;
+}
+
+.button {
+ border-radius: 5px;
+ background: #0ED1CD;
+ margin: 0.3em auto;
+ padding: 0.4em;
+}
+
+.footer {
+ background: #058280;;
+ margin: 0 auto;
+ color: #fff;
+}
+
+.footer a {
+ color: #fff;
+}
+
+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;
+}
+
+.about {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-auto-flow: row;
+}
+
+.about h1 {
+ text-align: left;
+}
+
+.about p {
+ font-weight: 300;
+ color: #505050;
+}
+
+.intro {
+ grid-area: a;
+}
+
+.fasta-file-select {
+ padding: 1em;
+ grid-area: b;
+}
+
+a {
+ color: #40DBD8;
+ font-weight: 700;
+}
+
+.fasta-file-select label, .metadata label {
+ font-weight: 600;
+}
+
+.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;
+}
+
+pre code {
+ background-color: #eee;
+ display: flex;
+ width: max-content;
+ margin: 0 auto;
+ overflow-y: scroll;
+ max-height: 300px;
+ padding: 10px;
+ border: solid 1px black;
+}
+
+.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;
+}
+
+.search-section {
+ display: flex;
+ justify-content: space-between;
+}
+
+.search-section .filter-options {
+ display: flex;
+ flex-direction: column;
+ width: max-content;
+ padding: 20px;
+}
+
+.search-section p {
+ margin: 0;
+}
+
+.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-evenly;
+ align-content: space-evenly;
+}
+
+.sponsors a {
+ flex-grow: 4;
+ height: 200px;
+ margin: 10px;
+ background: white;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+.sponsors img {
+ width: 100%;
+}
+.metadata input#metadata_upload:checked ~ #metadata_upload_form_spot {
+ display: block;
+}
+
+.metadata input#metadata_upload ~ #metadata_upload_form_spot {
+ display: none;
+}
+
+.loader {
+ display: block;
+ border: 5px solid #f3f3f3; /* Light grey */
+ border-top: 5px solid #3498db; /* Blue */
+ border-radius: 50%;
+ width: 20px;
+ height: 20px;
+ margin-right: auto;
+ margin-left: auto;
+ animation: spin 1.5s linear infinite;
+}
+
+.invisible {
+ display: none;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+@media only screen and (max-device-width: 480px) {
+ .grid-container {
+ display: flex;
+ flex-direction: column;
+ }
+}
diff --git a/bh20simplewebuploader/static/main.js b/bh20simplewebuploader/static/main.js
new file mode 100644
index 0000000..96199a0
--- /dev/null
+++ b/bh20simplewebuploader/static/main.js
@@ -0,0 +1,47 @@
+function fetchAPI(apiEndPoint) {
+ fetch(scriptRoot + apiEndPoint)
+ .then(response => {
+ return response.json();
+ })
+ .then(data => {
+ document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);
+ document.getElementById("results").classList.remove("invisible");
+ document.getElementById("loader").classList.add("invisible");
+ });
+ document.getElementById("results").classList.add("invisible");
+ document.getElementById("loader").classList.remove("invisible");
+
+}
+
+let search = () => {
+ let m = document.getElementById('search-input').value;
+ fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
+}
+
+let fetchSEQBySpecimen = () => {
+ fetchAPI("/api/getSEQCountbySpecimenSource");
+}
+
+let fetchSEQByLocation = () => {
+ fetchAPI("/api/getSEQCountbyLocation");
+}
+
+let fetchSEQByTech = () => {
+ fetchAPI("/api/getSEQCountbytech");
+}
+
+let fetchAllaccessions = () => {
+ fetchAPI("/api/getAllaccessions");
+};
+
+/**
+ * Show form if checked
+ */
+let fillFormSpot = document.getElementById('metadata_fill_form_spot');
+function displayForm() {
+ if (document.getElementById('metadata_form').checked) {
+ fillFormSpot.classList.remove("invisible");
+ return;
+ }
+ fillFormSpot.classList.add("invisible");
+}