Scorecard partial template added + changes to file names for clarity purposes
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 */
|
||||
}
|
||||
@@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user