notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Bryce
2023-10-25 12:43:00 -07:00
parent b4ea51df84
commit deaad7513c
7 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
resources/public/output.css
View File

@@ -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) {

8
src/clj/auto_ap/ssr/admin/accounts.clj
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

3
src/clj/auto_ap/ssr/admin/transaction_rules.clj
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

11
src/clj/auto_ap/ssr/components/dialog.clj
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

2
src/clj/auto_ap/ssr/components/inputs.clj
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"

11
src/clj/auto_ap/ssr/ui.clj
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
]
]]]]]]))

4
src/clj/auto_ap/ssr/users.clj
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)]]