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
- List profiles
- 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 slippers %}
<!DOCTYPE html>
<html lang="en">
<head>
@ -12,9 +13,12 @@
<meta property="og:type" content="website">
{# Styles #}
<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" %}">
{# 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>
<body>
<div class="container" hx-ws="connect:ws:{{ DOMAIN }}/ws/pages/{{ room_random }}/">
@ -26,20 +30,15 @@
<ul>
<li>
{# To page Talks #}
<form hx-ws="send">
<input type="hidden" name="action" value="page">
<input type="hidden" name="value" value="talks">
<a href="#" hx-ws="send" hx-trigger="click">Talks</a>
</form>
{% #link text="Talks" action="page" value="talks" scroll-up="true" %}{% /link %}
</li>
<li>
{# To page Profiles #}
{% #link text="Profiles" action="page" value="profiles" scroll-up="true" %}{% /link %}
</li>
<li><a href="#">Profiles</a></li>
<li>
{# To page About #}
<form hx-ws="send">
<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>
{% #link text="About" action="page" value="about" scroll-up="true" %}{% /link %}
</li>
</ul>
</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.
</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>
<header>
<p>
@ -12,11 +13,6 @@
<footer>Author {{ talk.author.full_name }} - {{ talk.category.name }}</footer>
</article>
<p>
<form>
<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>
{% #link text="Back" action="page" value="talks" page=1 %}{% /link %}
</p>
</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 %}
<form>
<input type="hidden" name="action" value="page">
@ -24,11 +25,7 @@
{% endfor %}
{# Pagination #}
<div class="loading" >
<form>
<input type="hidden" name="action" value="page">
<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>
<p>Page {{ page }}</p>
{% #link text="Next page" action="page" value="talks" page=next_page %}{% /link %}
</div>
</main>

1
event/settings.py
View File

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