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 {
display: flex;
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 {
@@ -40,6 +19,17 @@
/* 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 {
content: '';
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">
</div>
<!-- Container on Left Side containing Club History -->
<div id="club-history-container" class="information-container">
<div id="club-page-contents-container" class="information-container">
<!-- Container for Club Information -->
<div class="information-container" id="club-Attributes-container">
<!-- Container on Left Side containing Club History -->
<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 -->
<ul id="scorers-list"></ul>
<table id="club-information-table" class="table">
<tbody>
<h2>Information</h2>
<!-- Club Address Container -->
<tr>
<td>
<span style="font-weight: bold;">Club Address:</span><br>
{{club.address}}
</td>
</tr>
<!-- Club Information -->
<table id="club-information-table" class="table">
<tbody>
<!-- Club Foundation Container -->
<tr>
<td>
<span style="font-weight: bold;">Founded</span><br>
{{club.founded}}
</td>
</tr>
<!-- Club Address Container -->
<tr>
<td>
<span style="font-weight: bold;">Club Address:</span><br>
{{club.address}}
</td>
</tr>
<!-- Manager Information 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>
<!-- Club Foundation Container -->
<tr>
<td>
<span style="font-weight: bold;">Founded</span><br>
{{club.founded}}
</td>
</tr>
</tbody>
</table>
<!-- Manager Information 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 class="club-current-competitions-container">
</div>
<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>
<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>
<!-- Club Player Container -->
<div id="club-players-container" class="container">
</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>
<!-- 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>