diff --git a/resources/input.css b/resources/input.css index 921b1ff9..9e3a576e 100644 --- a/resources/input.css +++ b/resources/input.css @@ -165,3 +165,26 @@ .choices[data-type*="select-one"] .choices__button { right:auto !important; } + +.arrow, +.arrow::before { + position: absolute; + width: 24px; + height: 24px; + background: inherit; +} + +.arrow { + visibility: hidden; +} + + +.arrow::before { + visibility: visible; + content: ''; + transform: rotate(45deg); +} + +.arrow { + bottom: -4px; +} diff --git a/resources/public/output.css b/resources/public/output.css index a6672f5a..571f55cd 100644 --- a/resources/public/output.css +++ b/resources/public/output.css @@ -1155,10 +1155,6 @@ input:checked + .toggle-bg { margin: 1rem; } -.m-12 { - margin: 3rem; -} - .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; @@ -1352,43 +1348,22 @@ input:checked + .toggle-bg { height: 100%; } -.h-min { - height: -moz-min-content; - height: min-content; -} - .h-screen { height: 100vh; } -.h-24 { - height: 6rem; -} - .max-h-96 { max-height: 24rem; } -.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; } @@ -1458,30 +1433,6 @@ input:checked + .toggle-bg { width: 100vw; } -.w-\[900px\] { - width: 900px; -} - -.w-\[1200px\] { - width: 1200px; -} - -.w-\[2900px\] { - width: 2900px; -} - -.min-w-\[25\%\] { - min-width: 25%; -} - -.min-w-\[500px\] { - min-width: 500px; -} - -.min-w-\[450px\] { - min-width: 450px; -} - .min-w-\[700px\] { min-width: 700px; } @@ -1494,6 +1445,10 @@ input:checked + .toggle-bg { max-width: 56rem; } +.max-w-6xl { + max-width: 72rem; +} + .max-w-lg { max-width: 32rem; } @@ -1510,10 +1465,6 @@ input:checked + .toggle-bg { max-width: 1024px; } -.max-w-6xl { - max-width: 72rem; -} - .flex-1 { flex: 1 1 0%; } @@ -1538,10 +1489,6 @@ input:checked + .toggle-bg { flex-grow: 1; } -.grow { - flex-grow: 1; -} - .basis-1\/4 { flex-basis: 25%; } @@ -1884,10 +1831,6 @@ input:checked + .toggle-bg { overflow: hidden; } -.overflow-visible { - overflow: visible; -} - .overflow-scroll { overflow: scroll; } @@ -1950,6 +1893,11 @@ input:checked + .toggle-bg { border-top-right-radius: 0.5rem; } +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + .border { border-width: 1px; } @@ -2163,11 +2111,6 @@ 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)); @@ -2182,11 +2125,6 @@ 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; } @@ -2207,10 +2145,6 @@ input:checked + .toggle-bg { padding: 0.25rem; } -.p-12 { - padding: 3rem; -} - .p-2 { padding: 0.5rem; } @@ -2227,10 +2161,6 @@ input:checked + .toggle-bg { padding: 1rem; } -.p-8 { - padding: 2rem; -} - .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -2563,6 +2493,12 @@ input:checked + .toggle-bg { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-2xl { + --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + .outline { outline-style: solid; } @@ -3010,6 +2946,28 @@ input:checked + .toggle-bg { right:auto !important; } +.arrow, +.arrow::before { + position: absolute; + width: 24px; + height: 24px; + background: inherit; +} + +.arrow { + visibility: hidden; +} + +.arrow::before { + visibility: visible; + content: ''; + transform: rotate(45deg); +} + +.arrow { + bottom: -4px; +} + .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; @@ -3631,22 +3589,10 @@ input:checked + .toggle-bg { } @media (min-width: 640px) { - .sm\:m-12 { - margin: 3rem; - } - .sm\:block { display: block; } - .sm\:items-center { - align-items: center; - } - - .sm\:justify-center { - justify-content: center; - } - .sm\:rounded-lg { border-radius: 0.5rem; } @@ -3655,10 +3601,6 @@ input:checked + .toggle-bg { padding: 1.5rem; } - .sm\:p-12 { - padding: 3rem; - } - .sm\:py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj index c0f187f1..aeab5789 100644 --- a/src/clj/auto_ap/ssr/components/inputs.clj +++ b/src/clj/auto_ap/ssr/components/inputs.clj @@ -84,7 +84,7 @@ c.clearChoices(); :popper nil}) :x-modelable "value.value" :x-model (:x-model params) - :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed'})" + :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 20]}}})" } [:a {:class (-> (hh/add-class (or (:class params) "") default-input-classes) (hh/add-class "cursor-pointer")) @@ -113,7 +113,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 "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-lg py-1 w-max z-50" + [:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50" "x-ref" "dropdown" "@keydown.escape" "open = false; value = {value: '', label: '' }" "x-transition:enter" "ease-[cubic-bezier(.3,2.3,.6,1)] duration-200" @@ -124,15 +124,20 @@ c.clearChoices(); "x-transition:leave-end" "!opacity-0 !mt-0" "x-show " "open" "x-trap" "open" - "@click.outside" "open=false; console.log('is this ihid')"} - [:input {:type "text" :class (hh/add-class (or (:class params) "") default-input-classes) + "@click.outside" "open=false;"} + + [:input {:type "text" + :class (-> (:class params) + (or "") + (hh/add-class default-input-classes) + (hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full")) "x-model" "search" "placeholder" (:placeholder params) "@keydown.down.prevent" "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active" "@keydown.up.prevent" "active --; active = active < 0 ? 0 : active" - "@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''}; console.log('are we here')" + "@keydown.enter.prevent" "open = false; value = elements.length > 0 ? $data.elements[active] : {'value': '', label: ''};" "x-init" "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}] - [:div.dropdown-options + [:div.dropdown-options {:class "rounded-b-lg overflow-hidden"} [:template {:x-for "(element, index) in elements"} [:li [:a {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-300 [&.active]:dark:bg-primary-700 text-gray-800 dark:text-gray-100" :href "#" @@ -143,9 +148,11 @@ c.clearChoices(); "x-html" "element.label"}]]] [:template {:x-if "elements.length == 0"} [:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800 dark:text-gray-100 text-xs "} - "No results found"]]]]]) + "No results found"]]] + ]]) +;; TODO fix search modal (defn use-size [size] (if (= :small size) (str " " "text-xs p-2") diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj index f9eb0bec..68e01e9a 100644 --- a/src/clj/auto_ap/ssr/ui.clj +++ b/src/clj/auto_ap/ssr/ui.clj @@ -66,7 +66,6 @@ input[type=number] { contents [:script {:src "/js/flowbite.min.js"}] - [:div#tooltip.bg-red-500.p-12 {:role "tooltip"}] [:div#modal-holder {:tabindex "-1", :class "fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen" "x-show" "open" @@ -85,11 +84,7 @@ input[type=number] { "x-transition:leave-start" "!bg-opacity-50" "x-transition:leave-end" "!bg-opacity-0"} - ;; 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 {;;:class (str "sm:m-12 flex justify-center items-center bg-green-500 items-stretch inset-0") + [:div { :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"