Compare commits
2 Commits
13169b8452
...
b6f9275218
Author | SHA1 | Date |
---|---|---|
Mark Nellemann | b6f9275218 | |
Mark Nellemann | 9e9dcb2fe9 |
|
@ -0,0 +1,10 @@
|
|||
.htmx-indicator{
|
||||
opacity:0;
|
||||
transition: opacity 500ms ease-in;
|
||||
}
|
||||
.htmx-request .htmx-indicator{
|
||||
opacity:1
|
||||
}
|
||||
.htmx-request.htmx-indicator{
|
||||
opacity:1
|
||||
}
|
|
@ -0,0 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#000000"/>
|
||||
<path d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z" fill="#000000"/>
|
||||
</svg>
|
After Width: | Height: | Size: 619 B |
|
@ -8,6 +8,7 @@
|
|||
<title th:replace="${title}">Hello Micronaut</title>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
|
||||
<link href="/assets/vendor/bulma/css/bulma.min.css" rel="stylesheet">
|
||||
<link href="/assets/application.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -13,24 +13,24 @@
|
|||
<article class="message">
|
||||
<div class="message-header">
|
||||
<p>Hello Micronaut from <span th:text="${hostname}"></span></span></p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body" th:text="${info}">
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-full">
|
||||
|
||||
<form hx-post="/ping">
|
||||
<div class="field has-addons" hx-target="#pong">
|
||||
<div class="control">
|
||||
<input name="message" class="input" type="text" placeholder="Enter message">
|
||||
<input name="message" class="input" type="text" placeholder="Enter message" maxlength="128" size="64">
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-info" hx-post="/ping" hx-include="[msg='message']">
|
||||
<a class="button is-info" hx-post="/ping" hx-include="[msg='message']" hx-indicator="#spinner">
|
||||
Submit
|
||||
</a>
|
||||
<img id="spinner" class="htmx-indicator" src="/img/spinner.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
|
||||
<div class="columns mt-4">
|
||||
<div class="collumn" id="pong" hx-get="/ping" hx-trigger="load, queue:last, every 3s">
|
||||
<div class="column is-full" id="pong" hx-get="/ping" hx-trigger="load, queue:last, every 3s">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue