feat(15): index placeholder for the form
to be htmx'ed into getting appropriate step for the session
This commit is contained in:
efim
parent
03aa9f8b94
commit
aca7ae8ecf
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
||||||
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
|
||||||
|
<stop stop-color="hsl(228, 100%, 84%)" stop-opacity="0" offset="0%"/>
|
||||||
|
<stop stop-color="hsl(228, 100%, 84%)" stop-opacity=".631" offset="63.146%"/>
|
||||||
|
<stop stop-color="hsl(228, 100%, 84%)" offset="100%"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(1 1)">
|
||||||
|
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 18 18"
|
||||||
|
to="360 18 18"
|
||||||
|
dur="0.9s"
|
||||||
|
repeatCount="indefinite" />
|
||||||
|
</path>
|
||||||
|
<circle fill="#fff" cx="36" cy="18" r="1">
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 18 18"
|
||||||
|
to="360 18 18"
|
||||||
|
dur="0.9s"
|
||||||
|
repeatCount="indefinite" />
|
||||||
|
</circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -834,6 +834,10 @@ video {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fill-current {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
.p-1 {
|
.p-1 {
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
@ -927,6 +931,11 @@ video {
|
||||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-green-500 {
|
||||||
|
--tw-text-opacity: 1;
|
||||||
|
color: rgb(34 197 94 / var(--tw-text-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
.drop-shadow-xl {
|
.drop-shadow-xl {
|
||||||
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
|
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
|
||||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
||||||
|
|
|
||||||
|
|
@ -12,11 +12,12 @@
|
||||||
th:href="'public/images/favicon-32x32.png'"
|
th:href="'public/images/favicon-32x32.png'"
|
||||||
href="../public/images/favicon-32x32.png"
|
href="../public/images/favicon-32x32.png"
|
||||||
/>
|
/>
|
||||||
<link th:href="'public/out.css'" href="../public/out.css" rel="stylesheet" />
|
<link
|
||||||
<script
|
th:href="'public/out.css'"
|
||||||
th:src="'public/htmx.min.js'"
|
href="../public/out.css"
|
||||||
src="../public/htmx.min.js"
|
rel="stylesheet"
|
||||||
></script>
|
/>
|
||||||
|
<script th:src="'public/htmx.min.js'" src="../public/htmx.min.js"></script>
|
||||||
<title>Frontend Mentor | Multi-step form</title>
|
<title>Frontend Mentor | Multi-step form</title>
|
||||||
|
|
||||||
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
||||||
|
|
@ -31,15 +32,22 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="bg-light-gray h-screen w-screen">
|
<main class="grid place-content-center w-screen h-screen bg-magnolia">
|
||||||
<section
|
|
||||||
class="absolute top-0 end-0"
|
<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..." />
|
||||||
<button
|
</section>
|
||||||
hx-get="/force-new-session"
|
|
||||||
>Request new session</button>
|
<section class="absolute top-0 end-0" id="new-session-control">
|
||||||
|
<button hx-get="/force-new-session">Request new session</button>
|
||||||
</section>
|
</section>
|
||||||
<!-- here be immediate hx-get for the form. to subscitute the body -->
|
<!-- 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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
</p>
|
</p>
|
||||||
<![endif]-->
|
<![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"
|
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"
|
id="form-step"
|
||||||
>
|
>
|
||||||
|
|
@ -137,7 +137,7 @@
|
||||||
>Next Step</a
|
>Next Step</a
|
||||||
>
|
>
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</form>
|
||||||
<div class="fixed inset-x-0 bottom-0 attribution">
|
<div class="fixed inset-x-0 bottom-0 attribution">
|
||||||
Challenge by
|
Challenge by
|
||||||
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,11 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
|
||||||
templateEngine.setTemplateResolver(templateResolver)
|
templateEngine.setTemplateResolver(templateResolver)
|
||||||
|
|
||||||
val sessoinCookieName = "sessionId"
|
val sessoinCookieName = "sessionId"
|
||||||
|
/**
|
||||||
|
* This route works with and without 'sessionId' cookie present
|
||||||
|
* set's this cookie if not present, and returns initial 'index.html'
|
||||||
|
* where the form is not yet initialized, and will be requested for the session
|
||||||
|
*/
|
||||||
@cask.get("/")
|
@cask.get("/")
|
||||||
def getIndex(ctx: cask.Request) = {
|
def getIndex(ctx: cask.Request) = {
|
||||||
val sessionCookie = ctx.cookies.get(sessoinCookieName)
|
val sessionCookie = ctx.cookies.get(sessoinCookieName)
|
||||||
|
|
@ -48,6 +52,16 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This method only works when cookie 'sessionId' is present
|
||||||
|
* will get or init Form State for the session,
|
||||||
|
* and return last unsubmitted form step fragment
|
||||||
|
*/
|
||||||
|
@cask.get("/get-form")
|
||||||
|
def getForm(sessionId: cask.Cookie) = {
|
||||||
|
cask.Response("yoyo")
|
||||||
|
}
|
||||||
|
|
||||||
@cask.staticResources("/public")
|
@cask.staticResources("/public")
|
||||||
def publicFiles() = "public"
|
def publicFiles() = "public"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue