diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/controls.j2 | 10 | ||||
| -rw-r--r-- | templates/index.j2 | 41 | ||||
| -rw-r--r-- | templates/macros.j2 | 44 | ||||
| -rw-r--r-- | templates/players.j2 | 46 |
4 files changed, 58 insertions, 83 deletions
diff --git a/templates/controls.j2 b/templates/controls.j2 index 0b1451a..125dd38 100644 --- a/templates/controls.j2 +++ b/templates/controls.j2 @@ -1,10 +1,10 @@ {% 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 class="grid"> + {% for key, value in courts.items() %} + {{ court(key, value) }} + {% endfor %} + </div> </div> <div class="columns"> <div class="column"> diff --git a/templates/index.j2 b/templates/index.j2 index ff8f37a..832dbfb 100644 --- a/templates/index.j2 +++ b/templates/index.j2 @@ -1,46 +1,13 @@ +{% from "macros.j2" import header, footer, navbar %} <!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> + {{ header() }} <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> - <div class="level-item has-text-centered"></div> - <p class="level-item has-text-centered"> - <button class="button is-large is-link is-focused" onclick="location.href = '/';">Games</button> - </p> - <div class="level-item has-text-centered"></div> - <div class="level-item has-text-centered"> - <p class="title is-1">Match Up!</p> - </div> - <div class="level-item has-text-centered"></div> - <p class="level-item has-text-centered"> - <button class="button is-large is-link" onclick="location.href = '/players';">Players</button> - </p> - <div class="level-item has-text-centered"></div> - <div class="level-right"> - <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> - </div> - </nav> + {{ navbar() }} <div hx-post="/clear" hx-swap="outerHTML" hx-trigger="load"></div> <div hx-get="/control" hx-swap="outerHTML" hx-trigger="load"></div> - <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() }} </section> </body> </html> diff --git a/templates/macros.j2 b/templates/macros.j2 index 65d886f..58b1a73 100644 --- a/templates/macros.j2 +++ b/templates/macros.j2 @@ -20,4 +20,48 @@ <div hx-get="/time" hx-swap="outerHTML" hx-trigger="every 1s"> <p class="title">⏲️ {{mins}}:{{secs}}</p> </div> +{%- endmacro %} + +{% macro header() -%} +<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> +{%- endmacro %} + +{% macro 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> +{%- endmacro %} + +{% macro navbar() -%} +<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 has-text-centered"></div> + <p class="level-item has-text-centered"> + <button class="button is-large is-link" onclick="location.href = '/';">Games</button> + </p> + <div class="level-item has-text-centered"></div> + <div class="level-item has-text-centered"> + <p class="title is-1">Match Up!</p> + </div> + <div class="level-item has-text-centered"></div> + <p class="level-item has-text-centered"> + <button class="button is-large is-link" onclick="location.href = '/players';">Players</button> + </p> + <div class="level-item has-text-centered"></div> + <div class="level-right"> + <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> + </div> +</nav> {%- endmacro %}
\ No newline at end of file diff --git a/templates/players.j2 b/templates/players.j2 index 05f886a..6db040a 100644 --- a/templates/players.j2 +++ b/templates/players.j2 @@ -1,53 +1,17 @@ -{% from "macros.j2" import player %} +{% from "macros.j2" import header, navbar, footer, player %} <!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> + {{ header() }} <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> - <div class="level-item has-text-centered"></div> - <p class="level-item has-text-centered"> - <button class="button is-large is-link" onclick="location.href = '/';">Games</button> - </p> - <div class="level-item has-text-centered"></div> - <div class="level-item has-text-centered"> - <p class="title is-1">Match Up!</p> - </div> - <div class="level-item has-text-centered"></div> - <p class="level-item has-text-centered"> - <button class="button is-large is-link is-focused" onclick="location.href = '/players';">Players</button> - </p> - <div class="level-item has-text-centered"></div> - <div class="level-right"> - <div hx-get="/time" hx-swap="outerHTML" hx-trigger="load"></div> - </div> - </nav> + {{ navbar() }} <div class="fixed-grid has-6-cols"> <div class="grid"> {% for id, value in players.items() %} - <div class="cell"> - {{ player(id, value.status, value.name) }} - </div> + <div class="cell"> {{ player(id, value.status, value.name) }} </div> {% endfor %} </div> - <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() }} </section> </body> </html>
\ No newline at end of file |