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

Scrollability added to scoreboard prototype

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-03 16:39:29 -06:00
parent 0ec2f4106e
commit 8d702ab6ac
9 changed files with 86 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,19 @@
#scoreboard-container { .scoreboard-container {
display: flex; overflow-x: auto; /* Enable horizontal scrolling */
transition: transform 0.5s ease; white-space: nowrap; /* Prevent cards from wrapping to the next line */
} }
.league-container { .league-container {
display: flex; display: inline-block; /* Change display property to inline-block to prevent stretching */
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 */
#game-card { #game-card {
flex: 0 0 auto; 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: 20px; /* Increase padding to increase the apparent height */ padding: 20px;
margin: 10px 10px; margin: 10px 0; /* Remove horizontal margin */
min-height: 100px; /* Set a minimum height for the cards */ min-height: 100px;
min-width: 150px; min-width: 150px;
box-sizing: border-box; /* Include padding and border in the element's total width and height */ box-sizing: border-box;
} }

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

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

3
ProjectSourceCode/src/views/pages/home.hbs
View File

@@ -1,4 +1,3 @@
<body>
<div class="container mt-5"> <div class="container mt-5">
<h1 class="mb-4">Welcome</h1> <h1 class="mb-4">Welcome</h1>
<div class="card-container"> <div class="card-container">
@@ -25,5 +24,5 @@
</div> </div>
</div> </div>
</div> </div>
</body>

2
ProjectSourceCode/src/views/pages/login.hbs
View File

@@ -1,4 +1,3 @@
<body class="container">
<!-- Linking forms.css --> <!-- Linking forms.css -->
<div class="login-page"> <div class="login-page">
<div class="form-container"> <div class="form-container">
@@ -28,4 +27,3 @@
<p class="mt-3">Don't have an account? <a href="/register">Register</a></p> <p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
</div> </div>
</div> </div>
</body>

3
ProjectSourceCode/src/views/pages/register.hbs
View File

@@ -1,4 +1,3 @@
<body class="container">
<div class="register-page"> <div class="register-page">
<div class="form-container"> <div class="form-container">
<h1 class="mt-5 mb-4">Register</h1> <h1 class="mt-5 mb-4">Register</h1>
@@ -21,4 +20,4 @@
<p class="mt-3">Already have an account? <a href="/login">Login</a></p> <p class="mt-3">Already have an account? <a href="/login">Login</a></p>
</div> </div>
</div> </div>
</body>

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

@@ -1,3 +1,5 @@
</body>
<footer class="text-center text-muted w-100 mt-auto fixed-bottom"> <footer class="text-center text-muted w-100 mt-auto fixed-bottom">
<p> <p>
&copy; 2024 - CSCI 3308 Group 6 &copy; 2024 - CSCI 3308 Group 6
@@ -9,3 +11,4 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</footer> </footer>

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

@@ -12,6 +12,5 @@
<!-- Include Bootstrap CSS --> <!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<body class="h-100 d-flex flex-column"></body>
</head> </head>

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

@@ -1,16 +1,50 @@
<div class="scoreboard-container" id="scoreboard"> <div class="scoreboard-container" id="scoreboard">
<div class="league-container"> <div class="scoreboard-league-container">
<!-- Match Card 1 -->
<div class="card" id="game-card"> <div class="card" id="game-card">
<!-- Card content -->
Card 1
</div> </div>
<!-- Match Card 2 -->
<div class="card" id="game-card"> <div class="card" id="game-card">
<!-- Card content -->
Card 2
</div> </div>
<!-- Match Card 3 -->
<div class="card" id="game-card"> <div class="card" id="game-card">
<!-- Card content -->
Card 3
</div> </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>
</div> </div>

53
ProjectSourceCode/src/views/partials/nav.hbs
View File

@@ -1,27 +1,28 @@
<nav class="navbar navbar-expand-sm border-bottom"> <nav class="navbar navbar-expand-sm border-bottom">
<div class="container"> <div class="container">
<button <button
class="navbar-toggler ms-auto" class="navbar-toggler ms-auto"
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#navbar-collapse" data-bs-target="#navbar-collapse"
aria-controls="navbar" aria-controls="navbar"
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation"> aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbar-collapse"> <div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="navbar-nav me-auto"> <ul class="navbar-nav me-auto">
<li class="nav-item"> <li class="nav-item">
<!-- TODO: For Discover, add a <a> tag with an attribute href to call the '/discover' API --> <!-- TODO: For Discover, add a <a> tag with an attribute href to call the '/discover' API -->
<a class="nav-link" href="/home">Home</a> <a class="nav-link" href="/home">Home</a>
</li> </li>
</ul> </ul>
<div class="nav-item me-1"> <div class="nav-item me-1">
<!-- TODO: For Logout, add a <a> tag with an attribute href to call the '/logout API --> <!-- TODO: For Logout, add a <a> tag with an attribute href to call the '/logout API -->
<a class="nav-link" href="/logout">Logout</a> <a class="nav-link" href="/logout">Logout</a>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
<body>