feat(ssr): subtle fade-in on wizard step cards
§3 animations: the migrated wizard step cards had no transition, so step→step swaps and modal open were flat. The old mm/* slide system was deleted in Phase 11 (and its classes purged from CSS), and the transaction-edit "reference" uses an undefined `last-modal-step` no-op — so there was no clean slide to restore. Apply the codebase's existing `fade-in transition-opacity duration-300` primitive (`.htmx-added .fade-in` in input.css) to all three wizard step cards (new-invoice basic-details + accounts, vendor step-card, client step-card). Each card now fades in on open and on every step swap. Verified live: cards always settle to opacity 1 (never stuck invisible) on both open and step navigation. Richer directional (forward/back) slide transitions are left for a design pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -517,7 +517,7 @@
|
||||
[{:keys [title active all-data nav body]}]
|
||||
(com/modal-card-advanced
|
||||
{"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}"
|
||||
:class " md:w-[820px] md:h-[560px] w-full h-full"
|
||||
:class " md:w-[820px] md:h-[560px] w-full h-full fade-in transition-opacity duration-300"
|
||||
:x-data (hx/json {"clientName" (:client/name all-data)})}
|
||||
(com/modal-header {} [:div.flex [:div.p-2 title]
|
||||
[:p.ml-2.rounded.bg-gray-50.p-2.dark:bg-gray-600 [:span {:x-text "clientName"}]]])
|
||||
|
||||
@@ -373,7 +373,7 @@
|
||||
[{:keys [title active all-data nav body]}]
|
||||
(com/modal-card-advanced
|
||||
{"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}"
|
||||
:class " md:w-[760px] md:h-[520px] w-full h-full"
|
||||
:class " md:w-[760px] md:h-[520px] w-full h-full fade-in transition-opacity duration-300"
|
||||
:x-data (hx/json {"vendorName" (:vendor/name all-data)
|
||||
"showPrintAs" (boolean (not-empty (:vendor/print-as all-data)))
|
||||
"printAs" (:vendor/print-as all-data)})}
|
||||
|
||||
@@ -333,7 +333,7 @@
|
||||
client-val (or (:invoice/client data) client-from-req)]
|
||||
(com/modal-card-advanced
|
||||
{"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}"
|
||||
:class " md:w-[750px] md:h-[600px] w-full h-full"
|
||||
:class " md:w-[750px] md:h-[600px] w-full h-full fade-in transition-opacity duration-300"
|
||||
"x-data" ""}
|
||||
(com/modal-header {} [:div.p-2 (if extant? "Edit invoice" "New invoice")])
|
||||
(com/modal-body
|
||||
@@ -526,7 +526,7 @@
|
||||
total (expense-accounts-total* rows)]
|
||||
(com/modal-card-advanced
|
||||
{"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}"
|
||||
:class " md:w-[750px] md:h-[600px] w-full h-full"
|
||||
:class " md:w-[750px] md:h-[600px] w-full h-full fade-in transition-opacity duration-300"
|
||||
"x-data" ""}
|
||||
(com/modal-header {} [:div.p-2 "Invoice accounts "])
|
||||
(com/modal-body
|
||||
|
||||
Reference in New Issue
Block a user