From 05191fa146fac31fd079c50bf6bcc4983f2f0792 Mon Sep 17 00:00:00 2001 From: Frederick Muriuki Muriithi Date: Wed, 28 Aug 2024 16:14:52 -0500 Subject: Rework UI: present menus on the left, content on the right. --- uploader/static/css/styles.css | 91 ++++++++++++++++++++++++++++++++++++++++-- uploader/templates/base.html | 82 +++++++++++++++++++++++-------------- uploader/templates/index.html | 80 +++++-------------------------------- 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 @@ + + @@ -14,49 +16,67 @@ - - - - - {%block css%}{%endblock%} + -

GN Uploader: {%block pagetitle%}%{%endblock%}

data upload

R/qtl2 Bundles

Expression Data

samples/cases

log in