Use bundled bootstrap for styling the UI

Use bootstrap to eliminate a myriad of UI styling headaches.

4 files changed, 26 insertions, 223 deletions

diff --git a/qc_app/__init__.py b/qc_app/__init__.py
index 88e65be..9907695 100644
--- a/qc_app/__init__.py
+++ b/qc_app/__init__.py
@@ -9,6 +9,7 @@ from .entry import entrybp
 from .upload import upload
 from .parse import parsebp
 from .samples import samples
+from .base_routes import base
 from .dbinsert import dbinsertbp
 from .errors import register_error_handlers
 
@@ -18,6 +19,7 @@ def override_settings_with_envvars(
     for setting in (key for key in app.config if key not in ignore):
         app.config[setting] = os.environ.get(setting) or app.config[setting]
 
+
 def create_app():
     """The application factory"""
     app = Flask(__name__)
@@ -32,6 +34,7 @@ def create_app():
         app.config.from_envvar("QCAPP_SECRETS")
 
     # setup blueprints
+    app.register_blueprint(base, url_prefix="/")
     app.register_blueprint(entrybp, url_prefix="/")
     app.register_blueprint(parsebp, url_prefix="/parse")
     app.register_blueprint(upload, url_prefix="/upload")
diff --git a/qc_app/base_routes.py b/qc_app/base_routes.py
new file mode 100644
index 0000000..dbfcf48
--- /dev/null
+++ b/qc_app/base_routes.py
@@ -0,0 +1,15 @@
+"""Basic routes required for all pages"""
+import os
+from flask import Blueprint, send_from_directory
+
+base = Blueprint("base", __name__)
+
+def appenv():
+    """Get app's guix environment path."""
+    return os.environ.get("GN_UPLOADER_ENVIRONMENT")
+
+@base.route("/bootstrap/<path:filename>")
+def bootstrap(filename):
+    """Fetch bootstrap files."""
+    return send_from_directory(
+        appenv(), f"share/genenetwork2/javascript/bootstrap/{filename}")
diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
deleted file mode 100644
index 67e8cb3..0000000
--- a/qc_app/static/css/styles.css
+++ /dev/null
@@ -1,220 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-body {
-    padding: 0 1em 0 1em;
-}
-
-label, legend {
-    text-transform: capitalize;
-}
-
-.explainer {
-    font-family: Georgia, Garamond, serif;
-    font-style: normal;
-    font-size: 1.275em;
-}
-
-.heading {
-    color: #FEFEFE;
-    background-color: #336699;
-    text-transform: capitalize;
-    border-radius: 5px 5px 0 0;
-    padding-left: 0.5em;
-    font-weight: bold;
-    line-height: 1.5em;
-}
-
-fieldset {
-    border-radius: 5px;
-}
-
-.btn {
-    text-align: center;
-    border-radius: 5px;
-    display: inline-block;
-    vertical-align: middle;
-    text-transform: capitalize;
-    padding: 0.45em 0.3em 0.45em 0.3em;
-}
-
-.btn-main {
-    color: #FEFEFE;
-    border-color: #357ebd;
-    background-color: #336699;
-    font-weight: bold;
-}
-
-.btn-danger {
-    color: #FEFEFE;
-    border-color: #FF3434;
-    background-color: #FF4545;
-    font-weight: bold;
-}
-
-.alert {
-    display: block;
-    border-style: solid;
-    border-radius: 3px;
-}
-
-.alert-error {
-    color: #A35256;
-    background-color: #F8D7DA;
-    border-color: #E7C6C9;
-}
-
-.alert-success {
-    colour: #448944;
-    font-weight: bold;
-    background-color: #AAEEAA;
-}
-
-.alert-warning {
-    background-color: #F9FAB6;
-    border-color: #E8E9C5;
-}
-
-table {
-    margin-left: 1em;
-    border-collapse: collapse;
-    border: 1px solid;
-    border-color: #336699;
-}
-
-table thead {
-    color: #FEFEFE;
-    background-color: #336699;
-    border-width: 0 1px 0 1px;
-    border-style: solid;
-    border-color:  #336699;
-}
-
-table thead tr th {
-    text-transform: capitalize;
-}
-
-table th,td {
-    border-width: 0 1px 1px 1px;
-    border-style: solid;
-    border-color:  #336699;
-    padding: 0 0.3em 0.3em 0.3em;
-}
-
-.hidden {
-    display: none;
-}
-
-.modal {
-    position: fixed;
-    opacity: 90%;
-    left: 1em;
-    top: 1em;
-    width: 500px;
-    height: 250px;
-    text-align: center;
-    z-index: 9999;
-    background: #F4F4F4;
-
-    border: 2px solid;
-    border-radius: 1em;
-}
-
-form {
-    border-radius: 5px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: #336699;
-    background-color: #D1D1D1;
-}
-
-form fieldset:nth-child(odd) {
-    background-color: #F1F1F1;
-}
-
-@media(min-width: 1250px) {
-    form, .explainer {
-	width: 65ch;
-    }
-
-    .error-table {
-	width: 85ch;
-    }
-}
-
-fieldset {
-    border-style: solid;
-    border-color: #F1F1F1;
-    border-width: 1px 1px 0 1px;
-    border-bottom-style: none;
-    display: grid;
-    grid-template-columns: 2fr 8fr;
-    column-gap: 5px;
-}
-
-.form-col-1 {
-    grid-column: 1 / 2;
-}
-
-.form-col-2, .form-input-help {
-    grid-column: 2 / 3;
-}
-
-.form-input-help p {
-    margin-top: 0;
-    margin-bottom: 0.6em;
-}
-
-input[disabled="true"],input[disabled="disabled"] {
-    border-color: #878787;
-    background-color: #A9A9A9;
-}
-
-.invalid-input{
-    background-color: #F8D7DA;
-}
-
-form fieldset legend {
-    padding: 0 1.2em 0 1.2em;
-    font-weight: bolder;
-    line-height: 2em;
-    text-align: center;
-    text-transform: capitalize;
-    background-color: inherit;
-
-    border-style: solid;
-    border-radius: 0.5em;
-    border-color: #F1F1F1;
-    border-width: 0 1px 0 1px;
-}
-
-.cli-output {
-    background: black;
-    color: #00DD00;
-    padding: 1em;
-    font-weight: bold;
-    border-radius: 0.8em;
-    width: 90%;
-    overflow: scroll;
-}
-
-.qc-error-display {
-    border-radius: 0.8em;
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    max-height: 250px;
-    overflow: scroll;
-}
-
-.error-table {
-    display: block;
-    overflow: scroll;
-    max-height: 250px;
-    margin: 1em 0;
-}
-
-.error-table thead {
-    position: sticky;
-    top: 0;
-}
diff --git a/qc_app/templates/base.html b/qc_app/templates/base.html
index 0958687..00ff2d7 100644
--- a/qc_app/templates/base.html
+++ b/qc_app/templates/base.html
@@ -8,15 +8,20 @@
 
     <title>GN Uploader: {%block title%}{%endblock%}</title>
 
-    <link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
-    {%block css%}{%endblock%}
+    <link rel="stylesheet" type="text/css"
+	  href="{{url_for('base.bootstrap', filename='css/bootstrap.css')}}" />
 
     <link rel="shortcut icon" type="image/png" sizes="64x64"
 	  href="{{url_for('static', filename='images/CITGLogo.png')}}" />
+
+    {%block css%}{%endblock%}
+
   </head>
 
   <body>
-    {%block contents%}{%endblock%}
+    <div class="container">
+      {%block contents%}{%endblock%}
+    </div>
 
     {%block javascript%}{%endblock%}
   </body>