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

Styling added to league table

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-14 16:46:48 -06:00
parent 4cf078cca9
commit 87551a26af
4 changed files with 63 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
#league-page-body {
display: flex;
flex-direction: column;
width: 100%;
width: 100v;
}
#league-information-container {
@@ -12,7 +12,7 @@
padding: 10px 20px; /* 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);
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
display: flex; /* Use flexbox for layout */
align-items: center; /* Center content vertically */
@@ -51,10 +51,9 @@
#league-stats-container {
width: 100%;
display: flex;
flex: 1;
}
#league-table-and-information-container .container {
#table-stats-container, #top-scorers-stats-container {
margin: 0 10px;
margin-bottom: 20px;
padding: 15px;
@@ -64,6 +63,11 @@
border: 1px solid gray;
border-radius: 8px;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.4);
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);
}

22
ProjectSourceCode/src/resources/css/league-pages/league-table.css
View File

@@ -1,7 +1,9 @@
#league-table-container {
width: 60%;
#league-table-and-information-container {
width: 50%;
justify-content: center;
align-items: center;
transition: transform 0.3s ease; /* Add smooth transition effect */
}
#standings-table {
@@ -9,6 +11,12 @@
padding: 15px;
}
#club-logo-row {
width: 20px;
}
#table-club-logo {
width: 20px;
margin-right: 5px;
@@ -26,9 +34,15 @@
/* Define styles for odd and even rows */
#standings-table tbody tr:nth-child(odd) {
background-color: #f2f2f2; /* Light gray for odd rows */
background-color: #f7f6f6; /* Light gray for odd rows */
}
#standings-table tbody tr:nth-child(even) {
background-color: #ffffff; /* White for even rows */
}
}
/* Add hover effect to table rows */
#standings-table tbody tr:hover {
border: 1px solid lightgray;
border-radius: 10px;
}

11
ProjectSourceCode/src/resources/css/league-pages/top-scorers.css
View File

@@ -1,10 +1,15 @@
#top-scorers-container {
flex: 1;
background-color: #dcdcdc; /* Example background color */
width: 40%;
/* Add any other styling you need for the top scorers container */
}
#top-scorers-container img {
width: 25px;
width: 35px;
margin-right: 20px;
}
#goals-column {
text-align: center;
font-size: 20px;
font-weight: bold;
}

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

@@ -53,29 +53,34 @@
<!-- Container to display top scorers for league <- Split 50% -->
<div id="top-scorers-container" class="container">
<h2>Top Scorers</h2>
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Club</th>
<th>GP</th>
<th>Goals</th>
</tr>
</thead>
<tbody>
{{#each topScorers.scorers}}
<tr>
<td><img src="{{team.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
<td>{{player.player_name}}</td>
<td>{{team.team_name}}</td>
<td>{{games_played}}</td>
<td>{{goals}}</td>
</tr>
{{/each}}
</tbody>
</table>
<div id="top-scorers-header-container" class="header">
<h2>Top Scorers</h2>
</div>
<div id="top-scorers-stats-container" class="container">
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Club</th>
<th>GP</th>
<th>Goals</th>
</tr>
</thead>
<tbody>
{{#each topScorers.scorers}}
<tr>
<td><img src="{{team.team_crest}}" alt="{{table.team_name}} Crest" id="table-logo"></td>
<td>{{player.player_name}}</td>
<td>{{team.team_name}}</td>
<td>{{games_played}}</td>
<td id="goals-column">{{goals}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>