aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--uploader/static/css/layout-large.css66
-rw-r--r--uploader/static/css/layout-medium.css68
-rw-r--r--uploader/static/css/layout-small.css66
-rw-r--r--uploader/static/css/theme.css85
-rw-r--r--uploader/templates/base2.html111
-rw-r--r--uploader/templates/index2.html48
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%}