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

League table imported in

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-13 17:11:28 -06:00
parent c35f242d27
commit 333d23db78
2 changed files with 55 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ProjectSourceCode/src/resources/css/league-page/league-page.css
View File

@@ -6,11 +6,29 @@
#league-information-container {
height: 100px;
background-color: #f0f0f0; /* Example background color */
display: flex;
margin: 20px;
background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
padding: 10px; /* Adjust padding as needed */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */
cursor: pointer; /* Change cursor to pointer on hover */
box-shadow: 0px 3px 4px 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-logo {
margin: 0px 10px;
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 */
}
#league-stats-container {
display: flex;
flex: 1;
@@ -22,6 +40,20 @@
/* Add any other styling you need for the league table container */
}
#table-logo {
width: 20px;
margin: 0;
}
#standings-table tbody tr.even {
background-color: #f2f2f2;
}
#standings-table tbody tr.odd {
background-color: #a2a1a1;
}
#top-scorers-container {
flex: 1;
background-color: #dcdcdc; /* Example background color */

31
ProjectSourceCode/src/views/pages/league-page.hbs
View File

@@ -2,8 +2,8 @@
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<div class="container" id="league-information-container">
<img src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h2>{{league.competition.league_name}}</h2>
<img id="league-logo" src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h1 id="league-title">{{league.competition.league_name}}</h2>
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
@@ -13,15 +13,24 @@
<div class="container" id="league-table-container">
<h3>Standings</h3>
<ol>
{{#each league.standings}}
<li>
<span>Position: {{table.league_position}}</span>
<span>Team Name: {{table.team_name}}</span>
<img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
</li>
{{/each}}
</ol>
<table id="standings-table">
<thead>
<tr>
<th>#</th>
<th></th>
<th>Club</th>
</tr>
</thead>
<tbody>
{{#each league.standings}}
<tr>
<td>{{table.league_position}}</td>
<td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
<td>{{table.team_name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>