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