6 files changed, 55 insertions, 28 deletions

diff --git a/uploader/static/css/layout-common.css b/uploader/static/css/layout-common.css
index 88e580c..9c9d034 100644
--- a/uploader/static/css/layout-common.css
+++ b/uploader/static/css/layout-common.css
@@ -2,20 +2,20 @@
     box-sizing: border-box;
 }
 
-    body {
-        display: grid;
-        grid-gap: 1em;
-    }
+body {
+    display: grid;
+    grid-gap: 1em;
+}
 
-    #header {
-        margin: -0.7em; /* Fill entire length of screen */
-        /* Define layout for the children elements */
-        display: grid;
-    }
+#header {
+    margin: -0.7em; /* Fill entire length of screen */
+    /* Define layout for the children elements */
+    display: grid;
+}
 
-    #header #header-nav {
-        /* Place it in the parent element */
-        grid-column-start: 1;
-        grid-column-end: 2;
-        display: flex;
-    }
+#header #header-nav {
+    /* Place it in the parent element */
+    grid-column-start: 1;
+    grid-column-end: 2;
+    display: flex;
+}
diff --git a/uploader/static/css/layout-small.css b/uploader/static/css/layout-small.css
index 80a3759..2e47217 100644
--- a/uploader/static/css/layout-small.css
+++ b/uploader/static/css/layout-small.css
@@ -2,7 +2,7 @@
     body {
         display: grid;
         grid-template-columns: 1fr;
-        grid-template-rows: 1fr 2fr 7fr;
+        grid-template-rows: 1fr 90fr;
         grid-gap: 1em;
     }
 
@@ -31,6 +31,11 @@
         grid-column-end: 2;
     }
 
+    #header #header-nav ul {
+        display: grid;
+        grid-template-columns: 1fr;
+    }
+
     #main {
         /* Place it in the parent element */
         grid-column-start: 1;
@@ -38,7 +43,7 @@
         display: grid;
 
         /* Define layout for the children elements */
-        grid-template-rows: 1.5em 80% 20%;
+        grid-template-rows: 1fr 80fr 20fr;
         grid-template-columns: 1fr;
     }
 
diff --git a/uploader/static/css/theme.css b/uploader/static/css/theme.css
index 45e5d3d..6f5cb0c 100644
--- a/uploader/static/css/theme.css
+++ b/uploader/static/css/theme.css
@@ -81,10 +81,10 @@ table.dataTable tbody tr.selected td {
     background-color: #ffee99 !important;
 }
 
-.form-group {
+#frm-add-phenotypes .form-group {
     margin-bottom: 2em;
     padding-bottom: 0.2em;
-    border-bottom: solid gray 1px;
+    border-bottom: solid #A9A9A9 1px;
 }
 
 
@@ -95,3 +95,8 @@ table.dataTable tbody tr.selected td {
 .breadcrumb-item a {
     text-decoration: none;
 }
+
+.table thead tr th {
+    text-align: center;
+    vertical-align: middle;
+}
diff --git a/uploader/static/images/frontpage_banner.png b/uploader/static/images/frontpage_banner.png
new file mode 100644
index 0000000..d25e1c9
--- /dev/null
+++ b/uploader/static/images/frontpage_banner.png
Binary files differdiff --git a/uploader/static/js/datatables.js b/uploader/static/js/datatables.js
index 2ed435b..bfcda2a 100644
--- a/uploader/static/js/datatables.js
+++ b/uploader/static/js/datatables.js
@@ -21,6 +21,26 @@ var defaultLengthMenu = (data) => {
     return menuList;
 };
 
+var setRowCheckableProperty = (node, state) => {
+    /**
+     * Set a row's (`node`) checkbox's or radio button's checked state to the
+     * boolean value `state`.
+     **/
+    if(typeof(state) == "boolean") {
+        var pseudoclass = state == false ? ":checked" : ":not(:checked)";
+        var checkable = (
+            $(node).find(`input[type="checkbox"]${pseudoclass}`)[0]
+                ||
+                $(node).find(`input[type="radio"]${pseudoclass}`)[0]);
+        $(checkable).prop("checked", state);
+    } else {
+        throw new Error("`state` *MUST* be a boolean value.")
+    }
+};
+
+var setRowChecked = (node) => {setRowCheckableProperty(node, true);};
+var setRowUnchecked = (node) => {setRowCheckableProperty(node, false);};
+
 var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
     var defaultSettings = {
         responsive: true,
@@ -41,12 +61,10 @@ var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
         drawCallback: function (settings) {
             var api = this.api();
             api.rows({selected: true}).nodes().each((node, index) => {
-                $(node).find('input[type="checkbox"]:checked')
-                      .prop("checked", true);
+                setRowChecked(node);
             });
             api.rows({selected: false}).nodes().each((node, index) => {
-                $(node).find('input[type="checkbox"]:not(:checked)')
-                    .prop("checked", false);
+                setRowUnchecked(node);
             });
         }
     }
@@ -61,8 +79,7 @@ var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
             .rows(indexes)
             .nodes()
             .each((node, index) => {
-                $(node).find('input[type="checkbox"]:not(:checked)')
-                    .prop("checked", true);
+                setRowChecked(node);
             });
     });
     theDataTable.on("deselect", (event, datatable, type, indexes) => {
@@ -70,8 +87,7 @@ var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
             .rows(indexes)
             .nodes()
             .each(function(node, index) {
-                $(node).find('input[type="checkbox"]:checked')
-                    .prop("checked", false);
+                setRowUnchecked(node);
             });
     });
 
diff --git a/uploader/static/js/utils.js b/uploader/static/js/utils.js
index 1b31661..62d3662 100644
--- a/uploader/static/js/utils.js
+++ b/uploader/static/js/utils.js
@@ -28,7 +28,8 @@ var remove_class = (element, classvalue) => {
 
 var add_class = (element, classvalue) => {
     remove_class(element, classvalue);
-    element.attr("class", (element.attr("class") || "") + " " + classvalue);
+    element.attr("class",
+                 ((element.attr("class") || "") + " " + classvalue).trim());
 };
 
 $(".not-implemented").click((event) => {