Fixes modal, but users still have to say h-full on every element leading to the card

This commit is contained in:
2023-10-25 12:43:00 -07:00
parent b4ea51df84
commit deaad7513c
7 changed files with 106 additions and 70 deletions

View File

@@ -280,18 +280,20 @@
(fc/start-form form-params form-errors
[:div {:x-data (hx/json {"accountName" (or (:account/name form-params) (:account/numeric-code entity))
"accountCode" (or (:account/numeric-code form-params) (:account/numeric-code entity) )})
:hx-target "this"}
:hx-target "this"
:class "w-full h-full"}
(com/modal
{}
[:form (-> {:hx-ext "response-targets"
:hx-swap "outerHTML swap:300ms"
:hx-target-400 "#form-errors .error-content"}
:hx-target-400 "#form-errors .error-content"
:class "h-full"}
(assoc (if (:db/id entity)
:hx-put
:hx-post)
(str (bidi/path-for ssr-routes/only-routes
:admin-transaction-rule-edit-save))))
[:fieldset {:class "hx-disable"}
[:fieldset {:class "hx-disable h-full"}
(com/modal-card
{}
[:div.flex [:div.p-2 "Account"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600

View File

@@ -400,7 +400,7 @@
:hx-swap "outerHTML swap:300ms"
:hx-target-400 "#form-errors .error-content"
:x-trap "true"
:class "group/form"
:class "group/form w-full h-full"
(if (:db/id entity)
:hx-put
:hx-post) (str (bidi/path-for ssr-routes/only-routes :admin-transaction-rule-edit-save))}
@@ -574,7 +574,6 @@
;; TODO check to see if it should be called "Shared" or "shared" for the value
;; TODO hydrate nested types more easily. make it easy to hydrate so you don't do weird sometimes pulls
(defn location-select [{{:keys [name account-id client-id value] :as qp} :query-params}]
(html-response (location-select* {:name name

View File

@@ -5,19 +5,16 @@
(defn modal- [params & children]
[:div (-> params
(update :class #(-> %
(or "max-w-4xl w-1/4 overflow-visible")
(hh/add-class "h-min")))
(assoc "@click.outside" "open=false"))
(assoc "@click.outside" "open=false")
(update :class (fnil hh/add-class "") "w-full h-full"))
children])
(defn modal-card- [params header content footer]
[:div#modal-card (update params
:class (fn [c] (-> c
(or "w-full")
(or "w-full p-4 h-full")
)))
[:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content w-full flex flex-col max-h-[80vh]"}
[:div {:class "bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white modal-content w-full flex flex-col h-full"}
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 shrink-0"} header]
[:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
#_[:div.bg-green-300.w-full.h-64

View File

@@ -109,7 +109,7 @@ c.clearChoices();
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down]]]
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-10 mt-1"
[:ul.dropdown-contents {:class "absolute bg-gray-50 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50 mt-1"
"@keydown.escape" "open = false; value = {value: '', label: '' }"
"x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200"
"x-transition:enter-start" "!opacity-0 !mt-0"

View File

@@ -72,7 +72,7 @@ input[type=number] {
"@modalopen.document" "open=true"
"@modalclose.document" "open=false"}
[:div {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"
[:div {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40 md:p-12"
"x-show" "open"
":aria-hidden" "!open"
"x-transition:enter" "duration-300"
@@ -86,7 +86,8 @@ input[type=number] {
;; div that is forced to the maximum allowed size. inside that will be a div that just centers
;; the elements, allowing it to grow as necessar. Then make the modal on the inside of this
;; div just use flexbox to make the inside part be the part that scrolls
[:div#modal-content {:class (str "inset-0 max-h-[80vh] sm:m-12 flex justify-center items-center shrink h-full")
[:div {;;:class (str "sm:m-12 flex justify-center items-center bg-green-500 items-stretch inset-0")
:class "flex h-full w-full justify-stretch md:justify-center items-stretch md:items-center "
"x-trap.inert.noscroll" "open"
"x-trap.inert" "open"
"x-show" "open"
@@ -95,4 +96,8 @@ input[type=number] {
"x-transition:enter-end" "!bg-opacity-100 !translate-y-0"
"x-transition:leave" "duration-300"
"x-transition:leave-start" "!opacity-100 !translate-y-0"
"x-transition:leave-end" "!opacity-0 !translate-y-32"}]]]]]))
"x-transition:leave-end" "!opacity-0 !translate-y-32"}
[:div.flex.items-center.justify-center.max-w-6xl {:class "min-w-[700px] max-h-full "}
[:div#modal-content.flex.flex-col.self-stretch {:class "min-w-[700px] md:p-12"} ;;.overflow-scroll
]
]]]]]]))

View File

@@ -298,8 +298,8 @@
:request-method :put))
:hx-swap "outerHTML swap:300ms"
:hx-target-400 "#form-errors .error-content"
:class "w-full"}
[:fieldset {:class "hx-disable"}
:class "w-full h-full"}
[:fieldset {:class "hx-disable h-full"}
(com/modal-card
{}
[:div.flex [:div.p-2 "User"] [:p.ml-2.rounded.bg-gray-200.p-2.dark:bg-gray-600 (:user/name entity)]]