diff options
| -rw-r--r-- | uploader/static/css/styles.css | 91 | ||||
| -rw-r--r-- | uploader/templates/base.html | 82 | ||||
| -rw-r--r-- | uploader/templates/index.html | 80 | ||||
| -rw-r--r-- | uploader/templates/login.html | 33 |
4 files changed, 156 insertions, 130 deletions
diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css index a88c229..4aa776e 100644 --- a/uploader/static/css/styles.css +++ b/uploader/static/css/styles.css @@ -1,7 +1,92 @@ -.heading { - text-transform: capitalize; +body { + margin: 0.7em; + box-sizing: border-box; + display: grid; + grid-template-columns: 1fr 6fr; + grid-template-rows: 5em 100%; + grid-gap: 20px; + + font-family: Georgia, Garamond, serif; + font-style: normal;. +} + +#header { + grid-column: 1/3; + width: 100%; + /* background: cyan; */ + padding-top: 0.5em; + border-radius: 0.5em; + + background-color: #336699; + border-color: #080808; + color: #FFFFFF; + background-image: none; +} + +#header .header { + font-size: 2em; + display: inline-block; + text-align: center; } -label { +#header .header-nav { + display: inline-block; + color: #FFFFFF; +} + +#header .header-nav li { + border-width: 1px; + border-color: #FFFFFF; + vertical-align: middle; + margin: 0.2em; +} + +#header .header-nav a { + color: #FFFFFF; + text-decoration: none; +} + +#nav-sidebar { + grid-column: 1/2; + /* background: #e5e5ff; */ + padding-top: 0.5em; + border-radius: 0.5em; + font-size: 1.2em; +} + +#main { + grid-column: 2/3; + width: 100%; + /* background: gray; */ + border-radius: 0.5em; +} + +.pagetitle { + padding-top: 0.5em; + /* background: pink; */ + border-radius: 0.5em; + /* background-color: #6699CC; */ + /* background-color: #77AADD; */ + background-color: #88BBEE; +} + +.pagetitle h1 { + text-align: center; text-transform: capitalize; } + +.pagetitle .breadcrumb { + background: none; +} + +.pagetitle .breadcrumb .active a { + color: #333333; +} + +.pagetitle .breadcrumb a { + color: #666666; +} + +.main-content { + font-size: 1.275em; +} diff --git a/uploader/templates/base.html b/uploader/templates/base.html index ee60fea..40a1255 100644 --- a/uploader/templates/base.html +++ b/uploader/templates/base.html @@ -1,6 +1,8 @@ <!DOCTYPE html> <html lang="en"> + <head> + <meta charset="UTF-8" /> <meta application-name="GeneNetwork Quality-Control Application" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> @@ -14,49 +16,67 @@ <link rel="stylesheet" type="text/css" href="{{url_for('base.bootstrap', filename='css/bootstrap-theme.min.css')}}" /> - - - <link rel="shortcut icon" type="image/png" sizes="64x64" - href="{{url_for('static', filename='images/CITGLogo.png')}}" /> - - <link rel="stylesheet" type="text/css" href="/static/css/custom-bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/static/css/styles.css" /> {%block css%}{%endblock%} + </head> <body> - <div class="navbar navbar-inverse navbar-static-top pull-left" - role="navigation" - style="width: 100%;min-width: 850px;white-space: nowrap;"> - <div class="container-fluid" style="width: 100%"> - <ul class="nav navbar-nav"> - <li><a href="/" style="font-weight: bold">GN Uploader</a></li> - <li> - <a href="{{gn2server_uri()}}">GeneNetwork</a> - </li> - </ul> - <ul class="nav navbar-nav" style="margin-left: 2em;"> - <li> - {%if user_logged_in()%} - <a href="{{url_for('oauth2.logout')}}" - title="Log out of the system">Log Out</a> - {%else%} - <a href="{{authserver_authorise_uri()}}" - title="Log in to the system">Log In</a> - {%endif%} - </li> - </ul> + <header id="header" class="container-fluid"> + <div class="row"> + <span class="header col-lg-9">GeneNetwork Data Quality Control and Upload</span> + <nav class="header-nav col-lg-3"> + <ul class="nav justify-content-end"> + <li class="btn"> + {%if user_logged_in()%} + <a href="{{url_for('oauth2.logout')}}" + title="Log out of the system">Log Out</a> + {%else%} + <a href="{{authserver_authorise_uri()}}" + title="Log in to the system">Log In</a> + {%endif%} + </li> + </ul> + </nav> + </header> + + <aside id="nav-sidebar" class="container-fluid"> + <ul class="nav flex-column"> + <li><a href="/" >Home</a></li> + </ul> + </aside> + + <main id="main" class="main container-fluid"> + + <div class="pagetitle row"> + <h1>GN Uploader: {%block pagetitle%}%{%endblock%}</h1> + <nav> + <ol class="breadcrumb"> + {%block breadcrumb%}{%endblock%} + </ol> + </nav> + </div> + + <div class="row"> + <div class="container-fluid"> + <div class="col-md-8 main-content"> + {%block contents%}{%endblock%} + </div> + <div class="sidebar-content col-md-4"> + {%block sidebarcontents%}{%endblock%} + </div> + </div> </div> - </div> - <div class="container"> - {%block contents%}{%endblock%} - </div> + </main> + <script src="{{url_for('base.jquery', filename='jquery.min.js')}}"></script> <script src="{{url_for('base.bootstrap', filename='js/bootstrap.min.js')}}"></script> {%block javascript%}{%endblock%} + </body> + </html> diff --git a/uploader/templates/index.html b/uploader/templates/index.html index 94060b7..e99b031 100644 --- a/uploader/templates/index.html +++ b/uploader/templates/index.html @@ -1,84 +1,26 @@ {%extends "base.html"%} {%from "flash_messages.html" import flash_all_messages%} -{%block title%}Data Upload{%endblock%} +{%block title%}Home{%endblock%} -{%block contents%} -<div class="row"> - {{flash_all_messages()}} - - <h1 class="heading">data upload</h1> - - <div class="explainer"> - <p>Each of the sections below gives you a different option for data upload. - Please read the documentation for each section carefully to understand what - each section is about.</p> - </div> -</div> - -<div class="row"> - <h2 class="heading">R/qtl2 Bundles</h2> +{%block pagetitle%}Home{%endblock%} - <div class="explainer"> - <p>This feature combines and extends the two upload methods below. Instead of - uploading one item at a time, the R/qtl2 bundle you upload can contain both - the genotypes data (samples/individuals/cases and their data) and the - expression data.</p> - <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither - of the methods below can handle.</p> - - <a href="{{url_for('upload.rqtl2.select_species')}}" - title="Upload a zip bundle of R/qtl2 files"> - <button class="btn btn-primary">upload R/qtl2 bundle</button></a> - </div> -</div> +{%block breadcrumb%} +<li class="breadcrumb-item active"> + <a href="{{url_for('entry.index')}}">Home</a> +</li> +{%endblock%} +{%block contents%} <div class="row"> - <h2 class="heading">Expression Data</h2> - <div class="explainer"> - <p>This feature enables you to upload expression data. It expects the data to - be in <strong>tab-separated values (TSV)</strong> files. The data should be - a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a - list of the <em>phenotypes</em> and the first row is a list of - <em>samples/cases</em>.</p> - - <p>If you haven't done so please go to this page to learn the requirements for - file formats and helpful suggestions to enter your data in a fast and easy - way.</p> - - <ol> - <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies - with our system requirements. ( - <a href="{{url_for('entry.data_review')}}#data-concerns" - title="Details for the data expectations.">Help</a> - )</li> - <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept - <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong> - files (<a href="{{url_for('entry.data_review')}}#file-types" - title="Details for the data expectations.">Help</a>)</li> - </ol> - </div> - - <a href="{{url_for('entry.upload_file')}}" - title="Upload your expression data" - class="btn btn-primary">upload expression data</a> -</div> + <p>Welcome to the <strong>GeneNetwork Data Quality Control and Upload System</strong>. This system is provided to help in uploading your data onto GeneNetwork where you can do analysis on it.</p> -<div class="row"> - <h2 class="heading">samples/cases</h2> + <p>Click on the menu items on the left to select the kind of data you want to upload.</p> - <div class="explainer"> - <p>For the expression data above, you need the samples/cases in your file to - already exist in the GeneNetwork database. If there are any samples that do - not already exist the upload of the expression data will fail.</p> - <p>This section gives you the opportunity to upload any missing samples</p> + {%block extrapageinfo%}{%endblock%} </div> - - <a href="{{url_for('samples.select_species')}}" - title="Upload samples/cases/individuals for your data" - class="btn btn-primary">upload Samples/Cases</a> </div> {%endblock%} diff --git a/uploader/templates/login.html b/uploader/templates/login.html index 6ebf72e..bbca42f 100644 --- a/uploader/templates/login.html +++ b/uploader/templates/login.html @@ -1,32 +1,11 @@ -{%extends "base.html"%} -{%from "flash_messages.html" import flash_all_messages%} +{%extends "index.html"%} {%block title%}Data Upload{%endblock%} -{%block contents%} -<div class="row"> - {{flash_all_messages()}} - - <h1 class="heading">log in</h1> - - <div class="explainer"> - <p> - This system enables you to upload data onto GeneNetwork. In order to do - that correctly, we need to know who you are.</p> - <p> - If you already have an account with GeneNetwork, you can simply click the - login button below, after which you can upload your data.<br /> - </p> - <a href="{{authserver_authorise_uri()}}" class="btn btn-primary" - style="display:block;width:15em;align:center;margin:1em 3em;"> - log in</a> - <p> - If you do not have an account with GeneNetwork, go to - <a href="{{gn2server_uri()}}" - title="GeneNetwork Service." - target="_blank">GeneNetwork</a> - and register for an account, then come back here to login and upload.</a> - </div> -</div> +{%block pagetitle%}log in{%endblock%} +{%block extrapageinfo%} +<p> + You <strong>do need to be logged in</strong> to upload data onto this system. + Please do that by clicking the "Log In" button at the top of the page.</p> {%endblock%} |