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

Basic score card information implemented

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-03 17:22:55 -06:00
parent ea63a01531
commit 49fd546c44
3 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css
View File

@@ -1,18 +1,32 @@
#game-card {
display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
border: 1px solid #ccc;
padding: 20px;
padding: 10px;
margin: 10px 2px; /* Remove horizontal margin */
min-height: 100px;
min-width: 150px;
min-width: 250px;
box-sizing: border-box;
}
/* Add these styles to your existing CSS file or create a new one */
.card-body {
display: flex;
}
.left-side {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
}
.team {
display: flex;
align-items: center;
}
.team p {
margin: 5px;
}
.right-side {
@@ -22,10 +36,8 @@
align-items: center;
}
.team {
.score p {
margin: 0;
text-align: center;
}
.score {
text-align: center;
}

26
ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs
View File

@@ -1,29 +1,25 @@
<!-- _score-card.hbs -->
<div class="card" id="game-card">
<div class="card-body">
<!-- Left side (70%) -->
<div class="left-side" style="width: 70%; display: flex; flex-direction: column; justify-content: center;">
<!-- Team 1 Name -->
<div class="team" style="text-align: center;">
<p>team 1</p>
{{team1.name}}
<p>0</p>
<div class="left-side">
<!-- Team 1 Name with Score -->
<div class="team">
<p id="team-name">Arsenal</p> <!-- {{team1.name}} -->
<p id="team-score">0</p>
</div>
<!-- Team 2 Name -->
<div class="team" style="text-align: center;">
<p>team 2</p>
{{team2.name}}
<p>1</p>
<!-- Team 2 Name with Score -->
<div class="team">
<p id="team-name">Liverpool</p> <!-- {{team2.name}} -->
<p id="team-score">1</p>
</div>
</div>
<!-- Right side (30%) -->
<div class="right-side" style="width: 30%; display: flex; justify-content: center; align-items: center;">
<div class="right-side">
<!-- Time -->
<div class="score" style="text-align: center;">
{{time}}
<p id="time">94'</p>
</div>
</div>

1
ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs
View File

@@ -1,6 +1,7 @@
<div class="scoreboard-container" id="scoreboard">
<div class="scoreboard-league-container">
<!-- Insert a game card -->
{{> scoreboard-header/game-card}}
</div>