Added name changes to game card containers to make thei rpurposes more clear

This commit is contained in:
2024-04-03 23:43:02 -06:00
parent 0e126f95ce
commit d6faa3e2d4
2 changed files with 8 additions and 7 deletions

View File

@@ -1,10 +1,11 @@
#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: 10px; border-radius: 4px;
margin: 10px 10px; /* Remove horizontal margin */ padding: 6px;
margin: 2.5px 2.5px; /* Remove horizontal margin */
min-height: 100px; min-height: 100px;
min-width: 200px; min-width: 150px;
box-sizing: border-box; box-sizing: border-box;
transition: transform 0.4s ease; /* Add transition for smooth effect */ transition: transform 0.4s ease; /* Add transition for smooth effect */
@@ -21,13 +22,13 @@
align-items: center; align-items: center;
} }
.left-side { .card-team-container {
flex: 70%; flex: 70%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.right-side { .card-game-information-container {
flex: 30%; flex: 30%;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -2,7 +2,7 @@
<div class="score-card-body"> <div class="score-card-body">
<!-- Left side (70%) --> <!-- Left side (70%) -->
<div class="left-side"> <div class="card-team-container">
<!-- Team 1 Name with Score --> <!-- Team 1 Name with Score -->
<div class="team"> <div class="team">
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest"> <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
@@ -18,7 +18,7 @@
</div> </div>
<!-- Right side (30%) --> <!-- Right side (30%) -->
<div class="right-side"> <div class="card-game-information-container">
<!-- Time --> <!-- Time -->
<div class="score" style="text-align: center;"> <div class="score" style="text-align: center;">
<p id="time">{{ minute }}</p> <p id="time">{{ minute }}</p>