diff options
| -rw-r--r-- | uploader/static/css/layout-large.css | 66 | ||||
| -rw-r--r-- | uploader/static/css/layout-medium.css | 68 | ||||
| -rw-r--r-- | uploader/static/css/layout-small.css | 66 | ||||
| -rw-r--r-- | uploader/static/css/theme.css | 85 | ||||
| -rw-r--r-- | uploader/templates/base2.html | 111 | ||||
| -rw-r--r-- | uploader/templates/index2.html | 48 |
6 files changed, 444 insertions, 0 deletions
diff --git a/uploader/static/css/layout-large.css b/uploader/static/css/layout-large.css new file mode 100644 index 0000000..d1b3aa1 --- /dev/null +++ b/uploader/static/css/layout-large.css @@ -0,0 +1,66 @@ +* { + box-sizing: border-box; +} + +@media screen and (min-width: 20.1in) { + body { + display: grid; + grid-template-columns: 7fr 3fr; + grid-gap: 1em; + } + + #header { + /* 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; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; + } + + #main { + /* 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: 7fr 3fr; + grid-gap: 1.5em; + } + + #main #breadcrumbs { + grid-column-start: 1; + grid-column-end: 3; + padding: 0 3px; + } + + #main #main-content { + /*background: #FFFFFF;*/ + /*max-width: 80%;*/ + + grid-column-start: 1; + grid-column-end: 2; + } + + #main #sidebar-content { + grid-column-start: 2; + grid-column-end: 3; + } +} diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css new file mode 100644 index 0000000..f504073 --- /dev/null +++ b/uploader/static/css/layout-medium.css @@ -0,0 +1,68 @@ +* { + box-sizing: border-box; +} + +@media screen and (width > 8in) and (max-width: 20in) { + body { + display: grid; + grid-template-columns: 65fr 35fr; + grid-gap: 1em; + } + + #header { + /* 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; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 2; + grid-column-end: 3; + } + + #main { + /* 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: 7fr 3fr; + grid-gap: 5px; + } + + #main #breadcrumbs { + grid-column-start: 1; + grid-column-end: 3; + padding: 0 3px; + } + + #main #main-content { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + grid-gap: 5px; + + /* Define layout for the children elements */ + max-width: 70%; + } + + #main #sidebar-content { + grid-column-start: 2; + grid-column-end: 3; + } +} diff --git a/uploader/static/css/layout-small.css b/uploader/static/css/layout-small.css new file mode 100644 index 0000000..cd32a71 --- /dev/null +++ b/uploader/static/css/layout-small.css @@ -0,0 +1,66 @@ +* { + box-sizing: border-box; +} + +@media screen and (max-width: 8in) { + body { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 7fr; + grid-gap: 1em; + } + + #header { + /* 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: 1fr; + } + + #header #header-text { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + + /* Content styling */ + padding-left: 1em; + } + + #header #header-nav { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + } + + #main { + /* Place it in the parent element */ + grid-column-start: 1; + grid-column-end: 2; + display: grid; + + /* Define layout for the children elements */ + grid-template-rows: 1.5em 80% 20%; + grid-template-columns: 1fr; + } + + #main #breadcrumbs { + grid-row-start: 1; + grid-row-end: 2; + + } + + #main #main-content { + grid-row-start: 2; + grid-row-end: 3; + } + + #main #sidebar-content { + grid-row-start: 3; + grid-row-end: 4; + + background: #E5E5FF; + } +} diff --git a/uploader/static/css/theme.css b/uploader/static/css/theme.css new file mode 100644 index 0000000..09e5a52 --- /dev/null +++ b/uploader/static/css/theme.css @@ -0,0 +1,85 @@ +body { + margin: 0.7em; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-size: 20px; + background: black; +} + +#header { + background-color: #336699; + color: #FFFFFF; + border-radius: 3px; + min-height: 30px; +} + +#header #header-nav .nav li a { + /* Content styling */ + color: #FFFFFF; + background: #4477AA; + border: solid 5px #336699; + border-radius: 5px; + font-size: 0.7em; + text-align: center; + padding: 1px 7px; +} + +#main #breadcrumbs { + background: #eaeaea; + border-radius:3px; + text-align: center; +} + +#main #main-content { + background: #e5e5ff; + + border-radius: 5px; + padding: 0 5px; +} + +#main #sidebar-content { + background: red; + + border-radius: 5px; + padding: 0 5px; +} + +#main .row { + margin: 0 2px; +} + + +.heading { + border-bottom: solid #EEBB88; + text-transform: capitalize; +} + +.subheading { + padding: 1em 0 0.1em 0.5em; + border-bottom: solid #88BBEE; + text-transform: capitalize; +} + +input[type="search"] { + border-radius: 5px; +} + +.btn { + text-transform: Capitalize; +} + +table.dataTable thead th, table.dataTable tfoot th{ + border-right: 1px solid white; + color: white; + background-color: #369 !important; +} + +table.dataTable tbody tr.selected td { + background-color: #ffee99 !important; +} + +.form-group { + margin-bottom: 2em; + padding-bottom: 0.2em; + border-bottom: solid gray 1px; +} diff --git a/uploader/templates/base2.html b/uploader/templates/base2.html new file mode 100644 index 0000000..4c5d613 --- /dev/null +++ b/uploader/templates/base2.html @@ -0,0 +1,111 @@ +<!DOCTYPE html> +<html lang="en"> + + <head> + + <meta charset="UTF-8" /> + <meta application-name="GeneNetwork Quality-Control Application" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + {%block extrameta%}{%endblock%} + + <title>Data Upload and Quality Control: {%block title%}{%endblock%}</title> + + <link rel="stylesheet" type="text/css" + href="{{url_for('base.bootstrap', + filename='css/bootstrap.min.css')}}" /> + <link rel="stylesheet" type="text/css" + href="{{url_for('base.datatables', + filename='css/dataTables.bootstrap5.min.css')}}" /> + <link rel="stylesheet" type="text/css" href="/static/css/styles2.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-large.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-medium.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/layout-small.css" /> + <link rel="stylesheet" type="text/css" href="/static/css/theme.css" /> + + {%block css%}{%endblock%} + + </head> + + <body> + <header id="header"> + <span id="header-text">GeneNetwork</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"> + <span class="glyphicon glyphicon-user"></span> + {{user_email()}} Sign Out</a> + {%else%} + <a href="{{authserver_authorise_uri()}}" + title="Log in to the system">Sign In</a> + {%endif%} + </li> + </ul> + </nav> + </header> + + + <main id="main" class="main"> + <nav id="breadcrumbs" aria-label="breadcrumb"> + <ol class="breadcrumb"> + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Home</a></li> + {%block extra_breadcrumbs%} + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Page01</a></li> + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Page02</a></li> + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Page03</a></li> + <li class="breadcrumb-item"> + <a href="{{url_for('base.index')}}">Page04</a></li> + {%endblock%} + </ol> + </nav> + + <div id="main-content"> + {%block contents%}{%endblock%} + </div> + + <div id="sidebar-content"> + {%block sidebarcontents%}{%endblock%} + </div> + </main> + + + + <script type="text/javascript" src="/static/js/debug.js"></script> + <!-- + Core dependencies + --> + <script src="{{url_for('base.jquery', + filename='jquery.min.js')}}"></script> + <script src="{{url_for('base.bootstrap', + filename='js/bootstrap.min.js')}}"></script> + + <!-- + DataTables dependencies + --> + <script type="text/javascript" + src="{{url_for('base.datatables', + filename='js/dataTables.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='scroller/js/dataTables.scroller.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='buttons/js/dataTables.buttons.min.js')}}"></script> + <script type="text/javascript" + src="{{url_for('base.datatables_extensions', + filename='select/js/dataTables.select.min.js')}}"></script> + + <!-- + local dependencies + --> + <script type="text/javascript" src="/static/js/utils.js"></script> + <script type="text/javascript" src="/static/js/datatables.js"></script> + {%block javascript%}{%endblock%} + </body> +</html> diff --git a/uploader/templates/index2.html b/uploader/templates/index2.html new file mode 100644 index 0000000..72fea2f --- /dev/null +++ b/uploader/templates/index2.html @@ -0,0 +1,48 @@ +{%extends "base2.html"%} +{%from "flash_messages.html" import flash_all_messages%} + +{%block title%}Home{%endblock%} + +{%block pagetitle%}Home{%endblock%} + +{%block extra_breadcrumbs%}{%endblock%} + +{%block contents%} + +<div class="row">{{flash_all_messages()}}</div> + +{%if user_logged_in()%} +<div class="row"> + <p>Select from:</p> + <ul> + <li>Species</li> + <li>Publications</li> + </ul> +</div> +{%else%} +<div class="row"> + <p> + <a href="{{authserver_authorise_uri()}}" + title="Sign in to the system" + class="btn btn-primary">Sign in</a> + to continue.</p> +</div> +{%endif%} + +{%endblock%} + + + +{%block sidebarcontents%} +<div class="row"> + <form id="frm-quick-navigation"> + <legend>Quick Navigation</legend> + <div class="form-group"> + <label for="fqn-species-id">Species</label> + <select name="species_id"> + <option value="">Select species</option> + </select> + </div> + </form> +</div> +{%endblock%} |