From 4d5669dab79a3b8b1be0320f762a0e93d978c0a0 Mon Sep 17 00:00:00 2001
From: sudoer777 <78781902+sudoer777@users.noreply.github.com>
Date: Mon, 22 Nov 2021 17:13:29 -0700
Subject: [PATCH] Tweak table layout

---
 public/scripts/manage.js      | 37 ++++++++++++++++++++++++++++++++++-
 public/stylesheets/manage.css | 15 ++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 public/stylesheets/manage.css

diff --git a/public/scripts/manage.js b/public/scripts/manage.js
index b609171..80bc534 100644
--- a/public/scripts/manage.js
+++ b/public/scripts/manage.js
@@ -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);
diff --git a/public/stylesheets/manage.css b/public/stylesheets/manage.css
new file mode 100644
index 0000000..95ecca1
--- /dev/null
+++ b/public/stylesheets/manage.css
@@ -0,0 +1,15 @@
+.flat-content {
+    flex-direction: row;
+}
+
+th {
+    text-align: left;
+}
+
+td {
+    white-space: nowrap;
+}
+
+.spacer-column {
+    width: 100%;
+}
\ No newline at end of file