Tweak table layout

main
sudoer777 2021-11-22 17:13:29 -07:00
parent 54bef98312
commit 4d5669dab7
2 changed files with 51 additions and 1 deletions

View File

@ -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);

View File

@ -0,0 +1,15 @@
.flat-content {
flex-direction: row;
}
th {
text-align: left;
}
td {
white-space: nowrap;
}
.spacer-column {
width: 100%;
}