andros/django-multipage-template-for-html-over-the-wire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Stimulus

Browse Source
This commit is contained in:
Andros Fenollosa
2022-04-19 21:51:43 +02:00
parent 8aa69e13b8
commit 6cdc7f43a3
15 changed files with 69 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/app_template/templates/base.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Example website</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<script defer src="{% static 'js/index.js' %}"></script>
<script type="module" src="{% static 'js/main.js' %}"></script>
</head>
<body
data-host="{{ request.get_host }}"
@ -14,7 +14,7 @@
>
<div class="container">
<header>
<nav id="nav" class="nav">{% include 'components/_nav.html' %}</nav>
<nav id="nav" class="nav" data-controller="navbar">{% include 'components/_nav.html' %}</nav>
</header>
<main id="main">{% include page %}</main>
<footer class="footer">My footer</footer>

15
app/app_template/templates/components/_nav.html
View File

@ -1,10 +1,11 @@
<ul class="nav__ul" data-controller="navbar">
<ul class="nav__ul">
{# Links always visible #}
<li>
<a
href="#"
class="nav__link nav__link--page{% if active_nav == "home" %} active{% endif %}"
data-target="home"
data-page="home"
data-action="click->navbar#changePage"
>
Home
</a>
@ -15,7 +16,8 @@
<a
href="#"
class="nav__link nav__link--page{% if active_nav == "profile" %} active{% endif %}"
data-target="profile"
data-page="profile"
data-action="click->navbar#changePage"
>
Profile
</a>
@ -35,7 +37,8 @@
<a
href="#"
class="nav__link nav__link--page{% if active_nav == "login" %} active{% endif %}"
data-target="login"
data-page="login"
data-action="click->navbar#changePage"
>
Login
</a>
@ -44,8 +47,8 @@
<a
href="#"
class="nav__link nav__link--page{% if active_nav == "signup" %} active{% endif %}"
data-target="signup"
data-action="click->message#displayUpdateForm"
data-page="signup"
data-action="click->navbar#changePage"
>
Signup
</a>

1
app/app_template/templates/components/_task.html Normal file
View File

@ -0,0 +1 @@
<li>{{ task }}</li>

3
app/app_template/templates/components/_tasks.html
View File

@ -1,3 +0,0 @@
{% for task in tasks %}
<li>{{ task }}</li>
{% endfor %}

15
app/app_template/templates/pages/home.html
View File

@ -2,16 +2,9 @@
<h1>Welcome to an example of browsing with WebSockets over the Wire</h1>
<p>You will be able to experience a simple structure with a registration, a login and a private page.</p>
</section>
<section>
<h2>Laps</h2>
<p>
<button id="add-lap">Add lap</button>
</p>
<ul id="laps"></ul>
</section>
<section>
<section data-controller="todo">
<h2>TODO</h2>
<input type="text" id="task">
<button id="add-task">Add task</button>
<ul id="todo"></ul>
<input type="text" data-todo-target="task">
<button data-action="click->todo#addNewTask">Add task</button>
<ul id="todo-list"></ul>
</section>