diff --git a/resources/public/output.css b/resources/public/output.css index 96983899..a6672f5a 100644 --- a/resources/public/output.css +++ b/resources/public/output.css @@ -1155,6 +1155,10 @@ input:checked + .toggle-bg { margin: 1rem; } +.m-12 { + margin: 3rem; +} + .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; @@ -1332,6 +1336,10 @@ input:checked + .toggle-bg { height: 1.5rem; } +.h-64 { + height: 16rem; +} + .h-8 { height: 2rem; } @@ -1344,47 +1352,43 @@ input:checked + .toggle-bg { height: 100%; } -.h-screen { - height: 100vh; -} - -.h-64 { - height: 16rem; -} - .h-min { height: -moz-min-content; height: min-content; } -.h-\[90vh\] { - height: 90vh; +.h-screen { + height: 100vh; +} + +.h-24 { + height: 6rem; } .max-h-96 { max-height: 24rem; } -.max-h-full { - max-height: 100%; -} - -.max-h-\[90vh\] { - max-height: 90vh; -} - -.max-h-\[100vh\] { - max-height: 100vh; -} - .max-h-\[80vh\] { max-height: 80vh; } +.max-h-full { + max-height: 100%; +} + +.max-h-\[50\%\] { + max-height: 50%; +} + .w-1\/2 { width: 50%; } +.w-1\/4 { + width: 25%; +} + .w-16 { width: 4rem; } @@ -1454,21 +1458,32 @@ input:checked + .toggle-bg { width: 100vw; } -.w-min { - width: -moz-min-content; - width: min-content; +.w-\[900px\] { + width: 900px; } -.w-8\/12 { - width: 66.666667%; +.w-\[1200px\] { + width: 1200px; } -.w-6\/12 { - width: 50%; +.w-\[2900px\] { + width: 2900px; } -.w-1\/4 { - width: 25%; +.min-w-\[25\%\] { + min-width: 25%; +} + +.min-w-\[500px\] { + min-width: 500px; +} + +.min-w-\[450px\] { + min-width: 450px; +} + +.min-w-\[700px\] { + min-width: 700px; } .max-w-2xl { @@ -1495,8 +1510,8 @@ input:checked + .toggle-bg { max-width: 1024px; } -.max-w-xs { - max-width: 20rem; +.max-w-6xl { + max-width: 72rem; } .flex-1 { @@ -1709,18 +1724,10 @@ input:checked + .toggle-bg { flex-wrap: wrap; } -.place-content-center { - place-content: center; -} - .place-items-center { place-items: center; } -.content-center { - align-content: center; -} - .items-start { align-items: flex-start; } @@ -1757,6 +1764,10 @@ input:checked + .toggle-bg { justify-content: space-between; } +.justify-stretch { + justify-content: stretch; +} + .justify-items-stretch { justify-items: stretch; } @@ -1857,6 +1868,10 @@ input:checked + .toggle-bg { align-self: center; } +.self-stretch { + align-self: stretch; +} + .justify-self-end { justify-self: end; } @@ -2148,6 +2163,11 @@ input:checked + .toggle-bg { background-color: rgb(255 230 230 / var(--tw-bg-opacity)); } +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(255 3 3 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -2162,6 +2182,11 @@ input:checked + .toggle-bg { background-color: rgb(253 246 178 / var(--tw-bg-opacity)); } +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(194 120 3 / var(--tw-bg-opacity)); +} + .\!bg-opacity-0 { --tw-bg-opacity: 0 !important; } @@ -2202,8 +2227,8 @@ input:checked + .toggle-bg { padding: 1rem; } -.p-6 { - padding: 1.5rem; +.p-8 { + padding: 2rem; } .px-2 { @@ -2226,6 +2251,11 @@ input:checked + .toggle-bg { padding-right: 1.25rem; } +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + .py-0 { padding-top: 0px; padding-bottom: 0px; @@ -2266,11 +2296,6 @@ input:checked + .toggle-bg { padding-bottom: 1.25rem; } -.px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; -} - .pb-2 { padding-bottom: 0.5rem; } @@ -3614,12 +3639,12 @@ input:checked + .toggle-bg { display: block; } - .sm\:max-h-\[90vh\] { - max-height: 90vh; + .sm\:items-center { + align-items: center; } - .sm\:max-w-2xl { - max-width: 42rem; + .sm\:justify-center { + justify-content: center; } .sm\:rounded-lg { @@ -3666,6 +3691,10 @@ input:checked + .toggle-bg { align-items: center; } + .md\:justify-center { + justify-content: center; + } + .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); @@ -3677,6 +3706,10 @@ input:checked + .toggle-bg { margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0px * var(--tw-space-y-reverse)); } + + .md\:p-12 { + padding: 3rem; + } } @media (min-width: 1024px) { diff --git a/src/clj/auto_ap/ssr/admin/accounts.clj b/src/clj/auto_ap/ssr/admin/accounts.clj index 6dad6db6..5c913a68 100644 --- a/src/clj/auto_ap/ssr/admin/accounts.clj +++ b/src/clj/auto_ap/ssr/admin/accounts.clj @@ -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 diff --git a/src/clj/auto_ap/ssr/admin/transaction_rules.clj b/src/clj/auto_ap/ssr/admin/transaction_rules.clj index 5f72215d..3d0deb2d 100644 --- a/src/clj/auto_ap/ssr/admin/transaction_rules.clj +++ b/src/clj/auto_ap/ssr/admin/transaction_rules.clj @@ -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 diff --git a/src/clj/auto_ap/ssr/components/dialog.clj b/src/clj/auto_ap/ssr/components/dialog.clj index 3ee49af6..0a5f7474 100644 --- a/src/clj/auto_ap/ssr/components/dialog.clj +++ b/src/clj/auto_ap/ssr/components/dialog.clj @@ -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 diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj index c42f82ed..61db8e31 100644 --- a/src/clj/auto_ap/ssr/components/inputs.clj +++ b/src/clj/auto_ap/ssr/components/inputs.clj @@ -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" diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj index 6ab04c9e..cc7ad535 100644 --- a/src/clj/auto_ap/ssr/ui.clj +++ b/src/clj/auto_ap/ssr/ui.clj @@ -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 + ] + ]]]]]])) diff --git a/src/clj/auto_ap/ssr/users.clj b/src/clj/auto_ap/ssr/users.clj index 0f650dd0..7861f1d2 100644 --- a/src/clj/auto_ap/ssr/users.clj +++ b/src/clj/auto_ap/ssr/users.clj @@ -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)]]