From 103c4bc302f8c3038b9084aa2126a75db1261cd6 Mon Sep 17 00:00:00 2001 From: Frederick Muriuki Muriithi Date: Wed, 12 Jun 2024 14:46:45 -0500 Subject: Use bundled bootstrap for styling the UI Use bootstrap to eliminate a myriad of UI styling headaches. --- qc_app/__init__.py | 3 + qc_app/base_routes.py | 15 +++ qc_app/static/css/styles.css | 220 ------------------------------------------- qc_app/templates/base.html | 11 ++- 4 files changed, 26 insertions(+), 223 deletions(-) create mode 100644 qc_app/base_routes.py delete mode 100644 qc_app/static/css/styles.css 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/") +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 @@ GN Uploader: {%block title%}{%endblock%} - - {%block css%}{%endblock%} + + + {%block css%}{%endblock%} + - {%block contents%}{%endblock%} +
+ {%block contents%}{%endblock%} +
{%block javascript%}{%endblock%} -- cgit v1.2.3