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

Links added to each team in live score cards

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-23 21:18:34 -06:00
parent 6fdb1d5f74
commit 4d8a87ed57
3 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css
View File

@@ -13,7 +13,6 @@
overflow: hidden; /* Hide the overflowing skewed content */ overflow: hidden; /* Hide the overflowing skewed content */
transform: skewX(-20deg); /* Skew the banner to create a triangular side */ transform: skewX(-20deg); /* Skew the banner to create a triangular side */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
cursor: pointer; /* Change cursor to pointer on hover */
transition: transform 0.4s ease; /* Add transition for smooth effect */ transition: transform 0.4s ease; /* Add transition for smooth effect */
} }
@@ -61,11 +60,17 @@
/* Container for each team in card's information */ /* Container for each team in card's information */
.team { .team {
display: flex; /* Keeps all items in a row */
align-items: center; /* Center items vertically */ align-items: center; /* Center items vertically */
padding: 5px; padding: 5px;
} }
.team a {
color: black;
display: flex;
text-decoration: none;
margin: 0;
}
.team p { .team p {
margin: 0; /* Remove default margin */ margin: 0; /* Remove default margin */

2
ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js
View File

@@ -35,10 +35,12 @@ const fetchMatchesData = async (req, res, next) => {
// Extract relevant data from the API response // Extract relevant data from the API response
const matches = response.data.matches.map(match => ({ const matches = response.data.matches.map(match => ({
homeTeam: { homeTeam: {
teamID: match.homeTeam.id,
name: match.homeTeam.tla, name: match.homeTeam.tla,
crest: match.homeTeam.crest, crest: match.homeTeam.crest,
}, },
awayTeam: { awayTeam: {
teamID: match.awayTeam.id,
name: match.awayTeam.tla, name: match.awayTeam.tla,
crest: match.awayTeam.crest, crest: match.awayTeam.crest,
}, },

16
ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs
View File

@@ -6,15 +6,19 @@
<!-- Team 1 Name with Score --> <!-- Team 1 Name with Score -->
<div class="team"> <div class="team">
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest"> <a href="/club/{{homeTeam.teamID}}">
<p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} --> <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
<p id="team-score">{{ score.homeScore }}</p> <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
<p id="team-score">{{ score.homeScore }}</p>
</a>
</div> </div>
<!-- Team 2 Name with Score --> <!-- Team 2 Name with Score -->
<div class="team"> <div class="team">
<img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest"> <a href="/club/{{awayTeam.teamID}}">
<p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} --> <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
<p id="team-score">{{ score.awayScore }}</p> <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
<p id="team-score">{{ score.awayScore }}</p>
</a>
</div> </div>
</div> </div>