Modification to table code. Just text and logo are now clickable
This commit is contained in:
@@ -1,5 +1,7 @@
|
|||||||
#league-table-container {
|
#league-table-container {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#standings-table {
|
#standings-table {
|
||||||
@@ -7,9 +9,14 @@
|
|||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#table-logo {
|
#club-logo {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#club-name {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#standings-table td {
|
#standings-table td {
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// Add click event listener to club logos
|
// Add click event listener to club logos
|
||||||
document.querySelectorAll('.club-logo').forEach(element => {
|
document.querySelectorAll('#club-logo, #club-name').forEach(element => {
|
||||||
element.addEventListener('click', (event) => {
|
element.addEventListener('click', (event) => {
|
||||||
// Get the club ID from the clicked club logo's clubID attribute
|
// Get the club ID from the clicked club logo's clubID attribute
|
||||||
const clubId = element.getAttribute('clubID');
|
const clubId = element.getAttribute('clubID');
|
||||||
|
|||||||
@@ -32,8 +32,8 @@
|
|||||||
{{#each league.standings}}
|
{{#each league.standings}}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{table.league_position}}</td>
|
<td>{{table.league_position}}</td>
|
||||||
<td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" class="club-logo" clubID="{{table.team_id}}"></td>
|
<td><img src="{{table.team_crest}}" alt="{{table.team_name}} Crest" id="club-logo" clubID="{{table.team_id}}"></td>
|
||||||
<td><p id="club-name">{{table.team_name}}</p></td>
|
<td><span id="club-name">{{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>
|
||||||
|
|||||||
Reference in New Issue
Block a user