diff options
Diffstat (limited to 'uploader')
| -rw-r--r-- | uploader/static/css/styles.css | 202 | ||||
| -rw-r--r-- | uploader/templates/base.html | 53 |
2 files changed, 104 insertions, 151 deletions
diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css index ef8725e..a1107d5 100644 --- a/uploader/static/css/styles.css +++ b/uploader/static/css/styles.css @@ -1,176 +1,134 @@ +* { + box-sizing: border-box; +} + body { margin: 0.7em; - box-sizing: border-box; display: grid; - grid-template-columns: 1fr 6fr; - grid-template-rows: 4em 100%; + grid-template-columns: 1fr 9fr; grid-gap: 20px; font-family: Georgia, Garamond, serif; font-style: normal; + font-size: 20px; } #header { - grid-column: 1/3; - width: 100%; - /* background: cyan; */ - padding-top: 0.5em; - border-radius: 0.5em; + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; + + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 8fr 2fr; + /* Content styling */ background-color: #336699; - border-color: #080808; color: #FFFFFF; - background-image: none; + border-radius: 3px; } -#header .header { - font-size: 1.7em; - display: inline-block; - text-align: start; -} +#header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; -#header .header-nav { - display: inline-block; - color: #FFFFFF; + /* Content styling */ + font-size: 1.7em; + padding-left: 1em; } -#header .header-nav li { - border-width: 1px; - border-color: #FFFFFF; - vertical-align: middle; - margin: 0.01em; - border-style: solid; - border-width: 2px; - border-radius: 0.5em; - text-align: center; +#header #header-nav { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; } -#header .header-nav a { +#header #header-nav .nav li a { + /* Content styling */ color: #FFFFFF; - text-decoration: none; + background: #4477AA; + border: solid 5px #336699; + border-radius: 5px; + font-size: 0.7em; + text-align: center; } #nav-sidebar { - grid-column: 1/2; - /* background: #e5e5ff; */ - padding-top: 0.5em; - border-radius: 0.5em; - font-size: 1.2em; + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; } -#main { - grid-column: 2/3; - width: 100%; - /* background: gray; */ +#nav-sidebar .nav li a:hover { border-radius: 0.5em; } -.pagetitle { - line-height: 1; - padding-top: 0.2em; - /* background: pink; */ +#nav-sidebar .nav .activemenu { + border-style: solid; border-radius: 0.5em; - /* background-color: #6699CC; */ - /* background-color: #77AADD; */ - background-color: #88BBEE; -} - -.pagetitle .title { - text-align: start; - text-transform: capitalize; - padding-left: 0.5em; - font-size: 1.7em; -} - -.pagetitle .breadcrumb { - background: none; -} - -.pagetitle .breadcrumb .active a { - color: #333333; + border-color: #AAAAAA; + background-color: #EFEFEF; } -.pagetitle .breadcrumb a { - color: #666666; -} +#main { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; -.main-content { - font-size: 1.275em; + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 4em 100%; + grid-gap: 1em; } -.breadcrumb { - text-transform: capitalize; -} +#main #pagetitle { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; -dd { - margin-left: 3em; - font-size: 0.88em; - padding-bottom: 1em; + /* Content-styling */ + border-radius: 3px; + background-color: #88BBEE; } -input[type="submit"], .btn { +#main #pagetitle .title { + font-size: 1.4em; text-transform: capitalize; + padding-left: 0.5em; } -.card { - margin-top: 0.3em; - border-width: 1px; - border-style: solid; - border-radius: 0.3em; - border-color: #AAAAAA; - padding: 0.5em; -} +#main #all-content { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 3; -.activemenu { - border-style: solid; - border-radius: 0.5em; - border-color: #AAAAAA; - background-color: #EFEFEF; + /* Define layout for the children elements */ + display: grid; + grid-template-columns: 7fr 3fr; /* For a maximum screen width of 1366 pixels */ + grid-gap: 1.5em; } -.danger { - color: #A94442; - border-color: #DCA7A7; - background-color: #F2DEDE; +#main #all-content .row { + margin: 0 2px; } -.heading { - border-bottom: solid #EEBB88; - text-transform: capitalize; +#main #all-content #main-content { + background: #FFFFFF; + max-width: 950px; } -.subheading { - padding: 1em 0 0.1em 0.5em; - border-bottom: solid #88BBEE; +#pagetitle .breadcrumb { + background: none; text-transform: capitalize; + font-size: 0.75em; } -form { - margin-top: 0.3em; - background: #E5E5FF; - padding: 0.5em; - border-radius:0.5em; -} - -form .form-control { - background-color: #EAEAFF; -} - -.table-form-table thead { - background: #E5E5FF; -} - - -.sidebar-content .card .card-title { - font-size: 1.5em; -} - -.sidebar-content .card-text table tbody td:nth-child(1) { - font-weight: bolder; +#pagetitle .breadcrumb .active a { + color: #333333; } -.big-alert { - line-height: 1.5em; - padding: 0.5em 0 0.5em 3em; - margin-top: 0.2em; +#pagetitle .breadcrumb a { + color: #666666; } diff --git a/uploader/templates/base.html b/uploader/templates/base.html index c124b13..c37e1f3 100644 --- a/uploader/templates/base.html +++ b/uploader/templates/base.html @@ -23,25 +23,24 @@ </head> <body> - <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> - {%if user_logged_in()%} - <a href="{{url_for('oauth2.logout')}}" - title="Log out of the system">{{user_email()}} — Log Out</a> - {%else%} - <a href="{{authserver_authorise_uri()}}" - title="Log in to the system">Log In</a> - {%endif%} - </li> - </ul> - </nav> + <header id="header"> + <span id="header-text">GeneNetwork Data Quality Control and Upload</span> + <nav id="header-nav"> + <ul class="nav justify-content-end"> + <li> + {%if user_logged_in()%} + <a href="{{url_for('oauth2.logout')}}" + title="Log out of the system">{{user_email()}} — 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"> + <aside id="nav-sidebar"> <ul class="nav flex-column"> <li {%if activemenu=="home"%}class="activemenu"{%endif%}> <a href="/" >Home</a></li> @@ -90,9 +89,9 @@ </ul> </aside> - <main id="main" class="main container-fluid"> + <main id="main" class="main"> - <div class="pagetitle row"> + <div id="pagetitle" class="pagetitle"> <span class="title">GN Uploader: {%block pagetitle%}{%endblock%}</span> <nav> <ol class="breadcrumb"> @@ -108,14 +107,12 @@ </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 id="all-content"> + <div id="main-content"> + {%block contents%}{%endblock%} + </div> + <div id="sidebar-content"> + {%block sidebarcontents%}{%endblock%} </div> </div> </main> @@ -127,7 +124,5 @@ filename='js/bootstrap.min.js')}}"></script> <script type="text/javascript" src="/static/js/misc.js"></script> {%block javascript%}{%endblock%} - </body> - </html> |