eisterman/htmxtailwindtest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Federico Pasqua
2025-02-01 16:28:24 +01:00
commit d16391fab0
19 changed files with 2201 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
templates/base.html Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
<title>{% block title %}{{ title }}{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
<style>
[x-cloak] {
display: none !important;
}
</style>
{% block head %}{% endblock %}
</head>
<body>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>

24
templates/feed.html Normal file
View File

@@ -0,0 +1,24 @@
<tr id="feed_{{feed.id}}">
<td>{{feed.name}}</td>
<td>{{feed.feed_url}}</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td>
<button hx-get="/feed/{{feed.id}}/edit/inline"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Edit Inline
</button>
<button hx-get="/feed/{{feed.id}}/edit/form"
hx-target="body"
hx-swap="beforeend">
Edit Dialog
</button>
<button class="danger"
hx-confirm="Are you sure?"
hx-delete="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Delete
</button>
</td>
</tr>

29
templates/feed_form.html Normal file
View File

@@ -0,0 +1,29 @@
<div id="modal" x-data>
<div class="overlay" style="z-index: 30"></div>
<dialog open style="z-index: 31">
<header>
<h2>Modify RSS Feed subscription</h2>
</header>
<form id="modify_form" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="#mod_indicator"
@htmx:after-on-load="document.getElementById('modal').remove()">
<label>
Name
<input type="text" name="name" value="{{feed.name}}">
</label>
<label>
Feed URL
<input type="url" name="feed_url" value="{{feed.feed_url}}">
</label>
</form>
<footer>
<button form="modify_form" type="reset" @click="document.getElementById('modal').remove()">Close
</button>
<button form="modify_form" type="submit">
Submit
<img id="mod_indicator" class="htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
</footer>
</dialog>
</div>

29
templates/feed_inline.html Normal file
View File

@@ -0,0 +1,29 @@
<tr id="feed_{{feed.id}}">
<td>
<label style="width: 100%">
<input type="text" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}">
</label>
</td>
<td>
<label style="width: 100%">
<input type="url" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
</label>
</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td>
<form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="update_feed_{{feed.id}}_indicator" style="padding: 0; background: unset">
<button type="reset"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button type="submit">
Confirm
<img id="update_feed_{{feed.id}}_indicator" class="htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
</form>
</td>
</tr>

89
templates/index.html Normal file
View File

@@ -0,0 +1,89 @@
{% extends "base.html" %}
{% block title %}Hello!{% endblock %}
{% block head %}
<style>
.navbar {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #161b22;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #161b22;
opacity: 0.75;
}
th {
white-space: nowrap;
}
td {
white-space: nowrap;
}
</style>
{% endblock %}
{% block content %}
<nav class="navbar" style="z-index: 20">
<div>
<a href="/" style="display: flex">
<img src="/assets/logo.svg" style="margin:8px; height: 32px" alt="RSS Notifier Logo"/>
<h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
</a>
</div>
</nav>
<div style="height: 48px; margin-bottom: 8px"></div>
<div x-data="{'isModalOpen': false}">
<div style="display:flex; justify-content:flex-end">
<button @click="isModalOpen = true">Create</button>
</div>
<div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
<dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
<header>
<h2>Create new RSS Feed subscription</h2>
</header>
<form id="create_form" hx-post="/feed/" hx-target="#feed_tbody" hx-swap="beforeend" hx-indicator="#indicator"
@htmx:after-on-load="document.getElementById('create_form').reset();isModalOpen = false">
<label>
Name
<input type="text" name="name">
</label>
<label>
Feed URL
<input type="url" name="feed_url">
</label>
</form>
<footer>
<button form="create_form" type="reset" @click="isModalOpen = false">Close</button>
<button form="create_form" type="submit">
Submit
<img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px"
alt="...">
</button>
</footer>
</dialog>
<table style="text-align:center">
<thead>
<tr>
<th>Feed Name</th>
<th>Feed URL</th>
<th>Last Mail Sent</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="feed_tbody">
{{ feeds|safe }}
</tbody>
</table>
</div>
{% endblock %}