From 3af1eb2aea430d0b421d7bf0c6e966badfec87d3 Mon Sep 17 00:00:00 2001 From: BonfaceKilz Date: Sun, 26 Apr 2020 06:52:54 +0300 Subject: Update styles to match suggested mockup Ref: https://xd.adobe.com/view/fa2b4841-e463-432e-7465-e96b4ed200ff-8c1a/screen/b84fcf66-9580-4ae2-b37d-7ee15401d627/Pangenome-Browser-Manual-Metadata-Host --- bh20simplewebuploader/static/main.css | 72 +++++++++++++++++++---- bh20simplewebuploader/templates/form.html | 95 +++++++++++++++++-------------- 2 files changed, 114 insertions(+), 53 deletions(-) diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 20003f9..57e29ef 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -4,23 +4,24 @@ hr { body { color: #101010; - background-color: #F9EDE1; + background-color: #F5FFFF; margin: 0; } h1, h2, h3, h4 { - font-family: 'Roboto Slab', serif; - color: darkblue; + font-family: 'Inter', sans-serif; + color: #0ED1CD; } h1 { text-align: center; } -p { +.intro { color: #505050; - font-style: italic; + font-weight: 300; } + .header { background-color: white; margin: 0 auto; @@ -29,12 +30,17 @@ p { height: 150px; } +h2 > svg { + position: relative; + top: 8px; +} + .logo { float: right; } p, form, .about, .footer { - font-family: 'Raleway', sans-serif; + font-family: 'Inter', sans-serif; line-height: 1.5; } @@ -47,15 +53,17 @@ form h4 { } .intro { - background-color: lightgrey; + background-color: inherit; margin: 0 auto; padding: 20px; } .about { - background-color: lightgrey; - margin: 0 auto; + background-color: #B2F8F8; + margin: 30px auto; padding: 20px; + width: 95%; + border-radius: 20px; } .button { @@ -66,8 +74,13 @@ form h4 { } .footer { - background-color: white; + background: #058280;; margin: 0 auto; + color: #fff; +} + +.footer a { + color: #fff; } span.dropt {border-bottom: thin dotted; background: #ffeedd;} @@ -87,6 +100,21 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } 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; } @@ -96,6 +124,15 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } grid-area: b; } +a { + color: #40DBD8; + font-weight: 700; +} + +.fasta-file-select label, .metadata label { + font-weight: 600; +} + .metadata { padding: 1em; grid-area: c; @@ -179,9 +216,22 @@ footer { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: space-around; + 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; } diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index 5d1e1b1..ffd4158 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -2,7 +2,7 @@ - + Web uploader for Public SARS-CoV-2 Sequence Resource @@ -47,24 +47,35 @@
-

- Upload your SARS-CoV-2 sequence (FASTA or FASTQ formats) with metadata (JSONLD) to the public sequence resource. The upload will trigger a - recompute with all available sequences into a Pangenome - available for - download! - Your uploaded sequence will automatically be processed - and incorporated into the public pangenome with - metadata using worklows from the High Performance Open Biology Lab defined here. All data is published under - a Creative - Commons 4.0 attribution license (CC-BY-4.0). You - can take the published (GFA/RDF/FASTA) data and store it in - a triple store for further processing. We also plan to - combine identifiers with clinical data stored securely at REDCap. - A free command line version of the uploader can be - installed from source. -

+
+

+ Upload your SARS-CoV-2 sequence (FASTA or FASTQ formats) with metadata (JSONLD) to the public sequence resource. The upload will trigger a + recompute with all available sequences into a Pangenome + available for + download! +

+

+ Your uploaded sequence will automatically be processed + and incorporated into the public pangenome with + metadata using worklows from the High Performance Open Biology Lab defined here. All data is published under + a Creative + Commons 4.0 attribution license (CC-BY-4.0). You + can take the published (GFA/RDF/FASTA) data and store it in + a triple store for further processing. We also plan to + combine identifiers with clinical data stored securely at REDCap. + A free command line version of the uploader can be + installed from source. +

+ +
+

+ + + + Upload SARS-CoV-2 Sequence

+
@@ -138,37 +149,37 @@
-

-

ABOUT

-

- This a public repository created at the COVID-19 BioHackathon - that has a low barrier to entry for uploading sequence data using - best practices. I.e., data is published with a creative commons - 4.0 (CC-4.0) license with metadata using state-of-the art - standards and, perhaps most importantly, providing standardized - workflows that get triggered on upload, so that results are - immediately available in standardized data formats. The repository - will be maintained and expanded for the duration of the - pandemic. To contribute data simply upload it! To contribute code - and/or workflows see - the project - repository. For more information see the paper (WIP). -

-
-
+
+

ABOUT

+

+ This a public repository created at the COVID-19 BioHackathon + that has a low barrier to entry for uploading sequence data using + best practices. I.e., data is published with a creative commons + 4.0 (CC-4.0) license with metadata using state-of-the art + standards and, perhaps most importantly, providing standardized + workflows that get triggered on upload, so that results are + immediately available in standardized data formats. The repository + will be maintained and expanded for the duration of the + pandemic. To contribute data simply upload it! To contribute code + and/or workflows see + the project + repository. For more information see the paper (WIP). +

-
+
+
+ + + + + +
+
-
- - - - -
Source code · Powered by Common Workflow Language & Arvados; Made for COVID-19-BH20 -- cgit v1.2.3