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

AutoBuild at change, Special HTMX Indicator Inline, modernate Feed Inline and other small things

Browse Source
This commit is contained in:
Federico Pasqua
2025-02-01 20:37:41 +01:00
parent abb333da54
commit 045b0f5ec0
8 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/base.html
View File

@@ -1,16 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/generated/main.css">
<link rel="stylesheet" href="/autoassets/main.css">
<!-- Inter Font is so hot right now! -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.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>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--suppress CssUnusedSymbol -->
<style>
[x-cloak] {
display: none !important;
}
.htmx-indicator.htmx-inline{
display:none;
}
.htmx-request .htmx-indicator.htmx-inline{
display:inline;
}
.htmx-request.htmx-indicator.htmx-inline{
display:inline;
}
</style>
{% block head %}{% endblock %}
</head>

2
templates/feed.html
View File

@@ -15,7 +15,7 @@
hx-swap="beforeend">
Edit Dialog
</button>
<button class="btn btn-error btn-sm"
<button class="btn btn-sm btn-error"
hx-confirm="Are you sure?"
hx-delete="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"

54
templates/feed_inline.html
View File

@@ -1,29 +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 class="btn" type="reset"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button class="btn" 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>
<td>
<label class="w-full">
<input type="text" class="input input-sm" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}"/>
</label>
</td>
<td>
<label class="w-full">
<input type="url" class="input input-sm" 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>
<button class="btn btn-sm btn-warning"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button class="btn btn-sm btn-primary" type="submit" form="update_feed_{{feed.id}}">
Confirm
<img id="update_feed_{{feed.id}}_indicator" class="htmx-inline htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
<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">
</form>
</td>
</tr>

4
templates/index.html
View File

@@ -31,9 +31,9 @@
<img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
<h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
</a>
<button class="btn" @click="isModalOpen = true">Create</button>
<button class="btn btn-primary" @click="isModalOpen = true">Create</button>
</nav>
<div class="pt-16">
<div class="pt-20">
<!-- TODO: Switch overlay and dialog to DaisyUI -->
<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>