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

38
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 */
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)
{
}

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 -->
<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">