summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
authorKaran Jayachandra <karan.jayachandra@nxp.com>2024-10-18 15:50:19 +0200
committerKaran Jayachandra <karan.jayachandra@nxp.com>2024-10-18 15:50:19 +0200
commit663e797209b11d7d234ca90da82fb809ac688845 (patch)
tree1d0c040e22700f3b0c187557498e9175e30e14fd /templates
parente1d7bc9e679c8778c22f99d24ffc339791429c71 (diff)
Made macros out of reused components
Diffstat (limited to 'templates')
-rw-r--r--templates/controls.j210
-rw-r--r--templates/index.j241
-rw-r--r--templates/macros.j244
-rw-r--r--templates/players.j246
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
generated by cgit v1.3.1 (git 2.54.0) at 2026-09-15 13:08:49 +0000