diff options
Diffstat (limited to 'uploader/static')
| -rw-r--r-- | uploader/static/css/layout-common.css | 18 | ||||
| -rw-r--r-- | uploader/static/css/layout-large.css | 6 | ||||
| -rw-r--r-- | uploader/static/css/layout-medium.css | 5 | ||||
| -rw-r--r-- | uploader/static/css/layout-small.css | 9 | ||||
| -rw-r--r-- | uploader/static/css/theme.css | 19 | ||||
| -rw-r--r-- | uploader/static/js/datatables.js | 74 | ||||
| -rw-r--r-- | uploader/static/js/utils.js | 3 |
7 files changed, 95 insertions, 39 deletions
diff --git a/uploader/static/css/layout-common.css b/uploader/static/css/layout-common.css index 36a5735..9c9d034 100644 --- a/uploader/static/css/layout-common.css +++ b/uploader/static/css/layout-common.css @@ -1,3 +1,21 @@ * { box-sizing: border-box; } + +body { + display: grid; + grid-gap: 1em; +} + +#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; +} diff --git a/uploader/static/css/layout-large.css b/uploader/static/css/layout-large.css index 8abd2dd..2d53627 100644 --- a/uploader/static/css/layout-large.css +++ b/uploader/static/css/layout-large.css @@ -1,8 +1,6 @@ @media screen and (min-width: 20.1in) { body { - display: grid; grid-template-columns: 7fr 3fr; - grid-gap: 1em; } #header { @@ -12,7 +10,7 @@ /* Define layout for the children elements */ display: grid; - grid-template-columns: 8fr 2fr; + grid-template-columns: 1fr 9fr; } #header #header-text { @@ -45,6 +43,8 @@ grid-column-start: 1; grid-column-end: 3; padding: 0 3px; + + margin: -0.3em -0.7em 0 -0.7em; } #main #main-content { diff --git a/uploader/static/css/layout-medium.css b/uploader/static/css/layout-medium.css index 2cca711..50ceeb4 100644 --- a/uploader/static/css/layout-medium.css +++ b/uploader/static/css/layout-medium.css @@ -1,8 +1,6 @@ @media screen and (width > 8in) and (max-width: 20in) { body { - display: grid; grid-template-columns: 65fr 35fr; - grid-gap: 1em; } #header { @@ -12,7 +10,7 @@ /* Define layout for the children elements */ display: grid; - grid-template-columns: 8fr 2fr; + grid-template-columns: 2fr 8fr; } #header #header-text { @@ -51,7 +49,6 @@ /* 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: 100%; 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 bdac745..45e5d3d 100644 --- a/uploader/static/css/theme.css +++ b/uploader/static/css/theme.css @@ -8,24 +8,27 @@ body { #header { background-color: #336699; color: #FFFFFF; - border-radius: 3px; min-height: 30px; + border-bottom: solid black 1px; } #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; + text-decoration: none; } #main #breadcrumbs { - border-radius:3px; text-align: center; + background-color: #D5D5D5; + padding: 0 1em 0 1em; +} + +#main #breadcrumbs .breadcrumb { + padding-top: 0.5em; } #main #main-content { @@ -34,7 +37,7 @@ body { } #main #sidebar-content { - background: #EEEEEE; + background: #FEFEFE; border-radius: 5px; padding: 10px 5px; @@ -88,3 +91,7 @@ table.dataTable tbody tr.selected td { .breadcrumb-item { text-transform: Capitalize; } + +.breadcrumb-item a { + text-decoration: none; +} diff --git a/uploader/static/js/datatables.js b/uploader/static/js/datatables.js index 82fd696..bfcda2a 100644 --- a/uploader/static/js/datatables.js +++ b/uploader/static/js/datatables.js @@ -11,13 +11,36 @@ var addTableLength = (menuList, lengthToAdd, dataLength) => { var defaultLengthMenu = (data) => { menuList = [] - var lengths = [10, 25, 50, 100, 1000, data.length]; + var lengths = [10, 25, 50, 100, 1000]; + if(data.length > 1000) { + lengths.push(data.length) + } lengths.forEach((len) => { menuList = addTableLength(menuList, len, data.length); }); 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, @@ -35,35 +58,40 @@ var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => { lengthMenu: "", info: "" }, - data: data, - columns: columns, - drawCallback: (settings) => { - $(this[0]).find("tbody tr").each((idx, row) => { - var arow = $(row); - var checkboxOrRadio = arow.find(".chk-row-select"); - if (checkboxOrRadio) { - if (arow.hasClass("selected")) { - checkboxOrRadio.prop("checked", true); - } else { - checkboxOrRadio.prop("checked", false); - } - } + drawCallback: function (settings) { + var api = this.api(); + api.rows({selected: true}).nodes().each((node, index) => { + setRowChecked(node); + }); + api.rows({selected: false}).nodes().each((node, index) => { + setRowUnchecked(node); }); } } var theDataTable = $(tableId).DataTable({ ...defaultSettings, - ...userSettings + ...userSettings, + ...(data.length == 0 ? {} : {data: data}), + ...(columns.length == 0 ? {} : {columns: columns}) }); - theDataTable.on("select", (event, datatable, type, cell, originalEvent) => { - datatable.rows({selected: true}).nodes().each((node, index) => { - $(node).find(".chk-row-select").prop("checked", true) - }); + theDataTable.on("select", (event, datatable, type, indexes) => { + datatable + .rows(indexes) + .nodes() + .each((node, index) => { + setRowChecked(node); + }); }); - theDataTable.on("deselect", (event, datatable, type, cell, originalEvent) => { - datatable.rows({selected: false}).nodes().each((node, index) => { - $(node).find(".chk-row-select").prop("checked", false) - }); + theDataTable.on("deselect", (event, datatable, type, indexes) => { + datatable + .rows(indexes) + .nodes() + .each(function(node, index) { + setRowUnchecked(node); + }); }); + + theDataTable.selectAll = () => {theDataTable.rows().select()}; + theDataTable.deselectAll = () => {theDataTable.rows().deselect()}; return theDataTable; }; 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) => { |