Integrate Alpine & Htmx extensions

master
Araozu 2024-03-14 17:18:01 -05:00
parent c2535f7115
commit 151a2be1c4
9 changed files with 29 additions and 27 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 526 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org"> <html lang="es" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head :: head"></head> <head th:replace="fragments/head"></head>
<body> <body hx-ext="response-targets, class-tools, loading-states">
<div class="grid grid-cols-[5rem_auto]"> <div class="grid grid-cols-[5rem_auto]">
<!-- Navigation Rail --> <!-- Navigation Rail -->
<div th:replace="fragments/navigation_rail :: div"></div> <div th:replace="fragments/navigation_rail :: div"></div>
@ -19,43 +19,39 @@
<img class="inline-block w-[10rem] h-[10rem]" src="" /> <img class="inline-block w-[10rem] h-[10rem]" src="" />
</div> </div>
</div> </div>
<div> <div x-data="{user_dni: ''}">
<form> <form
hx-get="/certs/person" hx-target="#person-search-result"
hx-target-4*="#person-search-result"
hx-swap="outerHTML"
>
<div class="relative max-w-[14rem] mx-auto"> <div class="relative max-w-[14rem] mx-auto">
<input <input id="search-dni" class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
id="search-dni"
class="bg-c-background text-c-on-background border-c-outline border-2 rounded px-2 py-1 w-full
invalid:border-c-error invalid:text-c-error invalid:border-c-error invalid:text-c-error
focus:border-c-primary outline-none font-mono focus:border-c-primary outline-none font-mono
disabled:opacity-50 disabled:cursor-not-allowed" disabled:opacity-50 disabled:cursor-not-allowed" type="text" minLength="8"
type="text" maxLength="15" pattern="[0-9]{8,15}" placeholder="Número de DNI" x-model="user_dni"
minLength="8" required />
maxLength="15"
pattern="[0-9]{8,15}"
placeholder="Número de DNI"
required
/>
<label for="search-dni" class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label> <label for="search-dni"
class="absolute -top-2 left-2 text-xs bg-c-surface px-1 select-none">DNI</label>
<span <span class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant">
class="absolute top-[2px] right-14 rounded hover:bg-c-surface-variant"
>
<LoadingIcon class="animate-spin" fill="var(--c-on-surface)" /> <LoadingIcon class="animate-spin" fill="var(--c-on-surface)" />
</span> </span>
<button <button type="button" class="absolute top-1 right-8 rounded hover:bg-c-surface-variant">
type="button"
class="absolute top-1 right-8 rounded hover:bg-c-surface-variant"
>
<i class="ph ph-copy inline-block w-6 text-2xl"></i> <i class="ph ph-copy inline-block w-6 text-2xl"></i>
</button> </button>
<button <button type="button" class="absolute top-1 right-1 rounded hover:bg-c-surface-variant">
type="button"
class="absolute top-1 right-1 rounded hover:bg-c-surface-variant"
>
<i class="ph ph-x-circle inline-block w-6 text-2xl"></i> <i class="ph ph-x-circle inline-block w-6 text-2xl"></i>
</button> </button>
</div> </div>
<button type="submit" class="hidden"
x-effect="user_dni.length >= 8? $el.click() : null"
>
Buscar
</button>
</form> </form>
<p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0"> <p class="relative max-w-[14rem] mx-auto p-1 text-c-error text-sm select-none opacity-0">

View File

@ -11,8 +11,13 @@
<!-- htmx --> <!-- htmx -->
<script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script> <script defer src="https://unpkg.com/htmx.org@1.9.8/dist/htmx.min.js"></script>
<script defer src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
<script defer src="https://unpkg.com/htmx.org/dist/ext/class-tools.js"></script>
<script defer src="https://unpkg.com/htmx.org/dist/ext/loading-states.js"></script>
<!-- color manager --> <!-- color manager -->
<script defer src="/colorManager.js"></script> <script defer src="/colorManager.js"></script>
<!-- Phosphor icons --> <!-- Phosphor icons -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" /> <link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css" />
<!-- Alpinejs -->
<script src="https://unpkg.com/alpinejs" defer></script>
</head> </head>