Tweak table layout
parent
54bef98312
commit
4d5669dab7
|
@ -35,12 +35,19 @@ CATEGORIES.push(new Category(
|
||||||
|
|
||||||
headerRow.appendChild(yearsHeader);
|
headerRow.appendChild(yearsHeader);
|
||||||
|
|
||||||
|
const spacerHeader = document.createElement('th');
|
||||||
|
spacerHeader.classList.add('spacer-column');
|
||||||
|
headerRow.appendChild(spacerHeader);
|
||||||
|
|
||||||
itemsListTable.appendChild(headerRow);
|
itemsListTable.appendChild(headerRow);
|
||||||
},
|
},
|
||||||
function listSeason(season, row) {
|
function listSeason(season, row) {
|
||||||
const yearCell = document.createElement('td');
|
const yearCell = document.createElement('td');
|
||||||
yearCell.textContent = (season.year - 1) + "-" + season.year;
|
yearCell.textContent = (season.year - 1) + "-" + season.year;
|
||||||
row.appendChild(yearCell);
|
row.appendChild(yearCell);
|
||||||
|
|
||||||
|
const spacerCell = document.createElement('td');
|
||||||
|
row.appendChild(spacerCell);
|
||||||
},
|
},
|
||||||
async function addSeason() {
|
async function addSeason() {
|
||||||
//
|
//
|
||||||
|
@ -65,12 +72,19 @@ CATEGORIES.push(new Category(
|
||||||
nameHeader.textContent = "Name";
|
nameHeader.textContent = "Name";
|
||||||
headerRow.appendChild(nameHeader);
|
headerRow.appendChild(nameHeader);
|
||||||
|
|
||||||
|
const spacerHeader = document.createElement('th');
|
||||||
|
spacerHeader.classList.add('spacer-column');
|
||||||
|
headerRow.appendChild(spacerHeader);
|
||||||
|
|
||||||
itemsListTable.appendChild(headerRow);
|
itemsListTable.appendChild(headerRow);
|
||||||
},
|
},
|
||||||
function listSport(sport, row) {
|
function listSport(sport, row) {
|
||||||
const nameCell = document.createElement('td');
|
const nameCell = document.createElement('td');
|
||||||
nameCell.textContent = sport.name;
|
nameCell.textContent = sport.name;
|
||||||
row.appendChild(nameCell);
|
row.appendChild(nameCell);
|
||||||
|
|
||||||
|
const spacerCell = document.createElement('td');
|
||||||
|
row.appendChild(spacerCell);
|
||||||
},
|
},
|
||||||
async function addSport() {
|
async function addSport() {
|
||||||
//
|
//
|
||||||
|
@ -97,6 +111,10 @@ CATEGORIES.push(new Category(
|
||||||
|
|
||||||
const genderHeader = document.createElement('th');
|
const genderHeader = document.createElement('th');
|
||||||
headerRow.appendChild(genderHeader);
|
headerRow.appendChild(genderHeader);
|
||||||
|
|
||||||
|
const spacerHeader = document.createElement('th');
|
||||||
|
spacerHeader.classList.add('spacer-column');
|
||||||
|
headerRow.appendChild(spacerHeader);
|
||||||
|
|
||||||
const sportHeader = document.createElement('th');
|
const sportHeader = document.createElement('th');
|
||||||
sportHeader.textContent = "Sport";
|
sportHeader.textContent = "Sport";
|
||||||
|
@ -114,6 +132,9 @@ CATEGORIES.push(new Category(
|
||||||
genderCell.textContent = gender;
|
genderCell.textContent = gender;
|
||||||
row.appendChild(genderCell);
|
row.appendChild(genderCell);
|
||||||
|
|
||||||
|
const spacerCell = document.createElement('td');
|
||||||
|
row.appendChild(spacerCell);
|
||||||
|
|
||||||
const sportCell = document.createElement('td');
|
const sportCell = document.createElement('td');
|
||||||
Data.getSportName(division.sportID)
|
Data.getSportName(division.sportID)
|
||||||
.then(data => sportCell.textContent = data);
|
.then(data => sportCell.textContent = data);
|
||||||
|
@ -141,6 +162,10 @@ CATEGORIES.push(new Category(
|
||||||
const nameHeader = document.createElement('th');
|
const nameHeader = document.createElement('th');
|
||||||
nameHeader.textContent = "Name";
|
nameHeader.textContent = "Name";
|
||||||
headerRow.appendChild(nameHeader);
|
headerRow.appendChild(nameHeader);
|
||||||
|
|
||||||
|
const spacerHeader = document.createElement('th');
|
||||||
|
spacerHeader.classList.add('spacer-column');
|
||||||
|
headerRow.appendChild(spacerHeader);
|
||||||
|
|
||||||
const sportHeader = document.createElement('th');
|
const sportHeader = document.createElement('th');
|
||||||
sportHeader.textContent = "Sport";
|
sportHeader.textContent = "Sport";
|
||||||
|
@ -153,6 +178,9 @@ CATEGORIES.push(new Category(
|
||||||
nameCell.textContent = team.name;
|
nameCell.textContent = team.name;
|
||||||
row.appendChild(nameCell);
|
row.appendChild(nameCell);
|
||||||
|
|
||||||
|
const spacerCell = document.createElement('td');
|
||||||
|
row.appendChild(spacerCell);
|
||||||
|
|
||||||
const sportCell = document.createElement('td');
|
const sportCell = document.createElement('td');
|
||||||
Data.getSportName(team.sportID)
|
Data.getSportName(team.sportID)
|
||||||
.then(data => sportCell.textContent = data);
|
.then(data => sportCell.textContent = data);
|
||||||
|
@ -184,6 +212,10 @@ CATEGORIES.push(new Category(
|
||||||
const scoreHeader = document.createElement('th');
|
const scoreHeader = document.createElement('th');
|
||||||
headerRow.appendChild(scoreHeader);
|
headerRow.appendChild(scoreHeader);
|
||||||
|
|
||||||
|
const spacerHeader = document.createElement('th');
|
||||||
|
spacerHeader.classList.add('spacer-column');
|
||||||
|
headerRow.appendChild(spacerHeader);
|
||||||
|
|
||||||
const sportNameHeader = document.createElement('th');
|
const sportNameHeader = document.createElement('th');
|
||||||
sportNameHeader.textContent = "Sport";
|
sportNameHeader.textContent = "Sport";
|
||||||
headerRow.appendChild(sportNameHeader);
|
headerRow.appendChild(sportNameHeader);
|
||||||
|
@ -214,11 +246,14 @@ CATEGORIES.push(new Category(
|
||||||
team2ScoreSpan.textContent = game.team2Score;
|
team2ScoreSpan.textContent = game.team2Score;
|
||||||
scoresCell.appendChild(team2ScoreSpan);
|
scoresCell.appendChild(team2ScoreSpan);
|
||||||
row.appendChild(scoresCell);
|
row.appendChild(scoresCell);
|
||||||
|
|
||||||
|
const spacerCell = document.createElement('td');
|
||||||
|
row.appendChild(spacerCell);
|
||||||
|
|
||||||
const sportCell = document.createElement('td');
|
const sportCell = document.createElement('td');
|
||||||
const sportSpan = document.createElement('span');
|
const sportSpan = document.createElement('span');
|
||||||
const divisionSpan = document.createElement('span');
|
const divisionSpan = document.createElement('span');
|
||||||
divisionSpan.classList.add('division-span');
|
divisionSpan.classList.add('flat-content');
|
||||||
const divisionNameSpan = document.createElement('span');
|
const divisionNameSpan = document.createElement('span');
|
||||||
const divisionGenderSpan = document.createElement('span');
|
const divisionGenderSpan = document.createElement('span');
|
||||||
divisionSpan.appendChild(divisionNameSpan);
|
divisionSpan.appendChild(divisionNameSpan);
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
.flat-content {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spacer-column {
|
||||||
|
width: 100%;
|
||||||
|
}
|
Reference in New Issue