diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/court.j2 | 2 | ||||
| -rw-r--r-- | templates/courts.j2 | 8 | ||||
| -rw-r--r-- | templates/guests.j2 | 2 | ||||
| -rw-r--r-- | templates/index.j2 | 54 | ||||
| -rw-r--r-- | templates/macros.j2 | 11 | ||||
| -rw-r--r-- | templates/player.j2 | 7 | ||||
| -rw-r--r-- | templates/players.j2 | 5 |
7 files changed, 61 insertions, 28 deletions
diff --git a/templates/court.j2 b/templates/court.j2 index 859c942..d7aec86 100644 --- a/templates/court.j2 +++ b/templates/court.j2 @@ -1 +1 @@ -<button class={% if status %} "button is-success is-large" {% else %} "button is-danger is-large" {% endif %} hx-post="{{ "/court-toggle/" ~ id}}" hx-trigger="click" hx-swap="outerHTML">{{ id }}</button>
\ No newline at end of file +{% from "macros.j2" import court %}{{ court(key, value) }}
\ No newline at end of file diff --git a/templates/courts.j2 b/templates/courts.j2 index 2bc8a95..d650298 100644 --- a/templates/courts.j2 +++ b/templates/courts.j2 @@ -1,12 +1,8 @@ +{% from "macros.j2" import court %} <div class="fixed-grid has-12-cols"> <div class="grid"> {% for key, value in courts.items() %} - <div class="cell"> - <button class={% if value %} "button is-success is-large" {% else %} "button is-danger is-large" {% endif %} - hx-post="{{ "/court-toggle/" ~ key}}" - hx-trigger="click" - hx-swap="outerHTML">{{ key }}</button> - </div> + {{ court(key, value) }} {% endfor %} </div> </div>
\ No newline at end of file diff --git a/templates/guests.j2 b/templates/guests.j2 index b5d251f..b84a2fd 100644 --- a/templates/guests.j2 +++ b/templates/guests.j2 @@ -1,3 +1,3 @@ <div class="control" id="guests"> - <input class="input is-large is-responsive" type="text" style="text-align:center" value={{ guests }} disabled> + <input class="input is-large is-responsive" type="text" style="text-align:center" value="{{ guests }} Guests" disabled> </div>
\ No newline at end of file diff --git a/templates/index.j2 b/templates/index.j2 index 42fc43e..4ccdf92 100644 --- a/templates/index.j2 +++ b/templates/index.j2 @@ -3,10 +3,10 @@ <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="/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> + <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') }}"> + <script src="{{ url_for('static', filename='htmx.min.js') }}"></script> <style> button, input, .select, .select select { width: 100%; @@ -17,13 +17,28 @@ td { width: 20%; } + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + } </style> </head> <body> - <section class="hero"> - <div class="hero-body"> - <p class="title">🏸The Smashing Fellows </p> + <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> + <div class="level-item"> + <p class="title">Today's Games</p> </div> + </nav> </section> <section class="section"> <p class="title">Games</p> @@ -31,11 +46,19 @@ <div class="column"> <div class="field has-addons"> <div class="control"> - <button class="button is-large is-responsive is-dark" style="text-align:center" hx-post="/decrement" hx-swap="outerHTML" hx-trigger="click" hx-target="#guests">-</button> + <button class="button is-large is-responsive is-dark" + style="text-align:center" + hx-post="/decrement" + hx-swap="outerHTML" + hx-target="#guests">-</button> </div> <div hx-get="/guests" hx-swap="outerHTML" hx-trigger="revealed"></div> <div class="control"> - <button class="button is-large is-responsive is-dark" style="text-align:center" hx-post="/increment" hx-swap="outerHTML" hx-trigger="click" hx-target="#guests">+</button> + <button class="button is-large is-responsive is-dark" + style="text-align:center" + hx-post="/increment" + hx-swap="outerHTML" + hx-target="#guests">+</button> </div> </div> </div> @@ -52,14 +75,21 @@ </div> </div> <div class="column"> - <button class="button is-dark is-large is-responsive" hx-post="/propose" hx-trigger="click" hx-target="#games" hx-include="[name='type']">Propose</button> + <button class="button is-dark is-large is-responsive" + hx-post="/propose" + hx-target="#games" + hx-include="[name='type']">New Round</button> </div> <div class="column"></div> <div class="column"> - <button class="button is-dark is-large is-responsive" hx-post="/confirm" hx-trigger="click" hx-target="#games">Confirm</button> + <button class="button is-dark is-large is-responsive" + hx-post="/confirm" + hx-target="#games">Start Round</button> </div> <div class="column"> - <button class="button is-dark is-large is-responsive" hx-post="/clear" hx-trigger="click" hx-target="#games">Clear</button> + <button class="button is-dark is-large is-responsive" + hx-post="/clear" + hx-target="#games">Reset</button> </div> </div> <div hx-post="/clear" hx-swap="outerHTML" hx-trigger="revealed"></div> diff --git a/templates/macros.j2 b/templates/macros.j2 new file mode 100644 index 0000000..b4767be --- /dev/null +++ b/templates/macros.j2 @@ -0,0 +1,11 @@ +{% 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> +{%- endmacro %} + +{% macro player(id, status, name) -%} +<button class="button is-medium is-responsive {% if status %}is-success{% else %}is-danger {% endif %}" + hx-post="{{ "/player-toggle/" ~ id}}" + hx-swap="outerHTML"> {{ name }} </button> +{%- endmacro %}
\ No newline at end of file diff --git a/templates/player.j2 b/templates/player.j2 index 7e80285..68a1ea4 100644 --- a/templates/player.j2 +++ b/templates/player.j2 @@ -1,6 +1 @@ -<button class="button is-medium is-responsive {% if status %} is-success {% else %} is-danger {% endif %}" - hx-post="{{ "/player-toggle/" ~ id}}" - hx-trigger="click" - hx-swap="outerHTML"> - {{ name }} -</button>
\ No newline at end of file +{% from "macros.j2" import player %}{{ player(id, status, name) }}
\ No newline at end of file diff --git a/templates/players.j2 b/templates/players.j2 index 080c03a..4eedc54 100644 --- a/templates/players.j2 +++ b/templates/players.j2 @@ -1,8 +1,9 @@ +{% from "macros.j2" import player %} <div class="fixed-grid has-5-cols"> <div class="grid"> -{% for id, player in players.items() %} +{% for id, value in players.items() %} <div class="cell"> - <button class="button is-medium is-responsive {% if player.status %} is-success {% else %} is-danger {% endif %}" hx-post="{{ "/player-toggle/" ~ id}}" hx-trigger="click" hx-swap="outerHTML">{{ player.name }}</button> + {{ player(id, value.status, value.name) }} </div> {% endfor %} </div>
\ No newline at end of file |