diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/controls.j2 | 9 | ||||
| -rw-r--r-- | templates/courts.j2 | 8 | ||||
| -rw-r--r-- | templates/index.j2 | 48 | ||||
| -rw-r--r-- | templates/macros.j2 | 4 | ||||
| -rw-r--r-- | templates/players.j2 | 58 |
5 files changed, 82 insertions, 45 deletions
diff --git a/templates/controls.j2 b/templates/controls.j2 index 1799e01..7a03f9a 100644 --- a/templates/controls.j2 +++ b/templates/controls.j2 @@ -1,3 +1,4 @@ +{% from "macros.j2" import court %} <div class="columns"> <div class="column"> <div class="field has-addons"> @@ -48,4 +49,10 @@ hx-target="#games">Reset</button> </div> </div> -<div hx-post="/clear" hx-swap="outerHTML" hx-trigger="revealed"></div> +<div class="fixed-grid has-12-cols"> +<div class="grid"> +{% for key, value in courts.items() %} + {{ court(key, value) }} +{% endfor %} +</div> +</div>
\ No newline at end of file diff --git a/templates/courts.j2 b/templates/courts.j2 deleted file mode 100644 index d650298..0000000 --- a/templates/courts.j2 +++ /dev/null @@ -1,8 +0,0 @@ -{% from "macros.j2" import court %} -<div class="fixed-grid has-12-cols"> -<div class="grid"> -{% for key, value in courts.items() %} - {{ court(key, value) }} -{% endfor %} -</div> -</div>
\ No newline at end of file diff --git a/templates/index.j2 b/templates/index.j2 index fcea4e3..764eae8 100644 --- a/templates/index.j2 +++ b/templates/index.j2 @@ -11,33 +11,29 @@ </head> <body> <section class="section"> - <nav class="level"> - <div class="level-left"> - <div class="level-item"> - <figure class="image container is-128x128"> - <img src="{{ url_for('static', filename='logo.png') }}"/> - </figure> + <nav class="level"> + <div class="level-left"> + <div class="level-item"> + <figure class="image container is-128x128"> + <img src="{{ url_for('static', filename='logo.png') }}"/> + </figure> + </div> </div> - </div> - <div class="level-item"> - <p class="title">Match Up!</p> - </div> - <div class="level-right"> - <div hx-get="/time" hx-swap="outerHTML" hx-trigger="revealed"></div> - </div> - </nav> - </section> - <section class="section"> - <p class="title">Games</p> - {% include 'controls.j2' %} - </section> - <section class="section"> - <h2 class="title">Courts</h2> - <div hx-get="/courts" hx-swap="outerHTML" hx-trigger="revealed"></div> - </section> - <section class="section"> - <h2 class="title">Players</h2> - <div hx-get="/players" hx-swap="outerHTML" hx-trigger="revealed"></div> + <p class="level-item has-text-centered"> + <a class="title link is-info is-underlined" href="/">Games</a> + </p> + <div class="level-item has-text-centered"> + <p class="title is-1">Match Up!</p> + </div> + <p class="level-item has-text-centered"> + <a class="title link is-info" href="/players">Players</a> + </p> + <div class="level-right"> + <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> + </div> + </nav> + <div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div> + <div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div> </section> <footer class="footer"> <div class="content has-text-centered"> diff --git a/templates/macros.j2 b/templates/macros.j2 index 7117d11..65d886f 100644 --- a/templates/macros.j2 +++ b/templates/macros.j2 @@ -1,7 +1,7 @@ {% macro court(id, status) -%} <button class= "button is-large is-responsive {% if status %}is-success{% else %}is-danger{% endif %}" hx-post="{{ "/court-toggle/" ~ id}}" - hx-swap="outerHTML">{{ id }}</button> + hx-swap="outerHTML"> Court {{ id }}</button> {%- endmacro %} {% macro player(id, status, name) -%} @@ -18,6 +18,6 @@ {% macro timer(mins, secs) -%} <div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s"> - <p class="title">Timer: {{mins}}:{{secs}}</p> + <p class="title">⏲️ {{mins}}:{{secs}}</p> </div> {%- endmacro %}
\ No newline at end of file diff --git a/templates/players.j2 b/templates/players.j2 index 4eedc54..0e851ab 100644 --- a/templates/players.j2 +++ b/templates/players.j2 @@ -1,9 +1,51 @@ {% from "macros.j2" import player %} -<div class="fixed-grid has-5-cols"> -<div class="grid"> -{% for id, value in players.items() %} - <div class="cell"> - {{ player(id, value.status, value.name) }} - </div> -{% endfor %} -</div>
\ No newline at end of file +<!doctype html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Match Up!</title> + <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='bulma.min.css') }}"> + <link rel="stylesheet" href="{{ url_for('static', filename='custom.css') }}"> + <script src="{{ url_for('static', filename='htmx.min.js') }}"></script> + </head> + <body> + <section class="section"> + <nav class="level"> + <div class="level-left"> + <div class="level-item"> + <figure class="image container is-128x128"> + <img src="{{ url_for('static', filename='logo.png') }}"/> + </figure> + </div> + </div> + <p class="level-item has-text-centered"> + <a class="title link is-info" href="/">Games</a> + </p> + <div class="level-item has-text-centered"> + <p class="title is-1">Match Up!</p> + </div> + <p class="level-item has-text-centered"> + <a class="title link is-info is-underlined" href="/players">Players</a> + </p> + <div class="level-right"> + <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> + </div> + </nav> + <div class="fixed-grid has-5-cols"> + <div class="grid"> + {% for id, value in players.items() %} + <div class="cell"> + {{ player(id, value.status, value.name) }} + </div> + {% endfor %} + </div> + </section> + <footer class="footer"> + <div class="content has-text-centered"> + Made by <a href="https://karanjayachandra.com/">Karan</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 |