Skip to content

Commit

Permalink
define base jinja template
Browse files Browse the repository at this point in the history
  • Loading branch information
@chungg
chungg committed Dec 13, 2023
1 parent bbb03ab commit c5dceeb
Show file tree
Hide file tree
Showing 5 changed files with 52 additions and 86 deletions.
31 changes: 8 additions & 23 deletions app/templates/analytics.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
{% extends "base.html" %}
{% block title %}charts{% endblock %}
{% block head_css %}
<link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_bulma.min.css">
<!--link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_simple.min.css"-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">

<script src="https://unpkg.com/htmx.org@1.9.9"></script>
{% endblock %}
{% block head_scripts %}
<script src="https://unpkg.com/chart.js@4.4.0"></script>
<script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>

<script src="../../static/js/utils.js"></script>
{% endblock %}

<title>Charting</title>
</head>

<body id="body">
{% block body %}
<section class="section">
<div class="container">
<h1 class="title">
Expand Down Expand Up @@ -71,10 +61,6 @@ <h1 class="title">
</section>

<script>
// HTMX CSRF Token
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
// chartjs + htmx with payload in HX-Trigger
document.body.addEventListener("drawChart", function(evt){
const chart = Chart.getChart(evt.detail.target)
Expand Down Expand Up @@ -130,5 +116,4 @@ <h1 class="title">
}
);
</script>
</body>
</html>
{% endblock %}
28 changes: 28 additions & 0 deletions app/templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
{% block head_css %}{% endblock %}

<script src="https://unpkg.com/htmx.org@1.9.9"></script>
{% block head_scripts %}{% endblock %}

<title>{% block title %}{% endblock %}</title>
</head>

<body id="body">
{% block body %}{% endblock %}
<script>
// HTMX CSRF Token
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
</script>
</body>
</html>
29 changes: 4 additions & 25 deletions app/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.7.0"></script>

<!-- HTMX CSRF Token -->
<script>
document.body.addEventListener('htmx:configRequest', (event) => {
event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
})
</script>
<title>Demo</title>
</head>

<body id="body">
{% extends "base.html" %}
{% block title %}demo{% endblock %}
{% block body %}
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
Expand Down Expand Up @@ -81,5 +61,4 @@ <h2 class="subtitle">
</div>

</section>
</body>
</html>
{% endblock %}
29 changes: 8 additions & 21 deletions app/templates/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<title>Login</title>
</head>

{% if login_user_form.email.errors or login_user_form.password.errors %}
{% set error_class = " is-danger" %}
{% endif %}

<body>
{% extends "base.html" %}
{% block title %}login{% endblock %}

{% block body %}
{% if login_user_form.email.errors or login_user_form.password.errors %}
{% set error_class = " is-danger" %}
{% endif %}
<section class="hero is-primary is-fullheight">

<div class="hero-body">
<div class="container">

<div class="columns is-centered">
<div class="column is-two-fifths">
<h3 class="title has-text-white">Log in to xyz</h3>
<h3 class="title has-text-white">Login to xyz</h3>
<hr />
<form action="/api/login" method="POST" class="box">
{{ login_user_form.hidden_tag() }}
Expand Down Expand Up @@ -68,6 +57,4 @@ <h3 class="title has-text-white">Log in to xyz</h3>
</div>
</div>
</section>

</body>
</html>
{% endblock %}
21 changes: 4 additions & 17 deletions app/templates/register.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min. css">
<title>Register</title>
</head>

<body>
{% extends "base.html" %}
{% block title %}register{% endblock %}
{% block body %}
<section class="hero is-primary is-fullheight">
<div class="hero-body is-justify-content-center is-align-items-center">
<div class="container">
Expand Down Expand Up @@ -44,7 +34,4 @@
</div>
</div>
</section>
</body>

</html>

{% endblock %}

0 comments on commit c5dceeb

Please sign in to comment.