More styling added for table

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 */
+    }
+}
+    

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;

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
+    });
+});

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>

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>