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

Changes to league-pages.hbs to make individual elements more clear

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-15 17:05:19 -06:00
parent e232b9bd37
commit 18a18cebf8
6 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -96,7 +96,7 @@
}
/* Styling for Standings and Top Scorers Cards */
#table-stats-container, #top-scorers-stats-container
#league-table-stats-container, #league-top-scorers-stats-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;

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

@@ -23,13 +23,13 @@
*/
/* Container for Table */
#table-stats-container
#league-table-stats-container
{
width: 100%;
}
/* Table that holds all the standing information */
#standings-table
#league-standings-table
{
width: 100%;
padding: 15px;
@@ -60,11 +60,11 @@
*/
/* Club Logo Column in Table Style */
#club-logo-column {
#league-table-club-logo-column {
width: 25px;
/* Club Logo Style */
#table-club-logo
#league-table-club-logo
{
width: 25px;
margin-right: 5px;
@@ -74,14 +74,14 @@
}
/* Club Name Column in Table Style */
#club-name-column
#league-table-club-name-column
{
font-weight: 500;
cursor: pointer;
}
/* Points Column in Table Style */
#points-column
#league-table-points-column
{
font-weight: bolder;
}
@@ -93,20 +93,20 @@
*/
/* Add hover effect to table rows */
#standings-table tbody tr:hover
#league-standings-table tbody tr:hover
{
/* Create border around row on hover */
border: 1px solid lightgray;
border-radius: 10px;
/* Make club logo larger on hover */
#table-club-logo
#league-table-club-logo
{
width: 32px;
}
/* Undeline club name on hover */
#club-name-column
#league-table-club-name-column
{
text-decoration: underline; /* Add underline effect */
}

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

@@ -4,12 +4,12 @@
=================================
*/
#top-scorers-container
#league-top-scorers-container
{
width: 40%;
}
#top-scorers-stats-container {
#league-top-scorers-stats-container {
/* Table Header Styling */
th
@@ -35,21 +35,21 @@
===========================
*/
#goals-column
#league-top-scorers-goals-column
{
text-align: center;
font-size: 20px;
font-weight: bolder;
}
#top-scorers-logo
#league-top-scorers-logo
{
width: 25px;
margin: 0 15px;
cursor: pointer;
}
#player-name-column
#league-top-scorers-player-name-column
{
font-size: 14px;
@@ -57,7 +57,7 @@
padding-right: 15px;
}
#club-name-column
#league-top-scorers-club-name-column
{
padding-right: 15px;
}
@@ -68,16 +68,16 @@
==============================================================
*/
#top-scorers-stats-container tbody tr:hover
#league-top-scorers-stats-container tbody tr:hover
{
border: 1px solid lightgray;
#top-scorers-logo {
#league-top-scorers-logo {
width: 32px;
}
#club-name-column {
#league-top-scorers-player-name-column {
text-decoration: underline;
}
}
@@ -89,7 +89,7 @@
*/
@media (max-width: 1230px) {
#top-scorers-container {
#league-top-scorers-logo {
align-items: center;
width: 75%;
}

45
ProjectSourceCode/src/views/pages/clubs-page.hbs
View File

@@ -7,24 +7,7 @@
<div class="stats-container">
<h2>Competitions</h2>
<ul id="competitions-list"></ul>
<table id="players-table" class = "table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each club.runningCompetitions}}
<tr>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
@@ -110,3 +93,29 @@
</table>
</div>
<!-- Container to Display Club's Current Competitions -->
<div class="club-current-competitions-container">
<h2>Competitions</h2>
<ul id="competitions-list"></ul>
<table id="players-table" class="table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each club.runningCompetitions}}
<tr>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>

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

@@ -14,13 +14,13 @@
<div id="league-table-container" class="stats-container">
<!-- Put header above table container -->
<div id="table-header-container" class="header">
<div id="league-table-header-container" class="header">
<h2>Table</h2>
</div>
<!-- Container containing all league table stats -->
<div id="table-stats-container" class="stats-container">
<table id="standings-table">
<div id="league-table-stats-container" class="stats-container">
<table id="league-standings-table">
<thead>
<tr>
<th>#</th>
@@ -38,14 +38,14 @@
{{#each league.standings}}
<tr>
<td>{{table.league_position}}</td>
<td id="club-logo-column"><img id="table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
<td><span id="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
<td id="league-table-club-logo-column"><img id="league-table-club-logo" clubID="{{table.team_id}}" src="{{table.team_crest}}" alt="{{table.team_name}} Crest"></td>
<td><span id="league-table-club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
<td>{{games_played}}</td>
<td>{{wins}}</td>
<td>{{losses}}</td>
<td>{{draws}}</td>
<td id="goal-difference-column">{{goal_difference}}</td>
<td id="points-column">{{points}}</td>
<td id="league-table-goal-difference-column">{{goal_difference}}</td>
<td id="league-table-points-column">{{points}}</td>
</tr>
{{/each}}
</tbody>
@@ -54,12 +54,12 @@
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div id="top-scorers-container" class="stats-container">
<div id="top-scorers-header-container" class="header">
<div id="league-top-scorers-container" class="stats-container">
<div id="league-top-scorers-header-container" class="header">
<h2>Top Scorers</h2>
</div>
<div id="top-scorers-stats-container" class="stats-container">
<div id="league-top-scorers-stats-container" class="stats-container">
<table>
<thead>
<tr>
@@ -73,10 +73,10 @@
<tbody>
{{#each topScorers.scorers}}
<tr id="top-scorers-row">
<td id="goals-column">{{goals}}</td>
<td><img id="top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
<td id="player-name-column">{{player.player_name}}</td>
<td id="club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
<td id="league-top-scorers-goals-column">{{goals}}</td>
<td><img id="league-top-scorers-logo" clubID="{{team.team_id}}" src="{{team.team_crest}}" alt="{{table.team_name}} Crest"></img></td>
<td id="league-top-scorers-player-name-column">{{player.player_name}}</td>
<td id="league-top-scorers-club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
<td>{{games_played}}</td>
</tr>
{{/each}}

2
ProjectSourceCode/src/views/partials/head.hbs
View File

@@ -25,7 +25,7 @@
<!-- League Page Stylesheets -->
<link rel="stylesheet" type="text/css" href="/css/league-pages/league-page.css">
<link rel="stylesheet" type="text/css" href="/css/league-pages/league-table.css">
<link rel="stylesheet" type="text/css" href="/css/league-pages/top-scorers.css">
<link rel="stylesheet" type="text/css" href="/css/league-pages/league-top-scorers.css">
<!-- League Page Stylesheets -->
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css">