New table styling added

ProjectSourceCode/src/resources/css/league-pages/league-page.css

@@ -54,10 +54,12 @@
     flex: 1;
 }
 
-#league-stats-container .container {
+#league-table-and-information-container .container {
     margin: 0 10px;
+    margin-bottom: 20px;
+    padding: 15px;
 
-    background-color: #eaeaea; /* Example background color */
+    background-color: #ffffff; /* Example background color */
 
     border: 1px solid gray;
     border-radius: 8px;

ProjectSourceCode/src/resources/css/league-pages/league-table.css

@@ -6,14 +6,14 @@
 
 #standings-table {
     width: 100%;
-    padding: 5px;
+    padding: 15px;
 }
 
-#club-logo {
+#table-club-logo {
     width: 20px;
     margin-right: 5px;
     cursor: pointer;
-    transform: skewX(0deg); /* Skew the banner to create a triangular side */
+
 }
 
 #club-name {

ProjectSourceCode/src/resources/css/league-pages/top-scorers.css

@@ -4,3 +4,7 @@
     width: 40%;
     /* Add any other styling you need for the top scorers container */
 }
+
+#top-scorers-container img {
+    width: 25px;
+}

ProjectSourceCode/src/resources/routes/club-pages/redirect-to-club-url.js

@@ -1,5 +1,5 @@
 // Add click event listener to club logos
-document.querySelectorAll('#club-logo, #club-name').forEach(element => {
+document.querySelectorAll('#table-club-logo, #club-name').forEach(element => {
   element.addEventListener('click', (event) => {
       // Get the club ID from the clicked club logo's clubID attribute
       const clubId = element.getAttribute('clubID');

ProjectSourceCode/src/views/pages/leagues-page.hbs

@@ -11,9 +11,13 @@
     <div class="container" id="league-stats-container">
 
         <!-- Container to display league table <- split 50% -->
-        <div class="container" id="league-table-container">
+        <div class="container" id="league-table-and-information-container">
 
+            <div id="table-header-container" class="header">
                 <h2>Table</h2>
+            </div>
+            
+            <div id="table-stats-container" class="container">
                 <table id="standings-table">
                     <thead>
                         <tr>
@@ -32,7 +36,7 @@
                         {{#each league.standings}}
                         <tr>
                             <td>{{table.league_position}}</td>
-                        <td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" clubID="{{table.team_id}}"></td>
+                            <td id="club-logo-row"><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-club-logo" clubID="{{table.team_id}}"></td>
                             <td><span id="club-name" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
                             <td>{{games_played}}</td>
                             <td>{{wins}}</td>
@@ -44,31 +48,30 @@
                         {{/each}}
                     </tbody>
                 </table>
-
+            </div>
         </div>
 
         <!-- Container to display top scorers for league <- Split 50% -->
-        <div class="container" id="top-scorers-container">
+        <div id="top-scorers-container" class="container">
             <h2>Top Scorers</h2>
             <table>
                 <thead>
                     <tr>
-                        <th>Player Name</th>
+                        <th></th>
+                        <th>Name</th>
+                        <th>Club</th>
                         <th>GP</th>
                         <th>Goals</th>
-                        <th></th>
-                        <th>Team Name</th>
                     </tr>
                 </thead>
                 <tbody>
                     {{#each topScorers.scorers}}
                     <tr>
+                        <td><img src="{{team.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
                         <td>{{player.player_name}}</td>
+                        <td>{{team.team_name}}</td>
                         <td>{{games_played}}</td>
                         <td>{{goals}}</td>
-                        <td><img src="{{team.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
-                        <td>{{team.team_name}}</td>
-
                     </tr>
                     {{/each}}
                 </tbody>