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

Reprototyping of scoreboard without bootstrap carousel

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-03 15:59:57 -06:00
parent 227bde2178
commit 08ff912a79
6 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,21 @@
#scoreboard-container {
display: flex;
transition: transform 0.5s ease;
}
.league-container { .league-container {
display: flex; display: flex;
justify-content: flex-start; /* Align cards to the left */ justify-content: flex-start; /* Align cards to the left */
border: 1px solid rgb(206, 202, 202); border: 1px solid rgb(206, 202, 202);
} }
/* Styling for each card representing a live game */ /* Styling for each card representing a live game */
#game-card { #game-card {
flex: 0 0 auto;
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 20px; /* Increase padding to increase the apparent height */ padding: 20px; /* Increase padding to increase the apparent height */
margin: 10px 10px; margin: 10px 10px;
min-height: 100px; /* Set a minimum height for the cards */ min-height: 100px; /* Set a minimum height for the cards */
min-width: 150px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */ box-sizing: border-box; /* Include padding and border in the element's total width and height */
} }

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

@@ -0,0 +1,31 @@
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

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="h-100"> <html lang="en" class="h-100">
{{> live-scoreboard}} {{> live-scoreboard/live-scoreboard}}
<!-- TODO: Add the head.hbs partial here --> <!-- TODO: Add the head.hbs partial here -->
{{> head}} {{> head}}

18
ProjectSourceCode/src/views/partials/footer.hbs
View File

@@ -3,6 +3,20 @@
&copy; 2024 - CSCI 3308 Group 6 &copy; 2024 - CSCI 3308 Group 6
</p> </p>
<!-- TODO: Add the <script><script /> tag to include bootstrap javascript --> <!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$(".carousel-control-prev").click(function() {
$("#carouselExampleControls").carousel("prev");
});
$(".carousel-control-next").click(function() {
$("#carouselExampleControls").carousel("next");
});
});
</script>
</footer> </footer>

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

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