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

More changes to layout and code implementation on club page template and its CSS. All cards and their child container are now implemented with a corresponding class to their purpose. This make styling consistenly much easier and consistent

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-16 13:41:40 -06:00
parent 2f0b12663a
commit c5336b6bae
3 changed files with 39 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ProjectSourceCode/src/resources/css/club-pages/club-page.css
View File

@@ -31,7 +31,7 @@
*/
/* Adds Red Diagonal Strip at the end of the #club-information-container */
#club-information-container::after {
#club-header-container::after {
content: '';
position: absolute;
top: 0;
@@ -76,7 +76,7 @@
}
/* Styling for Standings and Top Scorers Cards */
#club-information-table-container, #club-competitions-table-container, #club-stats-and-players-container
.card-container
{
/* --- POSITION CONTAINER --- */
margin: 0 10px;

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

@@ -7,20 +7,20 @@
<img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
</div>
<div id="club-page-contents-container" class="information-container">
<div id="club-page-contents-container" class="page-content-container">
<!-- Container on Left Side containing Club Information -->
<div id="club-information-container" class="information-container">
<div id="club-information-container" class="page-content-container">
<!-- Container for Club History Information -->
<div id="club-history-container" class="information-container">
<div id="club-history-container" class="content-container">
<div id="club-information-table-header">
<h2>Information</h2>
</div>
<!-- Club Information -->
<div id="club-information-table-container" class="information-container">
<div id="club-information-table-container" class="card-container">
<table id="club-information-table">
<tbody>
<!-- Club Address Container -->
@@ -56,13 +56,13 @@
</div> <!-- End of Club History Container -->
<!-- Container to Display Club's Current Competitions -->
<div id="club-current-competitions-container">
<div id="club-competitions-container" class="content-container">
<div id="club-players-table-header">
<div id="club-competitions-table-header">
<h2>Competitions</h2>
</div>
<div id="club-competitions-table-container">
<div id="club-competitions-table-container" class="card-container">
<table id="club-competitions-table">
<thead>
<tr>
@@ -83,35 +83,38 @@
</div> <!-- End of Club Information Container (Left 20%) -->
<!-- Container on Right Side containing Club Stats -->
<div id="club-stats-and-players-container" class="stats-container">
<div id="club-stats-and-players-container" class="page-section-container">
<!-- Club Player Container -->
<div id="club-players-container" class="stats-container">
<div id="club-players-container" class="content-container">
<h2>Players</h2>
<div id="club-players-table-header" class="content-container">
<h2>Players</h2>
</div>
<table id="club-players-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>DOB</th>
<th>Nationality</th>
</tr>
</thead>
<tbody>
{{#each club.squad}}
<tr>
<td>{{name}}</td>
<td>{{position}}</td>
<td>{{dateOfBirth}}</td>
<td>{{nationality}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div> <!-- End of Club Player Table Container -->
<div id="club-players-table-container" class="card-container">
<table id="club-players-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>DOB</th>
<th>Nationality</th>
</tr>
</thead>
<tbody>
{{#each club.squad}}
<tr>
<td>{{name}}</td>
<td>{{position}}</td>
<td>{{dateOfBirth}}</td>
<td>{{nationality}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div> <!-- End of Club Players Table Container -->
</div> <!-- End of Club Players Container -->
</div> <!-- End of Club Stats Container -->

2
ProjectSourceCode/src/views/pages/home.hbs
View File

@@ -1,6 +1,6 @@
<div class="container mt-5" id="page-container">
<h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
<div class="card-container">
<div id="league-cards-container" class="page-section-container">
<div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League -->
<a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">