From b6f927521868d7abde74e7eb07b0d069ffba54a9 Mon Sep 17 00:00:00 2001
From: Mark Nellemann <mark.nellemann@gmail.com>
Date: Fri, 3 Mar 2023 07:44:49 +0100
Subject: [PATCH] Fix layout

---
 src/main/resources/assets/application.css   | 10 ++++++++++
 src/main/resources/assets/application.js    |  0
 src/main/resources/views/defaultLayout.html |  1 +
 src/main/resources/views/index.html         | 10 +++++-----
 4 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/main/resources/assets/application.css
 create mode 100644 src/main/resources/assets/application.js
diff --git a/src/main/resources/assets/application.css b/src/main/resources/assets/application.css
new file mode 100644
index 0000000..b9a4b15
--- /dev/null
+++ b/src/main/resources/assets/application.css
@@ -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
+}
\ No newline at end of file
diff --git a/src/main/resources/assets/application.js b/src/main/resources/assets/application.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/resources/views/defaultLayout.html b/src/main/resources/views/defaultLayout.html
index 5eecd04..60e18b9 100644
--- a/src/main/resources/views/defaultLayout.html
+++ b/src/main/resources/views/defaultLayout.html
@@ -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>
diff --git a/src/main/resources/views/index.html b/src/main/resources/views/index.html
index ebdd5c1..149f317 100644
--- a/src/main/resources/views/index.html
+++ b/src/main/resources/views/index.html
@@ -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>
 
