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

69
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"> <img id="club-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
</div> </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 --> <!-- 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 --> <!-- 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"> <div id="club-information-table-header">
<h2>Information</h2> <h2>Information</h2>
</div> </div>
<!-- Club Information --> <!-- 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"> <table id="club-information-table">
<tbody> <tbody>
<!-- Club Address Container --> <!-- Club Address Container -->
@@ -56,13 +56,13 @@
</div> <!-- End of Club History Container --> </div> <!-- End of Club History Container -->
<!-- Container to Display Club's Current Competitions --> <!-- 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> <h2>Competitions</h2>
</div> </div>
<div id="club-competitions-table-container"> <div id="club-competitions-table-container" class="card-container">
<table id="club-competitions-table"> <table id="club-competitions-table">
<thead> <thead>
<tr> <tr>
@@ -83,35 +83,38 @@
</div> <!-- End of Club Information Container (Left 20%) --> </div> <!-- End of Club Information Container (Left 20%) -->
<!-- Container on Right Side containing Club Stats --> <!-- 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 --> <!-- Club Player Container -->
<div id="club-players-container" class="stats-container"> <div id="club-players-container" class="content-container">
<h2>Players</h2>
<table id="club-players-table"> <div id="club-players-table-header" class="content-container">
<thead> <h2>Players</h2>
<tr> </div>
<th>Name</th>
<th>Position</th> <div id="club-players-table-container" class="card-container">
<th>DOB</th> <table id="club-players-table">
<th>Nationality</th> <thead>
</tr> <tr>
</thead> <th>Name</th>
<tbody> <th>Position</th>
{{#each club.squad}} <th>DOB</th>
<tr> <th>Nationality</th>
<td>{{name}}</td> </tr>
<td>{{position}}</td> </thead>
<td>{{dateOfBirth}}</td> <tbody>
<td>{{nationality}}</td> {{#each club.squad}}
</tr> <tr>
{{/each}} <td>{{name}}</td>
</tbody> <td>{{position}}</td>
</table> <td>{{dateOfBirth}}</td>
<td>{{nationality}}</td>
</div> <!-- End of Club Player Table Container --> </tr>
{{/each}}
</tbody>
</table>
</div> <!-- End of Club Players Table Container -->
</div> <!-- End of Club Players Container -->
</div> <!-- End of Club Stats 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"> <div class="container mt-5" id="page-container">
<h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1> <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"> <div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League --> <!-- 🇬🇧 Premier League -->
<a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card"> <a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">