diff --git a/package-lock.json b/package-lock.json index b894ae85..eb1246dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "aspine", "version": "2.9.0", "license": "GPL-3.0-or-later", "dependencies": { @@ -551,8 +552,7 @@ "esprima": "^4.0.1", "estraverse": "^5.2.0", "esutils": "^2.0.2", - "optionator": "^0.8.1", - "source-map": "~0.6.1" + "optionator": "^0.8.1" }, "bin": { "escodegen": "bin/escodegen.js", @@ -962,7 +962,6 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", "dependencies": { - "graceful-fs": "^4.1.6", "universalify": "^2.0.0" }, "optionalDependencies": { diff --git a/public/css/home.css b/public/css/home.css index d5fe4eeb..6eb721b8 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -638,6 +638,17 @@ i.fa.fa-toolbox { cursor: pointer; } +#buttonsTable .tabulator-tableHolder{ + position: absolute; + left: -10000000000000000000000000px; +} + +#buttonsTable .tabulator-headers{ + display: flex; + justify-content: flex-end; + +} + #classesTable .tabulator-col, #classesTable .tabulator-header, #assignmentsTable .tabulator-col, diff --git a/public/home.html b/public/home.html index ea37c3b5..5c0d7a76 100644 --- a/public/home.html +++ b/public/home.html @@ -214,6 +214,7 @@ <h3 id="import_modal_title">Import Data</h3> </div> <div id="grades" class="tabcontent"> + <div id="buttonsTable"></div> <div id="classesTable"></div> <div id="mostRecentDiv" style="display:none"> <!-- hide most recent activity; removed from aspen --> diff --git a/public/js/home.js b/public/js/home.js index 7dd28749..30da2d6f 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -758,38 +758,13 @@ let scheduleTable = new Tabulator("#scheduleTable", { ], }); -let classesTable = new Tabulator("#classesTable", { +let buttonsTable = new Tabulator("#buttonsTable", { //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value) index: "name", selectable: 1, + headerHozAlign:"right", layout: "fitColumns", //fit columns to width of table (optional) columns: [ // Define Table Columns - { - title: "Class", - field: "name", - formatter: cell => { - let rowColor = cell.getRow().getData().color; - let value = cell.getValue(); - - if (vip_username_list.includes(currentTableData.username)) { - return "<span style='background: -webkit-linear-gradient(left, red, orange, green, blue, purple);-webkit-background-clip: text; -webkit-text-fill-color:transparent; font-weight:bold;'>" + value + "</span>"; - } - if (rowColor === "black") { - return value; - } else { - return "<span style='color:" + rowColor + "; font-weight:bold;'>" + value + "</span>"; - } - }, - headerSort: false, - }, - { - title: "Grade", - field: "grade", - align: "left", - formatter: gradeFormatter, - headerSort: false, - width: window.matchMedia("(max-width: 576px)").matches ? 100 : "", - }, { title: "Export Table Data", titleFormatter: () => '<i class="fa fa-file-download header-icon tooltip" aria-hidden="true" tooltip="Export Grades"></i>', @@ -826,6 +801,42 @@ let classesTable = new Tabulator("#classesTable", { headerSort: false, cssClass: "icon-col" }, + ], + } +); + +let classesTable = new Tabulator("#classesTable", { + //height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value) + index: "name", + selectable: 1, + layout: "fitColumns", //fit columns to width of table (optional) + columns: [ // Define Table Columns + { + title: "Class", + field: "name", + formatter: cell => { + let rowColor = cell.getRow().getData().color; + let value = cell.getValue(); + + if (vip_username_list.includes(currentTableData.username)) { + return "<span style='background: -webkit-linear-gradient(left, red, orange, green, blue, purple);-webkit-background-clip: text; -webkit-text-fill-color:transparent; font-weight:bold;'>" + value + "</span>"; + } + if (rowColor === "black") { + return value; + } else { + return "<span style='color:" + rowColor + "; font-weight:bold;'>" + value + "</span>"; + } + }, + headerSort: false, + }, + { + title: "Grade", + field: "grade", + align: "left", + formatter: gradeFormatter, + headerSort: false, + width: window.matchMedia("(max-width: 576px)").matches ? 100 : "", + }, ], rowClick: function(e, row) { // trigger an alert message when the row is clicked $("#mostRecentDiv").hide();