aboutsummaryrefslogtreecommitdiff
path: root/qc_app
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2024-06-12 14:46:45 -0500
committerFrederick Muriuki Muriithi2024-06-12 14:49:59 -0500
commit103c4bc302f8c3038b9084aa2126a75db1261cd6 (patch)
tree0279797417fe9bd90d6f4bf7081b2f6f7c4022c7 /qc_app
parent5e96d27f3d96c84fc5a15d7040843b379b701d20 (diff)
downloadgn-uploader-103c4bc302f8c3038b9084aa2126a75db1261cd6.tar.gz
Use bundled bootstrap for styling the UI
Use bootstrap to eliminate a myriad of UI styling headaches.
Diffstat (limited to 'qc_app')
-rw-r--r--qc_app/__init__.py3
-rw-r--r--qc_app/base_routes.py15
-rw-r--r--qc_app/static/css/styles.css220
-rw-r--r--qc_app/templates/base.html11
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>