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 { #game-card {
display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */ display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 20px; padding: 10px;
margin: 10px 2px; /* Remove horizontal margin */ margin: 10px 2px; /* Remove horizontal margin */
min-height: 100px; min-height: 100px;
min-width: 150px; min-width: 250px;
box-sizing: border-box; box-sizing: border-box;
} }
/* Add these styles to your existing CSS file or create a new one */
.card-body {
display: flex;
}
.left-side { .left-side {
width: 70%; width: 70%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-between;
}
.team {
display: flex;
align-items: center;
}
.team p {
margin: 5px;
} }
.right-side { .right-side {
@@ -22,10 +36,8 @@
align-items: center; align-items: center;
} }
.team { .score p {
margin: 0;
text-align: center; 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" id="game-card">
<div class="card-body"> <div class="card-body">
<!-- Left side (70%) --> <!-- Left side (70%) -->
<div class="left-side" style="width: 70%; display: flex; flex-direction: column; justify-content: center;"> <div class="left-side">
<!-- Team 1 Name --> <!-- Team 1 Name with Score -->
<div class="team" style="text-align: center;"> <div class="team">
<p>team 1</p> <p id="team-name">Arsenal</p> <!-- {{team1.name}} -->
{{team1.name}} <p id="team-score">0</p>
<p>0</p>
</div> </div>
<!-- Team 2 Name --> <!-- Team 2 Name with Score -->
<div class="team" style="text-align: center;"> <div class="team">
<p>team 2</p> <p id="team-name">Liverpool</p> <!-- {{team2.name}} -->
{{team2.name}} <p id="team-score">1</p>
<p>1</p>
</div> </div>
</div> </div>
<!-- Right side (30%) --> <!-- Right side (30%) -->
<div class="right-side" style="width: 30%; display: flex; justify-content: center; align-items: center;"> <div class="right-side">
<!-- Time --> <!-- Time -->
<div class="score" style="text-align: center;"> <div class="score" style="text-align: center;">
{{time}} <p id="time">94'</p>
</div> </div>
</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-container" id="scoreboard">
<div class="scoreboard-league-container"> <div class="scoreboard-league-container">
<!-- Insert a game card -->
{{> scoreboard-header/game-card}} {{> scoreboard-header/game-card}}
</div> </div>