Rework UI: present menus on the left, content on the right.

author: Frederick Muriuki Muriithi 2024-08-28 16:14:52 -0500
committer: Frederick Muriuki Muriithi 2024-08-28 17:22:04 -0500
commit: 05191fa146fac31fd079c50bf6bcc4983f2f0792 (patch)
tree: e98cbbb382edec7fb224bbb132b6d5ff9f2d7639 /uploader
parent: 3c74277f8063f01bb63836c763507a8d64869f46 (diff)
download: gn-uploader-05191fa146fac31fd079c50bf6bcc4983f2f0792.tar.gz
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%}
author	Frederick Muriuki Muriithi	2024-08-28 16:14:52 -0500
committer	Frederick Muriuki Muriithi	2024-08-28 17:22:04 -0500
commit	05191fa146fac31fd079c50bf6bcc4983f2f0792 (patch)
tree	e98cbbb382edec7fb224bbb132b6d5ff9f2d7639 /uploader
parent	3c74277f8063f01bb63836c763507a8d64869f46 (diff)
download	gn-uploader-05191fa146fac31fd079c50bf6bcc4983f2f0792.tar.gz