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

feat(15): step 4 desktop styling

This commit is contained in:
efim 2023-07-16 04:21:04 +00:00
parent 0e7d53b582
commit 5d0f58edc1
2 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -991,6 +991,10 @@ video {
padding: 0.75rem; padding: 0.75rem;
} }
.p-4 {
padding: 1rem;
}
.px-4 { .px-4 {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
@ -1644,6 +1648,11 @@ html {
padding-right: 0px; padding-right: 0px;
} }
.md\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.md\:pb-2 { .md\:pb-2 {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@ -1660,6 +1669,10 @@ html {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
.md\:pb-8 {
padding-bottom: 2rem;
}
.md\:text-4xl { .md\:text-4xl {
font-size: 2.25rem; font-size: 2.25rem;
line-height: 2.5rem; line-height: 2.5rem;
@ -1685,6 +1698,11 @@ html {
line-height: 2.25rem; line-height: 2.25rem;
} }
.md\:text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.md\:drop-shadow-2xl { .md\:drop-shadow-2xl {
--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)); --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
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);

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

@ -107,14 +107,14 @@
<h1 class="text-2xl font-bold md:text-4xl text-marine-blue"> <h1 class="text-2xl font-bold md:text-4xl text-marine-blue">
Finishing up Finishing up
</h1> </h1>
<p class="pt-3 pb-5 text-cool-gray"> <p class="pt-3 pb-5 md:pb-8 text-cool-gray">
Double-check everything looks OK before confirming. Double-check everything looks OK before confirming.
</p> </p>
<div <div
class="flex flex-col px-3 w-full text-sm rounded-lg divide-y md:text-base bg-magnolia/75" class="flex flex-col w-full text-sm rounded-lg divide-y md:text-base bg-magnolia/75"
id="selection-overview" id="selection-overview"
> >
<div id="selected-plan" class="grid py-3 grid-cols-[1fr_auto]"> <div id="selected-plan" class="grid p-3 md:p-6 grid-cols-[1fr_auto]">
<h2 th:text="${formData.fullPlanName}" <h2 th:text="${formData.fullPlanName}"
class="font-bold text-marine-blue" class="font-bold text-marine-blue"
>Arcade (Monthly)</h2> >Arcade (Monthly)</h2>
@ -134,7 +134,7 @@
>Change</a >Change</a
> >
</div> </div>
<div id="selected-addons" class="flex flex-col gap-y-4 py-3 mp-10" <div id="selected-addons" class="flex flex-col gap-y-4 p-3 md:p-6 mp-10"
th:if="not ${formData.userAnswers.step3.addonsAsJava.isEmpty}" th:if="not ${formData.userAnswers.step3.addonsAsJava.isEmpty}"
> >
<div <div
@ -152,7 +152,7 @@
</div> </div>
</div> </div>
<section class="flex flex-row p-3 mt-5"> <section class="flex flex-row p-3 mt-5 md:px-6">
<p class="grow text-cool-gray"> <p class="grow text-cool-gray">
Total (per Total (per
<span <span
@ -162,7 +162,7 @@
</p> </p>
<p <p
th:text="|+$${formData.fullOrderPrice}/${formData.periodCostLabel}|" th:text="|+$${formData.fullOrderPrice}/${formData.periodCostLabel}|"
class="font-bold text-purplish-blue" class="font-bold md:text-lg text-purplish-blue"
> >
$120 $120
</p> </p>
@ -180,7 +180,7 @@
hx-swap="outerHTML" hx-swap="outerHTML"
hx-target="#form-step" hx-target="#form-step"
href="step3.html" href="step3.html"
class="ml-6 text-sm font-semibold md:pb-3 md:ml-20 md:text-base text-cool-gray" class="ml-6 text-sm font-semibold md:pb-3 md:ml-24 md:text-base text-cool-gray"
hx-params="not form-confirmed" hx-params="not form-confirmed"
>Go Back</a >Go Back</a
> >