andros/html-over-websockets-with-django-and-htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading

Browse Source
This commit is contained in:
Andros Fenollosa 2021-11-20 19:54:57 +01:00
parent 209adf66f7
commit 7a53b7ddf5
8 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
TODO
View File

@ -1,4 +1,3 @@
- Component link with scroll up
- Search - Search
- List profiles - List profiles
- Chat - Chat

2
app/website/templates/components.yaml Normal file
View File

@ -0,0 +1,2 @@
components:
link: "components/link.html"

11
app/website/templates/components/link.html Normal file
View File

@ -0,0 +1,11 @@
<form>
{# Primary data #}
<input type="hidden" name="action" value="{{ action }}">
<input type="hidden" name="value" value="{{ value }}">
{# Secondary data #}
{% if page %}
<input type="hidden" name="page" value="{{ page }}">
{% endif %}
{# Button #}
<button type="button" hx-ws="send" hx-trigger="click">{{ text }}</button>
</form>

23
app/website/templates/layouts/base.html
View File

@ -1,4 +1,5 @@
{% load static %} {% load static %}
{% load slippers %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -12,9 +13,12 @@
<meta property="og:type" content="website"> <meta property="og:type" content="website">
{# Styles #} {# Styles #}
<link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}"> <link rel="stylesheet" type="text/css" href="{% static "css/normalize.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/nprogress.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "css/pico.min.css" %}"> <link rel="stylesheet" type="text/css" href="{% static "css/pico.min.css" %}">
{# JavaScript #} {# JavaScript #}
<script defer src="{% static "js/htmx.min.js" %}"></script> <script src="{% static "js/nprogress.js" %}"></script>
<script src="{% static "js/htmx.min.js" %}"></script>
<script defer src="{% static "js/main.js" %}"></script>
</head> </head>
<body> <body>
<div class="container" hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/"> <div class="container" hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/">
@ -26,20 +30,15 @@
<ul> <ul>
<li> <li>
{# To page Talks #} {# To page Talks #}
<form hx-ws="send"> {% #link text="Talks" action="page" value="talks" scroll-up="true" %}{% /link %}
<input type="hidden" name="action" value="page"> </li>
<input type="hidden" name="value" value="talks"> <li>
<a href="#" hx-ws="send" hx-trigger="click">Talks</a> {# To page Profiles #}
</form> {% #link text="Profiles" action="page" value="profiles" scroll-up="true" %}{% /link %}
</li> </li>
<li><a href="#">Profiles</a></li>
<li> <li>
{# To page About #} {# To page About #}
<form hx-ws="send"> {% #link text="About" action="page" value="about" scroll-up="true" %}{% /link %}
<input type="hidden" name="action" value="page">
<input type="hidden" name="value" value="about">
<a href="#" hx-ws="send" hx-trigger="click">About</a>
</form>
</li> </li>
</ul> </ul>
</nav> </nav>

2
app/website/templates/pages/about.html
View File

@ -1,3 +1,3 @@
<main id="main"> <main id="main" data-scroll-to-top="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dignissimos dolor inventore laudantium libero optio quo reprehenderit repudiandae sapiente similique. Delectus dolorum enim fuga fugiat ipsam nam recusandae sequi sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dignissimos dolor inventore laudantium libero optio quo reprehenderit repudiandae sapiente similique. Delectus dolorum enim fuga fugiat ipsam nam recusandae sequi sint.
</main> </main>

10
app/website/templates/pages/talk-single.html
View File

@ -1,4 +1,5 @@
<main id="main"> {% load slippers %}
<main id="main" data-scroll-to-top="true">
<article> <article>
<header> <header>
<p> <p>
@ -12,11 +13,6 @@
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer> <footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article> </article>
<p> <p>
<form> {% #link text="Back" action="page" value="talks" page=1 %}{% /link %}
<input type="hidden" name="action" value="page">
<input type="hidden" name="value" value="talks">
<input type="hidden" name="page" value="1">
<a href="#" hx-ws="send" hx-trigger="click">Back</a>
</form>
</p> </p>
</main> </main>

11
app/website/templates/pages/talks.html
View File

@ -1,4 +1,5 @@
<main id="main"> {% load slippers %}
<main id="main" data-scroll-to-top="true">
{% for talk in talks %} {% for talk in talks %}
<form> <form>
<input type="hidden" name="action" value="page"> <input type="hidden" name="action" value="page">
@ -24,11 +25,7 @@
{% endfor %} {% endfor %}
{# Pagination #} {# Pagination #}
<div class="loading" > <div class="loading" >
<form> <p>Page {{ page }}</p>
<input type="hidden" name="action" value="page"> {% #link text="Next page" action="page" value="talks" page=next_page %}{% /link %}
<input type="hidden" name="value" value="talks">
<input type="hidden" name="page" value="{{ next_page }}">
<p hx-ws="send" hx-trigger="click,revealed">Show more</p>
</form>
</div> </div>
</main> </main>

1
event/settings.py
View File

@ -43,6 +43,7 @@ INSTALLED_APPS = [
"django.contrib.staticfiles", "django.contrib.staticfiles",
"django_extensions", "django_extensions",
"channels", "channels",
"slippers",
"app.website", "app.website",
] ]