diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/data.js | 29 | ||||
| -rw-r--r-- | src/style.css | 15 |
2 files changed, 28 insertions, 16 deletions
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 |