diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-page.css b/ProjectSourceCode/src/resources/css/league-pages/league-page.css index 3f8f867..2ea7c3c 100644 --- a/ProjectSourceCode/src/resources/css/league-pages/league-page.css +++ b/ProjectSourceCode/src/resources/css/league-pages/league-page.css @@ -1,10 +1,30 @@ -#league-page-body { - display: flex; - flex-direction: column; - width: 100vh; +/* +============================================================== + OVERALL PAGE STYLES +============================================================== +*/ + +#league-page-body +{ + display: flex; /* Enable flexbox layout */ + flex-direction: column; /* Arrange child elements vertically */ + + width: 100%; /* Set the width to the full width of screen */ + padding: 30px; /* Create some distance between page boundries and elements */ } -#league-information-container { +/* +================================= + LEAGUE INFORMATION HEADER +================================= +*/ + +/* Stylization for League Information Header Card */ +#league-information-container +{ + display: flex; /* Enable flexbox layout */ + flex-direction: row; /* Arrange child elements horizontally */ + height: 100px; width: fit-content; margin: 20px; @@ -13,46 +33,52 @@ transform: skewX(-20deg); /* Skew the banner to create a triangular side */ box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); - display: flex; /* Use flexbox for layout */ + align-items: center; /* Center content vertically */ - - /* Add any other styling you need for the league information container */ } -#league-information-container::after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 8px; /* Width of the red strip */ - background-color: red; /* Red color */ - } + /* Adds Red Diagonal Strip at the end of the #league-information-container */ + #league-information-container::after + { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 8px; /* Width of the red strip */ + background-color: red; /* Red color */ + } -#league-logo { - margin: 0px 30px; - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - height: 80%; -} + /* Styling for League Logo in League Information Header */ + #league-logo + { + margin: 0px 30px; + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + height: 80%; + } -#league-title { - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - margin-right: 20px; -} + /* Styling for League Title in League Information Header */ + #league-title + { + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + margin-right: 20px; + } -#league-flag { + /* Styling for FLag in League Information Header */ + #league-flag + { + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + height: 20px; + margin-right: 200px; + } - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - height: 20px; - margin-right: 200px; -} - -#league-stats-containers { - width: 100%; - display: flex; - flex-wrap: wrap; /* Allow items to wrap onto multiple lines */ -} +/* +============================================= + CARDS IN PAGE BODY +============================================= +*/ +/* Styling for Standings and Top Scorers Cards */ #table-stats-container, #top-scorers-stats-container { margin: 0 10px; margin-bottom: 20px; diff --git a/ProjectSourceCode/src/views/pages/leagues-page.hbs b/ProjectSourceCode/src/views/pages/leagues-page.hbs index 31c39d0..6b50d2a 100644 --- a/ProjectSourceCode/src/views/pages/leagues-page.hbs +++ b/ProjectSourceCode/src/views/pages/leagues-page.hbs @@ -1,4 +1,4 @@ -