Compare commits

...

2 Commits

Author SHA1 Message Date
Mark Nellemann b6f9275218 Fix layout 2023-03-03 07:44:49 +01:00
Mark Nellemann 9e9dcb2fe9 Fix layout 2023-03-03 07:44:43 +01:00
5 changed files with 21 additions and 5 deletions

View File

@ -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
}

View File

View File

@ -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

View File

@ -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>

View File

@ -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>