diff options
| author | Karan Jayachandra <karan.jayachandra@nxp.com> | 2024-10-11 18:56:48 +0200 |
|---|---|---|
| committer | Karan Jayachandra <karan.jayachandra@nxp.com> | 2024-10-11 18:56:48 +0200 |
| commit | 20d668454a1e1d8f17f7e5d4d25f667f62381cd1 (patch) | |
| tree | 5e13fc89296e4bb8e48c7296c51d4dd2122a4a63 /templates | |
| parent | 0db0ff2f1c712273ac48cb859c24253b1efa8384 (diff) | |
Working with Bulma CSS now
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/court.j2 | 2 | ||||
| -rw-r--r-- | templates/courts.j2 | 8 | ||||
| -rw-r--r-- | templates/games.j2 | 12 | ||||
| -rw-r--r-- | templates/index.j2 | 68 | ||||
| -rw-r--r-- | templates/player.j2 | 2 | ||||
| -rw-r--r-- | templates/players.j2 | 7 |
6 files changed, 47 insertions, 52 deletions
diff --git a/templates/court.j2 b/templates/court.j2 index 6ae4d91..425e7d5 100644 --- a/templates/court.j2 +++ b/templates/court.j2 @@ -1 +1 @@ -<button class={% if court.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
\ No newline at end of file +<button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button>
\ No newline at end of file diff --git a/templates/courts.j2 b/templates/courts.j2 index 3134aca..64fd44a 100644 --- a/templates/courts.j2 +++ b/templates/courts.j2 @@ -1,7 +1,9 @@ -<div class="grid-container"> +<div class="fixed-grid has-12-cols"> +<div class="grid"> {% for court in courts %} - <div class="grid-item"> - <button class={% if court.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button> + <div class="cell"> + <button class={% if court.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/court-toggle/" ~ court.number}}" hx-trigger="click" hx-swap="outerHTML">{{ court.number }}</button> </div> {% endfor %} +</div> </div>
\ No newline at end of file diff --git a/templates/games.j2 b/templates/games.j2 index 83fff7f..b070b16 100644 --- a/templates/games.j2 +++ b/templates/games.j2 @@ -1,10 +1,10 @@ -<div class="games"> -<table> -<tr> +<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth" id="games"> +<thead> <th> Court </th> <th colspan="2"> Team 1 </th> <th colspan="2"> Team 2 </th> -</tr> +</thead> +<tbody> {% for game in games %} <tr> <th>{{ game.court.number }}</th> @@ -14,5 +14,5 @@ <td>{{ game.team2.player2.name }}</th> </tr> {% endfor %} -</table> -</div>
\ No newline at end of file +</tbody> +</table>
\ No newline at end of file diff --git a/templates/index.j2 b/templates/index.j2 index a9c451f..ac6ddf3 100644 --- a/templates/index.j2 +++ b/templates/index.j2 @@ -2,54 +2,46 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <title>🏸Match Up!</title> - <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> + <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"> <script src="https://unpkg.com/htmx.org@2.0.0/dist/htmx.min.js"></script> <style> button { - height: 50px; - width: 200px; - } - .active { - background-color: #27ae60; - } - .dormant { - background-color: #a93226; - } - .grid-container { - display: grid; - grid-template-columns: auto auto auto; - row-gap: 20px; - column-gap: 20px; - } - hr { - margin-top: 1cm; + width: 100%; } </style> </head> <body> - <header> - <h4>🏸The Smashing Fellows </h4> - </header> - <hr> - <div> - <h2>Games</h2> - <div class="games" hx-get="/game-list" hx-swap="outerHTML" hx-trigger="revealed"></div> - </div> - <button hx-post="/new-games" hx-trigger="click" hx-target=".games" hx-swap="outerHTML"> New Games </button> - <div class="players"> - <h2>Courts</h2> + <section class="hero"> + <div class="hero-body"> + <p class="title">🏸The Smashing Fellows </p> + </div> + </section> + <section class="section"> + <p class="title">Games</p> + <div class="columns"> + <div class="column"></div> + <div class="column"><button class="button is-success" hx-post="/new-games" hx-trigger="click" hx-target="#games">New Games</button></div> + <div class="column"></div> + <div class="column"><button class="button is-danger" hx-post="/clear-games" hx-trigger="click" hx-target="#games">Clear</button></div> + <div class="column"></div> + </div> + <div hx-get="/game-list" hx-swap="outerHTML" hx-trigger="revealed"></div> + </section> + <section class="section"> + <h2 class="title">Courts</h2> <div hx-get="/court-list" hx-swap="outerHTML" hx-trigger="revealed"></div> - </div> - <hr> - <div class="players"> - <h2>Players</h2> + </section> + <section class="section"> + <h2 class="title">Players</h2> <div hx-get="/player-list" hx-swap="outerHTML" hx-trigger="revealed"></div> - </div> - <hr> - <footer> - Made by <a href="https://karanjayachandra.com/">K. Jayachandra</a> using <a href="https://htmx.org/">HTMX</a> and <a href="https://flask.palletsprojects.com">Flask</a> + </section> + <footer class="footer"> + <div class="content has-text-centered"> + Made by <a href="https://karanjayachandra.com/">K. Jayachandra</a> using <a href="https://flask.palletsprojects.com">Flask</a>, <a href="https://htmx.org/">HTMX</a> and <a href="https://bulma.io">Bulma</a> + </div> </footer> </body> </html>
\ No newline at end of file diff --git a/templates/player.j2 b/templates/player.j2 index 1176d65..5b70df6 100644 --- a/templates/player.j2 +++ b/templates/player.j2 @@ -1 +1 @@ -<button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
\ No newline at end of file +<button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button>
\ No newline at end of file diff --git a/templates/players.j2 b/templates/players.j2 index 3005fa4..6179dbb 100644 --- a/templates/players.j2 +++ b/templates/players.j2 @@ -1,7 +1,8 @@ -<div class="grid-container"> +<div class="fixed-grid has-5-cols"> +<div class="grid"> {% for player in players %} - <div class="grid-item"> - <button class={% if player.status %} "active" {% else %} "dormant" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button> + <div class="cell"> + <button class={% if player.status %} "button is-success" {% else %} "button is-danger" {% endif %} hx-post="{{ "/player-toggle/" ~ player.name}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button> </div> {% endfor %} </div>
\ No newline at end of file |