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

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

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;
}

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;
}

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 */
}

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();
}
});
});