diff options
| author | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-15 15:48:50 +0100 |
|---|---|---|
| committer | Karan Jayachandra <mail@karanjayachandra.com> | 2025-11-15 15:48:50 +0100 |
| commit | c0c4897f2ef9eb9ae444bc05407c3cdf420c3461 (patch) | |
| tree | 504709666f5470960c7910a77eb7808cde8074b8 | |
| parent | cabac66d56e8912941cef976d69a4fd3ec9ad928 (diff) | |
Trying cards instead of a table
| -rw-r--r-- | index.html | 59 | ||||
| -rw-r--r-- | src/data.js | 29 | ||||
| -rw-r--r-- | src/style.css | 15 |
3 files changed, 52 insertions, 51 deletions
@@ -6,40 +6,33 @@ <title>Match Up!</title> </head> <body> - <section class="section"> + <section class="section is-fluid"> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <div class="navbar-item"><img src="icon.png"></div> <div class="navbar-item">Match Up</div> </div> <div class="navbar-end"> - <div class="field is-grouped is-grouped-right"> - <button class="button is-medium is-dark" id="timer-dec" value="-0.5"><i class="fa-solid fa-minus" value="-0.5"></i></button> - <input class="input is-medium is-dark" id="timer-display" type="text" readonly></input> - <button class="button is-medium is-dark" id="timer-inc" value="0.5"><i class="fa-solid fa-plus" value="0.5"></i></button> - <button class="button is-medium is-dark" id="timer-start"><i class="fa-solid fa-play"></i></button> - <button class="button is-medium is-dark" id="timer-stop"><i class="fa-solid fa-stop"></i></button> + <div class="navbar-item"> + <div class="field is-grouped is-grouped-centered"> + <button class="button is-dark" id="timer-dec" value="-0.5">-</i></button> + <input class="input is-dark" id="timer-display" type="text" readonly></input> + <button class="button is-dark" id="timer-inc" value="0.5">+</button> + <button class="button is-dark" id="timer-start">Start</button> + <button class="button is-dark" id="timer-stop">Stop</button> + </div> </div> </div> </nav> - <div class="container"> + <div class="container is-fluid"> <section class="section"> <h1 class="title" id="Game_description"></h1> - <table class="table is-fullwidth"> - <thead> - <tr> - <th>Court</th> - <th colspan='2' style="text-align: center;">Team 1</th> - <th colspan='2' style="text-align: center;">Team 2</th> - </tr> - </thead> - <tbody id="Game_list"></tbody> - </table> + <div id="Game_list" class="grid-container"></div> </section> <section class="section"> - <div class="field is-grouped is-grouped-centered"> - <button class="button is-medium is-dark" id="propose">Propose</button> - <div class="select is-medium is-dark"> + <div class="field is-grouped is-grouped-right"> + <button class="button is-dark" id="propose">Propose</button> + <div class="select is-dark"> <select name="skill" id="skill"> <option value="10">All Levels</option> <option value="5">2 Levels</option> @@ -47,39 +40,35 @@ <option value="1">Skill Based</option> </select> </div> - <button class="button is-medium is-dark" id="confirm">Confirm</button> + <button class="button is-dark" id="confirm">Confirm</button> </div> </section> <section class="section"> <h1 class="title">Courts</h1> - <div id="Court_list" class="button-grid"></div> + <h1 class="subtitle">Reserve courts for training or competition.</h1> + <div id="Court_list" class="grid-container"></div> </section> <section class="section"> <h1 class="title">Regulars</h1> - <div id="Regular_list" class="button-grid"></div> + <h1 class="subtitle">Check in and check out club members.</h1> + <div id="Regular_list" class="grid-container"></div> </section> <section class="section"> <h1 class="title">Guests</h1> - <div id="Guest_list" class="button-grid"></div> + <h1 class="subtitle">Add guests to the pool.</h1> + <div id="Guest_list" class="grid-container"></div> </section> <section class="section"> <h1 class="title">Admin</h1> <h1 class="subtitle">Changes here are permanent and cannot be reverted.</h1> <div class="field is-grouped is-grouped-centered"> - <button class="button is-medium is-danger" id="reset"> + <button class="button is-danger" id="reset"> Reset Session </button> - </div> - <div class="field is-grouped is-grouped-centered"> - <div id="player-load" class="file is-danger is-boxed is-medium"> + <div id="player-load" class="file is-danger is-boxed"> <label class="file-label"> <input class="file-input" type="file" name="players" accept=".csv" /> - <span class="file-cta"> - <span class="file-icon"> - <i class="fa-solid fa-upload"></i> - </span> - <span class="file-label">Update Regulars</span> - </span> + <span class="file-cta">Update Regulars</span> </label> </div> </div> diff --git a/src/data.js b/src/data.js index 589b5a3..1d4576d 100644 --- a/src/data.js +++ b/src/data.js @@ -15,7 +15,7 @@ class Switch { } render() { let color = this.status ? "is-success" : "is-danger"; - let type = `class="button is-medium ${color}"`; + let type = `class="button ${color}"`; let id = this.description + "_" + this.id; return `<button id=${id} ${type}>${this.name}</button>`; } @@ -69,9 +69,15 @@ export class Team { this.playerTwo.print(); } render() { - let p1 = `<td style="width: 23%; text-align: right;">${this.playerOne}</td>`; - let p2 = `<td style="width: 23%; text-align: left;">${this.playerTwo}</td>`; - return p1 + p2; + + return `<div class="card"> + <div class="card-content"> + <div class="content"> + <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerOne}</p> + <p class="subtitle is-6" style="word-wrap: break-word;">${this.playerTwo}</p> + </div> + </div> + </div>`; } } @@ -90,10 +96,15 @@ export class Game extends Switch { } render() { let blockedState = this.teamOne.playerOne === "RESERVED"; - let type = blockedState ? `class="is-dark"` : ``; - let court = `<td style="width: 8%; text-align: center;">${ - this.id + 1 - }</td>`; - return `<tr ${type}>${court}${this.teamOne.render()}${this.teamTwo.render()}</tr>`; + let placeHolder = `<p class="title is-3">Reserved</p>` + let type = blockedState ? placeHolder : this.teamOne.render() + this.teamTwo.render(); + return `<div class="card"> + <header class="card-header"> + <p class="card-header-title">Court ${this.id + 1}</p> + </header> + <div class="card-content"> + ${type} + </div> + </div>`; } } diff --git a/src/style.css b/src/style.css index 73550ca..cb46ed5 100644 --- a/src/style.css +++ b/src/style.css @@ -1,17 +1,18 @@ -.button-grid { +.grid-container { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(6, 1fr); grid-gap: 15px; } +.card { + height: 100%; +} #timer-display { text-align: center; - width: fit-content; -} -table { - font-size: 1.5em; + width: 100px; } + @media (max-width: 900px) { - .button-grid { + .grid-container { grid-template-columns: repeat(1, 1fr); } }
\ No newline at end of file |