nellemann
/
hellomicronaut
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix layout

This commit is contained in:
Mark Nellemann 2023-03-03 07:44:49 +01:00
parent 9e9dcb2fe9
commit b6f9275218
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/resources/assets/application.css Normal file
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
}

0
src/main/resources/assets/application.js Normal file
View File

1
src/main/resources/views/defaultLayout.html
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>

10
src/main/resources/views/index.html
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>