lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

More comments added to league-page.css

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-14 20:07:38 -06:00
parent 62dbf54385
commit f944e38c02
2 changed files with 26 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ProjectSourceCode/src/resources/css/league-pages/league-page.css
View File

@@ -10,7 +10,7 @@
width: 100%; /* Set the width to the full width of screen */ width: 100%; /* Set the width to the full width of screen */
padding: 30px; /* Create some distance between page boundries and elements */ 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 */ display: flex; /* Enable flexbox layout */
flex-direction: column; /* Arrange child elements vertically */ flex-direction: column; /* Arrange child elements vertically */
} }
@@ -38,7 +38,7 @@
transform: skewX(-20deg); /* Skew the banner to create a triangular side */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); 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 */ display: flex; /* Enable flexbox layout */
flex-direction: row; /* Arrange child elements horizontally */ flex-direction: row; /* Arrange child elements horizontally */
} }
@@ -91,29 +91,39 @@
*/ */
/* Styling for Standings and Top Scorers Cards */ /* 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: 0 10px;
margin-bottom: 20px; margin-bottom: 20px;
/* --- SIZE CONTAINER --- */
padding: 15px; padding: 15px;
/* --- STYLE CONTAINER --- */
background-color: #ffffff; /* Example background color */ background-color: #ffffff; /* Example background color */
border: 1px solid gray; border: 1px solid gray;
border-radius: 8px; border-radius: 8px;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5); 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 { /* 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 */ transform: scale(1.01); /* Scale the row by 1.1 on hover */
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); 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 */ DYNAMIC PAGE WIDTH STYLES
} ==============================================================
*/
/* Width of Screen is Less Than 950px */
@media (max-width: 950px)
{
} }

4
ProjectSourceCode/src/views/pages/leagues-page.hbs
View File

@@ -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 --> <!-- 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"> <img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="league-title">{{league.competition.league_name}}</h2> <h1 id="league-title">{{league.competition.league_name}}</h2>
<img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag"> <img id="league-flag" src="{{league.area.league_flag}}" alt="{{league.competition.league_name}} Flag">