Skip to content

Commit

Permalink
Changes to the way tables are shown (recommitted due to merge issues):
Browse files Browse the repository at this point in the history 
- standardised look of tables across pages that use them (table, sortable grid, documentation, interactive text, results)
- changed markup of table header rows so they correctly use th tags rather than just using colour differences/bold to show they are headings
  • Loading branch information
@FayCross
FayCross committed Nov 30, 2022
1 parent 29b5c38 commit dac89b4
Show file tree
Hide file tree
Showing 34 changed files with 5,748 additions and 3,382 deletions.
32 changes: 23 additions & 9 deletions modules/xerte/parent_templates/Nottingham/common_html5/css/mainStyles.css
View file
Expand Up @@ -500,7 +500,8 @@ table tr.shaded {
}

/* BORDER STYLES */
table.full td {
table.full td,
table.full th {
border: 1px solid #333333;
border: 1px solid #333333;
}
Expand All @@ -511,13 +512,15 @@ table.simple {
table.horizontal tr {
border-bottom: 1px solid #333333;
}
table.horizontal tr:last-child {
table.horizontal tbody tr:last-child {
border-bottom: 0px;
}
table.vertical td {
table.vertical td,
table.vertical th {
border-right: 1px solid #333333;
}
table.vertical td:last-child {
table.vertical td:last-child,
table.vertical th:last-child {
border-right: 0px;
}
table.outside {
Expand Down Expand Up @@ -555,13 +558,19 @@ table.glossary tr.shaded td:first-child {
}

/* HEADER / FOOTER STYLES */
table.header tr:first-child {

table.header thead tr:first-child,
table.header tr.header,
table.header :not(tbody) > tr:first-child {
font-weight: bold;
}
table.footer tr:last-child {
font-weight: bold;
}
table.header.shaded tr:first-child {

table.header.shaded thead tr:first-child,
table.header.shaded tr.header,
table.header.shaded :not(tbody) > tr:first-child {
background: #F2F2F2;
}
table.footer.shaded tr:last-child {
Expand All @@ -570,13 +579,18 @@ table.footer.shaded tr:last-child {
table.headerCol.shaded td.header {
background: #F2F2F2;
}
table.header.simple tr:first-child {

table.header.simple tr.header,
table.header.simple thead tr:first-child,
table.header.simple :not(tbody) > tr:first-child {
border-bottom: 1px solid #333333;
}
table.footer.simple tr:last-child {
table.footer.simple tbody tr:last-child,
table.footer.simple :not(thead) tr:last-child {
border-top: 1px solid #333333;
}
table.headerCol.simple td:first-child {
table.headerCol.simple td:first-child,
table.headerCol.simple th:first-child {
border-right: 1px solid #333333;
}

Expand Down
40 changes: 26 additions & 14 deletions modules/xerte/parent_templates/Nottingham/models_html5/documentation.html
View file
Expand Up @@ -468,15 +468,10 @@
if (xml.getAttribute("shade") == "true") {
var $tr = $element.find('tr');

$element.find('table').children(0).children().each(function() {
var $this = $(this),
thisIndex = $this.index();
if (footer != true || thisIndex != $tr.length-1) {
if (header == true) { // shade even no. rows, except for 1st row
if (thisIndex%2 == 0 && thisIndex != 0) {
$this.addClass("shaded");
}
} else if (thisIndex%2 != 0) { // shade odd no. rows
$element.find('table tbody').children().each(function(i) {
var $this = $(this);
if (footer != true || (footer == true && i != $element.find('table tbody').children().length-1)) {
if (i%2 != 0) { // shade odd no. rows
$this.addClass("shaded");
}
}
Expand Down Expand Up @@ -685,30 +680,47 @@
tableString = '<table class="' + classes + '">',
rows = xml.getAttribute('data').split(separators[0]),
id = 0,
rowNum = xml.hasAttribute('rows') ? parseInt(xml.getAttribute('rows')) : 3;
rowNum = xml.hasAttribute('rows') ? parseInt(xml.getAttribute('rows')) : 3,
tbodySetUp = false;

var header = classes.indexOf('header') >= 0;

for (i=0; i<rows.length; i++) {
var dataTag = "td";
if (header == true && i==0) {
tableString += "<thead>";
dataTag = "th";
} else if (tbodySetUp == false) {
tableString += "<tbody>";
tbodySetUp = true;
}
tableString += '<tr>';

var cells = rows[i].split(separators[1]);
for (var j=0; j<cells.length; j++) {
if (xml.getAttribute('replace') != 'false') {
if ($.trim(cells[j]) == '') {
var textarea = '<textarea class="cell' + id + '" rows="' + rowNum + '"></textarea>';
tableString += '<td class="editable">' + textarea + '</td>';
tableString += '<' + dataTag + ' class="editable">' + textarea + '</' + dataTag + '>';
id++;

} else if ($.trim(cells[j]) == (xml.hasAttribute('empty') ? xml.getAttribute('empty') : '[empty]')) {
tableString += '<td></td>';
tableString += '<' + dataTag + '></' + dataTag + '>';
} else {
tableString += '<td>' + cells[j] + '</td>';
tableString += '<' + dataTag + '>' + cells[j] + '</' + dataTag + '>';
}
} else {
tableString += '<td>' + cells[j] + '</td>';
tableString += '<' + dataTag + '>' + cells[j] + '</' + dataTag + '>';
}
}

tableString += '</tr>';

if (header == true && i==0) {
tableString += "</thead>";
} else if (i==rows.length-1) {
tableString += "</tbody>";
}
}

tableString += '</table>';
Expand Down
12 changes: 12 additions & 0 deletions modules/xerte/parent_templates/Nottingham/models_html5/grid.css
View file
Expand Up @@ -102,6 +102,18 @@
background-color: white;
}

table.header tr:first-child {
font-weight: bold;
}

table.header.simple tr:first-child {
border-bottom: 1px solid #333333;
}

table.header.shaded tr:first-child {
background: #F2F2F2;
}

#btnHolder {
width: 100%;
margin: 10px;
Expand Down
14 changes: 5 additions & 9 deletions modules/xerte/parent_templates/Nottingham/models_html5/results.css
View file
Expand Up @@ -27,6 +27,11 @@
padding-left: 25px !important;
padding-right: 25px !important;
}

th {
background-color: #434343;
color: white;
}

td.question, th.question {
width: 40%;
Expand All @@ -41,17 +46,9 @@
width:28.5%;
}

th {
background: black;
color: #ffffff;
}
#questionScores th:not(:first-child) {
text-align: center;
}
.details th, .details td.th {
background: #434343;
color: #ffffff;
}
.td-center{
text-align:center;
}
Expand All @@ -69,7 +66,6 @@
}

.notLast{
/*border-bottom: 1px solid black !important; */
background-color: #bbbbbb;
}
#specific{
Expand Down
13 changes: 7 additions & 6 deletions modules/xerte/parent_templates/Nottingham/models_html5/results.html
View file
Expand Up @@ -197,7 +197,7 @@
$("#startTime").html(xtresults.start);
var detailstables = 0;
var firstnormalrow = true;
var detailstable = $("<table class='details'>");
var detailstable = $("<table class='details header shaded'>");
var scoretxt;


Expand Down Expand Up @@ -233,8 +233,9 @@
if (xtresults.mode == 'normal-results') {
$("#specific").show();
$("#specificResultsTxt").hide();
var $hrow = $();
if (firstnormalrow) {
$("#questionScores").append("<th>" + nameTxt + "</th><th>" + scoreTxt + "</th><th>" + durationTxt + "</th><th>" + weightingTxt + "</th><th>" + completedTxt + "</th>");
$("#questionScores").append("<thead><tr><th>" + nameTxt + "</th><th>" + scoreTxt + "</th><th>" + durationTxt + "</th><th>" + weightingTxt + "</th><th>" + completedTxt + "</th></tr></thead>");
normalcolumns = [x_GetTrackingTextFromHTML(nameTxt, ""), scoreTxt, durationTxt, weightingTxt, completedTxt];
firstnormalrow = false;
}
Expand All @@ -248,7 +249,7 @@
$("#specificResultsTxt").show();
if (firstnormalrow) {
normalcolumns = [x_GetTrackingTextFromHTML(nameTxt, ""), scoreTxt, durationTxt, weightingTxt, completedTxt, detailsTxt];
$("#questionScores").append("<th>" + nameTxt + "</th><th>" + scoreTxt + "</th><th>" + durationTxt + "</th><th>" + weightingTxt + "</th><th>" + completedTxt + "</th><th>" + detailsTxt + "</th>");
$("#questionScores").append("<thead><tr><th>" + nameTxt + "</th><th>" + scoreTxt + "</th><th>" + durationTxt + "</th><th>" + weightingTxt + "</th><th>" + completedTxt + "</th><th>" + detailsTxt + "</th></tr></thead>");
firstnormalrow = false;
}
$("#questionScores").append("<tr " + (altnormalrow ? "class='alt'" : "") + "><td>" + x.title + "</td><td class='td-center'>" + scoretxt + "</td><td class='td-center'>" + x.duration + "s</td><td class='td-center'>" + x.weighting +
Expand All @@ -258,7 +259,7 @@
altnormalrow = !altnormalrow;
altfullrow = false;
if (x.subinteractions.length > 0 && x.type != 'page') {
detailstable.append("<tr><th class='correct th'></th><th class='question'>" + x.title + "</th><th class='answer'>" + yourAnswerTxt + "</th><th class='correctanswer'>" + correctAnswerTxt + "</th></tr>");
detailstable.append("<tr class='header'><th class='correct th'></th><th class='question'>" + x.title + "</th><th class='answer'>" + yourAnswerTxt + "</th><th class='correctanswer'>" + correctAnswerTxt + "</th></tr>");
var detailstablecolumns = ["", x_GetTrackingTextFromHTML(x.title, ""), yourAnswerTxt, correctAnswerTxt];
var detailstablerows = [];
altfullrow = false;
Expand All @@ -280,7 +281,7 @@
altfullrow = !altfullrow;
});
$("#fullResults").append(detailstable);
detailstable = $("<table class='details'>");
detailstable = $("<table class='details header shaded'>");
detailstablescolumns.push(detailstablecolumns);
detailstablesrows.push(detailstablerows);
}
Expand Down Expand Up @@ -614,7 +615,7 @@ <h3 id="generalResultsTxt"></h3>
<div id="specific">
<h3 id="interactivityResultsTxt"></h3>
<h3 id="globalResultsTxt"></h3>
<table id="questionScores" rules="rows">
<table id="questionScores" rules="rows" class="header shaded">
</table>
<br />
<h3 id="specificResultsTxt"></h3>
Expand Down
33 changes: 22 additions & 11 deletions modules/xerte/parent_templates/Nottingham/models_html5/table.html
View file
Expand Up @@ -131,7 +131,8 @@
this.makeTable = function(tableData, csv) {
var tableString = "",
separator = "|",
i, j;
i, j,
tbodySetUp = false;

if (csv == true) {
if ($tableInfo[0].getAttribute("delimiter") != "") {
Expand All @@ -141,12 +142,27 @@
}
}
for (i=0; i<tableData.length; i++) {
var dataTag = "td";
if (header == true && i==0) {
tableString += "<thead>";
dataTag = "th";
} else if (tbodySetUp == false) {
tableString += "<tbody>";
tbodySetUp = true;
}

tableString += "<tr>";
var rowData = tableData[i].split(separator);
for (j=0; j<rowData.length; j++) {
tableString += "<td>" + rowData[j] + "</td>";
tableString += "<" + dataTag + ">" + rowData[j] + "</" + dataTag + ">";
}
tableString += "</tr>";

if (header == true && i==0) {
tableString += "</thead>";
} else if (i==tableData.length-1) {
tableString += "</tbody>";
}
}
$table.html(tableString);

Expand All @@ -155,15 +171,10 @@
}

if ($tableInfo[0].getAttribute("shade") == "true") {
$table.children(0).children().each(function() {
var $this = $(this),
thisIndex = $this.index();
if (footer != true || thisIndex != tableData.length-1) {
if (header == true) { // shade even no. rows, except for 1st row
if (thisIndex%2 == 0 && thisIndex != 0) {
$this.addClass("shaded");
}
} else if (thisIndex%2 != 0) { // shade odd no. rows
$table.find('tbody').children().each(function(i) {
var $this = $(this);
if (footer != true || (footer == true && i != $table.find('tbody').children().length-1)) {
if (i%2 != 0) { // shade odd no. rows
$this.addClass("shaded");
}
}
Expand Down

0 comments on commit dac89b4

Please sign in to comment.