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

Scorecard partial template added + changes to file names for clarity purposes

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-03 17:12:52 -06:00
parent 8d702ab6ac
commit ea63a01531
10 changed files with 83 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ProjectSourceCode/src/resources/css/live-scoreboard/scoreboard.css
View File

@@ -1,19 +0,0 @@
.scoreboard-container {
overflow-x: auto; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent cards from wrapping to the next line */
}
.league-container {
display: inline-block; /* Change display property to inline-block to prevent stretching */
border: 1px solid rgb(206, 202, 202);
}
#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;
margin: 10px 0; /* Remove horizontal margin */
min-height: 100px;
min-width: 150px;
box-sizing: border-box;
}

31
ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css Normal file
View File

@@ -0,0 +1,31 @@
#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;
margin: 10px 2px; /* Remove horizontal margin */
min-height: 100px;
min-width: 150px;
box-sizing: border-box;
}
.left-side {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
}
.right-side {
width: 30%;
display: flex;
justify-content: center;
align-items: center;
}
.team {
text-align: center;
}
.score {
text-align: center;
}

9
ProjectSourceCode/src/resources/css/scoreboard-header/scoreboard.css Normal file
View File

@@ -0,0 +1,9 @@
.scoreboard-container {
overflow-x: auto; /* Enable horizontal scrolling */
white-space: nowrap; /* Prevent cards from wrapping to the next line */
border: 1px solid rgb(227, 225, 225);
}
.league-container {
display: inline-block; /* Change display property to inline-block to prevent stretching */
}

31
ProjectSourceCode/src/resources/js/live-scoreboard/carousel.js
View File

@@ -1,31 +0,0 @@
document.addEventListener('DOMContentLoaded', function () {
const carouselInner = document.querySelector('#scoreboard-container');
const carouselItems = Array.from(carouselInner.children);
const carouselControlPrev = document.querySelector('.carousel-control-prev');
const carouselControlNext = document.querySelector('.carousel-control-next');
let currentIndex = 0;
const updateCarousel = () => {
carouselItems.forEach((item, index) => {
if (index === currentIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
};
carouselControlPrev.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
updateCarousel();
}
});
carouselControlNext.addEventListener('click', () => {
if (currentIndex < carouselItems.length - 1) {
currentIndex++;
updateCarousel();
}
});
});

2
ProjectSourceCode/src/views/layouts/main.hbs
View File

@@ -5,7 +5,7 @@
<!-- TODO: Add the head.hbs partial here -->
{{> head}}
{{> live-scoreboard/live-scoreboard}}
{{> scoreboard-header/scoreboard-header}}
<!-- TODO: Add the nav.hbs partial here -->
{{> nav}}

5
ProjectSourceCode/src/views/partials/head.hbs
View File

@@ -6,7 +6,10 @@
<!-- Linking forms.css -->
<link rel="stylesheet" type="text/css" href="css/login_and_registration.css">
<link rel="stylesheet" type="text/css" href="css/home-screen.css">
<link rel="stylesheet" type="text/css" href="css/live-scoreboard/scoreboard.css">
<!-- Scoreboard Header Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/scoreboard-header/scoreboard.css">
<link rel="stylesheet" type="text/css" href="css/scoreboard-header/game-card.css">
<title>Group 6 Final Project</title>

0
ProjectSourceCode/src/views/partials/live-scoreboard/game-card.hbs
View File

50
ProjectSourceCode/src/views/partials/live-scoreboard/live-scoreboard.hbs
View File

@@ -1,50 +0,0 @@
<div class="scoreboard-container" id="scoreboard">
<div class="scoreboard-league-container">
<!-- Match Card 1 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 2 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 3 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 4 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 5 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 6 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 7 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 8 -->
<div class="card" id="game-card">
</div>
<!-- Match Card 9 -->
<div class="card" id="game-card">
</div>
</div>
</div>

31
ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs Normal file
View File

@@ -0,0 +1,31 @@
<!-- _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>
<!-- Team 2 Name -->
<div class="team" style="text-align: center;">
<p>team 2</p>
{{team2.name}}
<p>1</p>
</div>
</div>
<!-- Right side (30%) -->
<div class="right-side" style="width: 30%; display: flex; justify-content: center; align-items: center;">
<!-- Time -->
<div class="score" style="text-align: center;">
{{time}}
</div>
</div>
</div>
</div>

7
ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs Normal file
View File

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