From e4b44e05e3a77d573b0b1f4e17b272e828674c17 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Sun, 14 Apr 2024 17:30:20 -0600
Subject: [PATCH] More styling added for table

---
 .../src/resources/css/league-pages/league-page.css | 14 +++++++++++++-
 .../resources/css/league-pages/league-table.css    |  5 +++++
 .../js/league-page/change-goal-difference-color.js | 14 ++++++++++++++
 ProjectSourceCode/src/views/pages/leagues-page.hbs |  2 +-
 ProjectSourceCode/src/views/partials/footer.hbs    |  2 ++
 5 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js

diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-page.css b/ProjectSourceCode/src/resources/css/league-pages/league-page.css
index 6ca2bb0..112cfbf 100644
--- a/ProjectSourceCode/src/resources/css/league-pages/league-page.css
+++ b/ProjectSourceCode/src/resources/css/league-pages/league-page.css
@@ -11,7 +11,6 @@
     background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
     padding: 10px 20px; /* Adjust padding as needed */
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
-    cursor: pointer; /* Change cursor to pointer on hover */
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
 
     display: flex; /* Use flexbox for layout */
@@ -51,6 +50,7 @@
 #league-stats-containers {
     width: 100%;
     display: flex;
+    flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
 }
 
 #table-stats-container, #top-scorers-stats-container {
@@ -71,3 +71,15 @@
     transform: scale(1.01); /* Scale the row by 1.1 on hover */
     box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
 }
+
+@media (max-width: 1161px) {
+    #league-stats-container {
+        flex-direction: column;
+    }
+
+    #league-table-and-information-container,
+    #top-scorers-container {
+        width: 100%; /* Both containers take full width */
+    }
+}
+    
\ No newline at end of file
diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-table.css b/ProjectSourceCode/src/resources/css/league-pages/league-table.css
index 9348ab0..aa78a61 100644
--- a/ProjectSourceCode/src/resources/css/league-pages/league-table.css
+++ b/ProjectSourceCode/src/resources/css/league-pages/league-table.css
@@ -41,6 +41,11 @@
     background-color: #ffffff; /* White for even rows */
 }
 
+#points-column {
+
+    font-weight: bolder;
+}
+
 /* Add hover effect to table rows */
 #standings-table tbody tr:hover {
     border: 1px solid lightgray;
diff --git a/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js b/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js
new file mode 100644
index 0000000..2ae9de2
--- /dev/null
+++ b/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js
@@ -0,0 +1,14 @@
+// script.js
+document.addEventListener("DOMContentLoaded", function() {
+    var goalDifferenceCells = document.querySelectorAll("#standings-table tbody td:nth-child(8)"); // Selecting the cells in the goal_difference column
+
+    goalDifferenceCells.forEach(function(cell) {
+        var goalDifference = parseInt(cell.textContent);
+
+        if (goalDifference < 0) {
+            cell.style.color = "red"; // Change text color to red for negative goal difference
+        } else if (goalDifference > 0) {
+            cell.style.color = "green"; // Change text color to green for positive goal difference
+        } // If goal difference is 0, leave text color unchanged
+    });
+});
diff --git a/ProjectSourceCode/src/views/pages/leagues-page.hbs b/ProjectSourceCode/src/views/pages/leagues-page.hbs
index 2e5be74..cfd467b 100644
--- a/ProjectSourceCode/src/views/pages/leagues-page.hbs
+++ b/ProjectSourceCode/src/views/pages/leagues-page.hbs
@@ -43,7 +43,7 @@
                             <td>{{losses}}</td>
                             <td>{{draws}}</td>
                             <td>{{goal_difference}}</td>
-                            <td>{{points}}</td>
+                            <td id="points-column">{{points}}</td>
                         </tr>
                         {{/each}}
                     </tbody>
diff --git a/ProjectSourceCode/src/views/partials/footer.hbs b/ProjectSourceCode/src/views/partials/footer.hbs
index b04a4bc..a9a1901 100644
--- a/ProjectSourceCode/src/views/partials/footer.hbs
+++ b/ProjectSourceCode/src/views/partials/footer.hbs
@@ -14,6 +14,8 @@
         <script src="/routes/league-pages/redirect-to-league-url.js"></script>
 
         <!-- League Pages Scripts -->
+        <script src="/js/league-page/change-goal-difference-color.js"></script>
         <script src="/routes/club-pages/redirect-to-club-url.js"></script>
 
+
     </footer>
\ No newline at end of file