efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(15): index placeholder for the form

Browse Source 
to be htmx'ed into getting appropriate step for the session
This commit is contained in:
efim
2023-07-13 19:31:53 +00:00
parent 03aa9f8b94
commit aca7ae8ecf
5 changed files with 78 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
15-multi-step-form/src/main/resources/templates/index.html
View File

@@ -12,11 +12,12 @@
th:href="'public/images/favicon-32x32.png'"
href="../public/images/favicon-32x32.png"
/>
<link th:href="'public/out.css'" href="../public/out.css" rel="stylesheet" />
<script
th:src="'public/htmx.min.js'"
src="../public/htmx.min.js"
></script>
<link
th:href="'public/out.css'"
href="../public/out.css"
rel="stylesheet"
/>
<script th:src="'public/htmx.min.js'" src="../public/htmx.min.js"></script>
<title>Frontend Mentor | Multi-step form</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
@@ -31,15 +32,22 @@
</style>
</head>
<body>
<main class="bg-light-gray h-screen w-screen">
<section
class="absolute top-0 end-0"
>
<button
hx-get="/force-new-session"
>Request new session</button>
<main class="grid place-content-center w-screen h-screen bg-magnolia">
<section>
<img class="w-14 text-green-500 fill-current" th:src="'public/images/tail-spin.svg'" src="../public/images/tail-spin.svg" alt="loading..." />
</section>
<section class="absolute top-0 end-0" id="new-session-control">
<button hx-get="/force-new-session">Request new session</button>
</section>
<!-- here be immediate hx-get for the form. to subscitute the body -->
<div class="fixed inset-x-0 bottom-0 attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</div>
</main>
</body>
</html>

4
15-multi-step-form/src/main/resources/templates/step1.html
View File

@@ -35,7 +35,7 @@
</p>
<![endif]-->
<article
<form
class="flex flex-col items-center w-screen h-screen md:grid md:items-start md:p-5 md:bg-white md:rounded-2xl md:grid-cols-[auto_1fr] md:w-desktop-form md:h-desktop-form md:drop-shadow-2xl"
id="form-step"
>
@@ -137,7 +137,7 @@
>Next Step</a
>
</section>
</article>
</form>
<div class="fixed inset-x-0 bottom-0 attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"