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

feat(15): making fragments, loading based on step

Browse Source
This commit is contained in:
efim
2023-07-14 05:03:18 +00:00
parent aca7ae8ecf
commit f8f1580fc7
9 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
15-multi-step-form/src/main/resources/public/out.css
View File

@@ -665,6 +665,10 @@ video {
height: 100vh;
}
.h-40 {
height: 10rem;
}
.w-11\/12 {
width: 91.666667%;
}

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

@@ -33,15 +33,18 @@
</head>
<body>
<main class="grid place-content-center w-screen h-screen bg-magnolia">
<section>
<section
hx-get="/get-form"
hx-trigger="load"
hx-swap="outerHTML"
>
<!-- here be immediate hx-get for the form. to subscitute the body -->
<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"

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

@@ -38,6 +38,7 @@
<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"
th:fragment="formFragment(formData)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"

5
15-multi-step-form/src/main/resources/templates/step2.html
View File

@@ -36,9 +36,10 @@
<![endif]-->
<main class="grid place-content-center h-screen">
<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"
th:fragment="formFragment(formData)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -188,7 +189,7 @@
>Next Step</a
>
</section>
</article>
</form>
</main>
</body>
</html>

5
15-multi-step-form/src/main/resources/templates/step3.html
View File

@@ -36,9 +36,10 @@
<![endif]-->
<main class="grid place-content-center h-screen">
<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"
th:fragment="formFragment(formData)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -181,7 +182,7 @@
>Next Step</a
>
</section>
</article>
</form>
</main>
</body>
</html>

5
15-multi-step-form/src/main/resources/templates/step4.html
View File

@@ -36,9 +36,10 @@
<![endif]-->
<main class="grid place-content-center h-screen">
<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"
th:fragment="formFragment(formData)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"
@@ -140,7 +141,7 @@
>Confirm</a
>
</section>
</article>
</form>
</main>
</body>
</html>

1
15-multi-step-form/src/main/resources/templates/step5.html
View File

@@ -39,6 +39,7 @@
<article
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"
th:fragment="formFragment(formData)"
>
<summary
class="w-full h-44 bg-no-repeat md:row-span-2 bg-sidebar-mobile marker:text-white md:bg-sidebar-desktop md:h-[568px] md:w-[274px]"