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

CSS styling that rearranges containers added to club page

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-15 19:06:04 -06:00
parent 335f7ef403
commit c71866cceb
2 changed files with 102 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,27 +1,6 @@
#club-page-body { #club-page-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
}
#club-page-body {
padding: 50px;
}
#club-crest {
text-align: center;
}
#club-area-flag-row {
text-align: center;
}
#club-area-flag {
width : 150px;
}
#club-players-container {
padding: 30px;
} }
#club-information-container { #club-information-container {
@@ -40,6 +19,17 @@
/* Add any other styling you need for the club information container */ /* Add any other styling you need for the club information container */
} }
#club-page-contents-container {
display: flex;
flex-direction: row;
}
#club-players-container {
}
#club-information-container::after { #club-information-container::after {
content: ''; content: '';
position: absolute; position: absolute;

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

@@ -7,111 +7,112 @@
<img id="league-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag"> <img id="league-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
</div> </div>
<!-- Container on Left Side containing Club History --> <div id="club-page-contents-container" class="information-container">
<div id="club-history-container" class="information-container">
<!-- Container for Club Information --> <!-- Container on Left Side containing Club History -->
<div class="information-container" id="club-Attributes-container"> <div id="club-history-container" class="information-container">
<h2>Information</h2> <!-- Container for Club Information -->
<div class="information-container" id="club-Attributes-container">
<!-- Club Information --> <h2>Information</h2>
<ul id="scorers-list"></ul>
<table id="club-information-table" class="table">
<tbody>
<!-- Club Address Container --> <!-- Club Information -->
<tr> <table id="club-information-table" class="table">
<td> <tbody>
<span style="font-weight: bold;">Club Address:</span><br>
{{club.address}}
</td>
</tr>
<!-- Club Foundation Container --> <!-- Club Address Container -->
<tr> <tr>
<td> <td>
<span style="font-weight: bold;">Founded</span><br> <span style="font-weight: bold;">Club Address:</span><br>
{{club.founded}} {{club.address}}
</td> </td>
</tr> </tr>
<!-- Manager Information Table --> <!-- Club Foundation Container -->
<tr> <tr>
<td> <td>
<span style="font-weight: bold;">Manager</span><br> <span style="font-weight: bold;">Founded</span><br>
<span>Name: {{club.coach.name}}</span><br> {{club.founded}}
<span>Nationality: {{club.coach.nationality}}</span><br> </td>
<span>DOB: {{club.coach.dateOfBirth}}</span><br> </tr>
<span>contract start: {{club.coach.contract.start}}</span><br>
<span>contract end: {{club.coach.contract.until}}</span><br>
</td>
</tr>
</tbody> <!-- Manager Information Table -->
</table> <tr>
<td>
<span style="font-weight: bold;">Manager</span><br>
<span>Name: {{club.coach.name}}</span><br>
<span>Nationality: {{club.coach.nationality}}</span><br>
<span>DOB: {{club.coach.dateOfBirth}}</span><br>
<span>contract start: {{club.coach.contract.start}}</span><br>
<span>contract end: {{club.coach.contract.until}}</span><br>
</td>
</tr>
</div> <!-- End of Club History Container --> </tbody>
</table>
</div> <!-- End of Club History Container -->
<!-- Container to Display Club's Current Competitions -->
<div class="club-current-competitions-container">
<h2>Competitions</h2>
<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> <!-- End of Club Competitions Container -->
<!-- Container to Display Club's Current Competitions --> </div>
<div class="club-current-competitions-container">
<h2>Competitions</h2> <!-- Container on Right Side containing Club Stats -->
<div id="club-stats-and-players-container" class="stats-container">
<ul id="competitions-list"></ul> <!-- Club Player Container -->
<table id="players-table" class="table"> <div id="club-players-container" class="container">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each club.runningCompetitions}}
<tr>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div> <!-- End of Club Competitions Container --> <h2>Players</h2>
<table id="players-table" class="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> <!-- End of Club Stats Container -->
</div> </div>
<!-- Container on Right Side containing Club Stats -->
<div id="club-stats-and-players-container" class="stats-container">
<!-- Club Player Container -->
<div id="club-players-container" class="container">
<h2>Players</h2>
<ul id="players-list"></ul>
<table id="players-table" class="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> <!-- End of Club Stats Container -->
</div> </div>