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;
|
||||
}
|
||||
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
|
@ -927,6 +931,11 @@ video {
|
|||
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 {
|
||||
--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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ case class Routes()(implicit cc: castor.Context, log: cask.Logger)
|
|||
templateEngine.setTemplateResolver(templateResolver)
|
||||
|
||||
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("/")
|
||||
def getIndex(ctx: cask.Request) = {
|
||||
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")
|
||||
def publicFiles() = "public"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue