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 */ /* 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 --- */ /* --- POSITION CONTAINER --- */
margin: 0 10px; margin: 0 10px;

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

@@ -23,13 +23,13 @@
*/ */
/* Container for Table */ /* Container for Table */
#table-stats-container #league-table-stats-container
{ {
width: 100%; width: 100%;
} }
/* Table that holds all the standing information */ /* Table that holds all the standing information */
#standings-table #league-standings-table
{ {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
@@ -60,11 +60,11 @@
*/ */
/* Club Logo Column in Table Style */ /* Club Logo Column in Table Style */
#club-logo-column { #league-table-club-logo-column {
width: 25px; width: 25px;
/* Club Logo Style */ /* Club Logo Style */
#table-club-logo #league-table-club-logo
{ {
width: 25px; width: 25px;
margin-right: 5px; margin-right: 5px;
@@ -74,14 +74,14 @@
} }
/* Club Name Column in Table Style */ /* Club Name Column in Table Style */
#club-name-column #league-table-club-name-column
{ {
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
} }
/* Points Column in Table Style */ /* Points Column in Table Style */
#points-column #league-table-points-column
{ {
font-weight: bolder; font-weight: bolder;
} }
@@ -93,20 +93,20 @@
*/ */
/* Add hover effect to table rows */ /* Add hover effect to table rows */
#standings-table tbody tr:hover #league-standings-table tbody tr:hover
{ {
/* Create border around row on hover */ /* Create border around row on hover */
border: 1px solid lightgray; border: 1px solid lightgray;
border-radius: 10px; border-radius: 10px;
/* Make club logo larger on hover */ /* Make club logo larger on hover */
#table-club-logo #league-table-club-logo
{ {
width: 32px; width: 32px;
} }
/* Undeline club name on hover */ /* Undeline club name on hover */
#club-name-column #league-table-club-name-column
{ {
text-decoration: underline; /* Add underline effect */ 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%; width: 40%;
} }
#top-scorers-stats-container { #league-top-scorers-stats-container {
/* Table Header Styling */ /* Table Header Styling */
th th
@@ -35,21 +35,21 @@
=========================== ===========================
*/ */
#goals-column #league-top-scorers-goals-column
{ {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bolder; font-weight: bolder;
} }
#top-scorers-logo #league-top-scorers-logo
{ {
width: 25px; width: 25px;
margin: 0 15px; margin: 0 15px;
cursor: pointer; cursor: pointer;
} }
#player-name-column #league-top-scorers-player-name-column
{ {
font-size: 14px; font-size: 14px;
@@ -57,7 +57,7 @@
padding-right: 15px; padding-right: 15px;
} }
#club-name-column #league-top-scorers-club-name-column
{ {
padding-right: 15px; 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; border: 1px solid lightgray;
#top-scorers-logo { #league-top-scorers-logo {
width: 32px; width: 32px;
} }
#club-name-column { #league-top-scorers-player-name-column {
text-decoration: underline; text-decoration: underline;
} }
} }
@@ -89,7 +89,7 @@
*/ */
@media (max-width: 1230px) { @media (max-width: 1230px) {
#top-scorers-container { #league-top-scorers-logo {
align-items: center; align-items: center;
width: 75%; 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> </div>
@@ -110,3 +93,29 @@
</table> </table>
</div> </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"> <div id="league-table-container" class="stats-container">
<!-- Put header above table container --> <!-- Put header above table container -->
<div id="table-header-container" class="header"> <div id="league-table-header-container" class="header">
<h2>Table</h2> <h2>Table</h2>
</div> </div>
<!-- Container containing all league table stats --> <!-- Container containing all league table stats -->
<div id="table-stats-container" class="stats-container"> <div id="league-table-stats-container" class="stats-container">
<table id="standings-table"> <table id="league-standings-table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@@ -38,14 +38,14 @@
{{#each league.standings}} {{#each league.standings}}
<tr> <tr>
<td>{{table.league_position}}</td> <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 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="club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td> <td><span id="league-table-club-name-column" clubID="{{table.team_id}}">{{table.team_name}}</span></td>
<td>{{games_played}}</td> <td>{{games_played}}</td>
<td>{{wins}}</td> <td>{{wins}}</td>
<td>{{losses}}</td> <td>{{losses}}</td>
<td>{{draws}}</td> <td>{{draws}}</td>
<td id="goal-difference-column">{{goal_difference}}</td> <td id="league-table-goal-difference-column">{{goal_difference}}</td>
<td id="points-column">{{points}}</td> <td id="league-table-points-column">{{points}}</td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
@@ -54,12 +54,12 @@
</div> </div>
<!-- Container to display top scorers for league <- Split 50% --> <!-- Container to display top scorers for league <- Split 50% -->
<div id="top-scorers-container" class="stats-container"> <div id="league-top-scorers-container" class="stats-container">
<div id="top-scorers-header-container" class="header"> <div id="league-top-scorers-header-container" class="header">
<h2>Top Scorers</h2> <h2>Top Scorers</h2>
</div> </div>
<div id="top-scorers-stats-container" class="stats-container"> <div id="league-top-scorers-stats-container" class="stats-container">
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -73,10 +73,10 @@
<tbody> <tbody>
{{#each topScorers.scorers}} {{#each topScorers.scorers}}
<tr id="top-scorers-row"> <tr id="top-scorers-row">
<td id="goals-column">{{goals}}</td> <td id="league-top-scorers-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><img id="league-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="league-top-scorers-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-club-name-column" clubID="{{team.team_id}}">{{team.team_name}}</td>
<td>{{games_played}}</td> <td>{{games_played}}</td>
</tr> </tr>
{{/each}} {{/each}}

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

@@ -25,7 +25,7 @@
<!-- League Page Stylesheets --> <!-- 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-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/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 --> <!-- League Page Stylesheets -->
<link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css"> <link rel="stylesheet" type="text/css" href="/css/club-pages/club-page.css">