From f944e38c023464305309c491e39afcdcdae3dfba Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Sun, 14 Apr 2024 20:07:38 -0600
Subject: [PATCH] More comments added to league-page.css

---
 .../css/league-pages/league-page.css          | 38 ++++++++++++-------
 .../src/views/pages/leagues-page.hbs          |  4 +-
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-page.css b/ProjectSourceCode/src/resources/css/league-pages/league-page.css
index 55d057e..bef94de 100644
--- a/ProjectSourceCode/src/resources/css/league-pages/league-page.css
+++ b/ProjectSourceCode/src/resources/css/league-pages/league-page.css
@@ -10,7 +10,7 @@
     width: 100%; /* Set the width to the full width of screen */
     padding: 30px; /* Create some distance between page boundries and elements */
 
-    /* --- FORMAT CHILD ITEMS --- */
+    /* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */
     display: flex; /* Enable flexbox layout */
     flex-direction: column; /* Arrange child elements vertically */
 }
@@ -38,7 +38,7 @@
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
 
-    /* --- FORMAT CHILD ITEMS --- */
+    /* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */
     display: flex; /* Enable flexbox layout */
     flex-direction: row; /* Arrange child elements horizontally */
 }
@@ -91,29 +91,39 @@
 */
 
 /* Styling for Standings and Top Scorers Cards */
-#table-stats-container, #top-scorers-stats-container {
+#table-stats-container, #top-scorers-stats-container 
+{
+    /* --- POSITION CONTAINER --- */
     margin: 0 10px;
     margin-bottom: 20px;
+
+    /* --- SIZE CONTAINER --- */
     padding: 15px;
 
+    /* --- STYLE CONTAINER --- */
     background-color: #ffffff; /* Example background color */
-
     border: 1px solid gray;
     border-radius: 8px;
-
     box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
-    /* Add any other styling you need for the league table container */
 }
 
-#table-stats-container:hover, #top-scorers-stats-container:hover {
-    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: 950px) {
-    #league-stats-containers {
-        flex-direction: column; /* Change flex direction to column */
+    /* Hover Styling for Standings and Top Scorers Cards */
+    #table-stats-container:hover, #top-scorers-stats-container:hover 
+    {
+        transform: scale(1.01); /* Scale the row by 1.1 on hover */
+        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
     }
+
+/*
+==============================================================
+                 DYNAMIC PAGE WIDTH STYLES
+==============================================================
+*/
+
+/* Width of Screen is Less Than 950px */
+@media (max-width: 950px) 
+{
+    
 }
 
     
\ No newline at end of file
diff --git a/ProjectSourceCode/src/views/pages/leagues-page.hbs b/ProjectSourceCode/src/views/pages/leagues-page.hbs
index 6b50d2a..5c4fbd0 100644
--- a/ProjectSourceCode/src/views/pages/leagues-page.hbs
+++ b/ProjectSourceCode/src/views/pages/leagues-page.hbs
@@ -1,7 +1,7 @@
-<div class="page-container" id="league-page-body">
+<div id="league-page-body" class="page-container">
 
     <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
-    <div class="container" id="league-information-container">
+    <div id="league-information-container" class="information-container">
         <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
         <h1 id="league-title">{{league.competition.league_name}}</h2>
         <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">