From 2f0b12663a971ba5103ff5db1b58578a8fc26205 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Tue, 16 Apr 2024 13:22:40 -0600
Subject: [PATCH] More changes to club page. Cards and Headers are now mostly
 split

---
 .../css/club-pages/club-information-card.css  |   7 +-
 .../resources/css/club-pages/club-page.css    |   4 +-
 .../club-players-and-stats-card.css           |  25 ++++
 .../css/league-pages/league-table.css         |   8 +-
 .../src/views/pages/clubs-page.hbs            | 116 +++++++++---------
 5 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css b/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
index fbd364c..125f994 100644
--- a/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-information-card.css
@@ -1,4 +1,7 @@
-#club-history-container {
-    width: 20%;
+#club-information-container {
     height: fit-content;
+    width: 20%;
+
+    display: flex;
+    flex-direction: column;
 }
diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-page.css b/ProjectSourceCode/src/resources/css/club-pages/club-page.css
index ce11aca..5a7d046 100644
--- a/ProjectSourceCode/src/resources/css/club-pages/club-page.css
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-page.css
@@ -10,7 +10,7 @@
 =================================
 */
 
-#club-information-container {
+#club-header-container {
     height: 100px;
     width: fit-content;
     margin: 20px;
@@ -76,7 +76,7 @@
 }
 
 /* Styling for Standings and Top Scorers Cards */
-#club-history-container, #club-stats-and-players-container 
+#club-information-table-container, #club-competitions-table-container, #club-stats-and-players-container 
 {
     /* --- POSITION CONTAINER --- */
     margin: 0 10px;
diff --git a/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css b/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
index 8e1b5b2..80001e3 100644
--- a/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
+++ b/ProjectSourceCode/src/resources/css/club-pages/club-players-and-stats-card.css
@@ -3,7 +3,32 @@
     width: 80%;
 }
 
+/*
+=================================
+      PLAYER TABLE CONTAINER
+=================================
+*/
+
 /* Table containing player information */
 #club-players-table {
     width: 100%;
+    padding: 15px;
+
+    /* Table Header Styling */
+    th 
+    {
+        border-bottom: 3px solid red; /* Add red bottom border */
+    }
+
+    /* Data in Row Style */
+    td
+    {
+        padding: 5px;
+    }
+
+    /* Every Odd Row in Table Style */
+    tbody tr:nth-child(odd) 
+    {
+        background-color: #d2d2d2; /* Light gray for odd rows */
+    }
 }
\ 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 6fa34c3..7603578 100644
--- a/ProjectSourceCode/src/resources/css/league-pages/league-table.css
+++ b/ProjectSourceCode/src/resources/css/league-pages/league-table.css
@@ -1,6 +1,6 @@
 /*
 =================================
-    TABLE ADN HEADER CONTAINER
+    TABLE AND HEADER CONTAINER
 =================================
 */
 
@@ -22,12 +22,6 @@
 =================================
 */
 
-/* Container for Table */
-#league-table-stats-container 
-{
-   width: 100%;    
-}
-
 /* Table that holds all the standing information */
 #league-standings-table 
 {
diff --git a/ProjectSourceCode/src/views/pages/clubs-page.hbs b/ProjectSourceCode/src/views/pages/clubs-page.hbs
index b6a2f0c..241b779 100644
--- a/ProjectSourceCode/src/views/pages/clubs-page.hbs
+++ b/ProjectSourceCode/src/views/pages/clubs-page.hbs
@@ -1,7 +1,7 @@
 <div id="club-page-body" class="page-container">
 
     <!-- Container on Top containing Club Information -->
-    <div id="club-information-container" class="information-container">
+    <div id="club-header-container" class="information-container">
         <img id="club-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
         <h1 id="club-title">{{club.name}}</h2>
         <img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
@@ -9,74 +9,78 @@
 
     <div id="club-page-contents-container" class="information-container">
 
-        <!-- Container on Left Side containing Club History -->
-        <div id="club-history-container" class="information-container">
+        <!-- Container on Left Side containing Club Information -->
+        <div id="club-information-container" class="information-container">
 
-            <!-- Container for Club Information -->
-            <div id="club-Attributes-container" class="information-container">
+            <!-- Container for Club History Information -->
+            <div id="club-history-container" class="information-container">
 
-                <h2>Information</h2>
+                <div id="club-information-table-header">
+                    <h2>Information</h2>
+                </div>
 
                 <!-- Club Information -->
-                <table id="club-information-table">
-                    <tbody>
+                <div id="club-information-table-container" class="information-container">
+                    <table id="club-information-table">
+                        <tbody>
+                            <!-- Club Address Container -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Club Address:</span><br>
+                                    {{club.address}}
+                                </td>
+                            </tr>
 
-                        <!-- Club Address Container -->
-                        <tr>
-                            <td>
-                                <span style="font-weight: bold;">Club Address:</span><br>
-                                {{club.address}}
-                            </td>
-                        </tr>
-
-                        <!-- Club Foundation Container -->
-                        <tr>
-                            <td>
-                                <span style="font-weight: bold;">Founded</span><br>
-                                {{club.founded}}
-                            </td>
-                        </tr>
-
-                        <!-- Manager Information Table -->
-                        <tr>
-                            <td>
-                                <span style="font-weight: bold;">Manager</span><br>
-                                <span>Name: {{club.coach.name}}</span><br>
-                                <span>Nationality: {{club.coach.nationality}}</span><br>
-                                <span>DOB: {{club.coach.dateOfBirth}}</span><br>
-                                <span>contract start: {{club.coach.contract.start}}</span><br>
-                                <span>contract end: {{club.coach.contract.until}}</span><br>
-                            </td>
-                        </tr>
-
-                    </tbody>
-                </table>
+                            <!-- Club Foundation Container -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Founded</span><br>
+                                    {{club.founded}}
+                                </td>
+                            </tr>
 
+                            <!-- Manager Information Table -->
+                            <tr>
+                                <td>
+                                    <span style="font-weight: bold;">Manager</span><br>
+                                    <span>Name: {{club.coach.name}}</span><br>
+                                    <span>Nationality: {{club.coach.nationality}}</span><br>
+                                    <span>DOB: {{club.coach.dateOfBirth}}</span><br>
+                                    <span>contract start: {{club.coach.contract.start}}</span><br>
+                                    <span>contract end: {{club.coach.contract.until}}</span><br>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div> <!-- End of Club History Table Container -->
             </div> <!-- End of Club History Container -->
-            
+
             <!-- Container to Display Club's Current Competitions -->
             <div id="club-current-competitions-container">
 
-                <h2>Competitions</h2>
-
-                <table id="players-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {{#each club.runningCompetitions}}
-                        <tr>
-                            <td>{{name}}</td>
-                        </tr>
-                        {{/each}}
-                    </tbody>
-                </table>
+                <div id="club-players-table-header">
+                    <h2>Competitions</h2>
+                </div>
 
+                <div id="club-competitions-table-container">
+                    <table id="club-competitions-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {{#each club.runningCompetitions}}
+                            <tr>
+                                <td>{{name}}</td>
+                            </tr>
+                            {{/each}}
+                        </tbody>
+                    </table>
+                </div> <!-- End of Club Competitions Table Container -->
             </div> <!-- End of Club Competitions Container -->
         
-        </div>
+        </div> <!-- End of Club Information Container (Left 20%) -->
 
         <!-- Container on Right Side containing Club Stats -->
         <div id="club-stats-and-players-container" class="stats-container">