improvements

This commit is contained in:
2023-10-22 21:00:04 -07:00
parent a6032e2be2
commit fc0392a235
9 changed files with 179 additions and 74 deletions

View File

@@ -77,17 +77,17 @@ input[type=number] {
"x-transition:leave-start" "!bg-opacity-50"
"x-transition:leave-end" "!bg-opacity-0"}
[:div.flex.place-items-center.place-content-center.w-full.h-full.p-12
[:div {:class (str "w-full sm:max-w-2xl sm:rounded-lg overflow-scroll max-h-full sm:max-h-[90vh]")
"@click.outside" "open=false"
"x-trap.inert.noscroll" "open"
"x-trap.inert" "open"
"x-show" "open"
"x-transition:enter" "ease-out duration-300"
"x-transition:enter-start" "!bg-opacity-0 !translate-y-32"
"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"}
[:div#modal-content {:class "flex items-center justify-between pb-2"}]]]]]]]))
;; TODO to get this right i think what needs to happen is to just set this up as having a single
;; 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")
"x-trap.inert.noscroll" "open"
"x-trap.inert" "open"
"x-show" "open"
"x-transition:enter" "ease-out duration-300"
"x-transition:enter-start" "!bg-opacity-0 !translate-y-32"
"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"}]]]]]))