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

big ui improvemet

Browse Source
This commit is contained in:
Bryce
2023-10-21 07:37:05 -07:00
parent 2fc9a71577
commit aa14a310ab
6 changed files with 438 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/clj/auto_ap/ssr/ui.clj
View File

@@ -36,7 +36,6 @@
[:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"}]
[:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"}]
[:script {:src "https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"}]
[:script {:src "https://unpkg.com/htmx.org/dist/ext/response-targets.js"}]
@@ -55,46 +54,39 @@ input::-webkit-inner-spin-button {
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
} "]
"
]
[:body {:hx-ext "disable-submit"
"x-data" (hx/json {:modalOpen false})}
[:body {:hx-ext "disable-submit"}
contents
[:script {:src "/js/flowbite.min.js"}]
[:div
{"x-data" (hx/json {"open" false})
[: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"
":aria-hidden" "!open"
"x-data" (hx/json {"open" false})
"@modalopen.document" "open=true"
"@modalclose.document" "open=false"}
[:div#modal-holder
{ :tabindex "-1", :class "fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center"
":class" "open ? '' : 'hidden'"
":aria-hidden" "!open"
}]
[:div {:class " bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"
":class" "open ? '' : 'hidden'"
[:div {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"
"x-show" "open"
":aria-hidden" "!open"
}]
#_[:script {:lang "text/javascript"}
(hiccup/raw "
var modal_element = document.getElementById('modal-holder');
var modal_options = {
placement: 'center',
backdrop: 'dynamic',
backdropClasess: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
closable: false,
onOpen: function() {
htmx.trigger(document.getElementById('modal-holder'), 'modalOpened', {});
"x-transition:enter" "duration-300"
"x-transition:enter-start" "!bg-opacity-0"
"x-transition:enter-end" "!bg-opacity-50"
"x-transition:leave" "duration-300"
"x-transition:leave-start" "!bg-opacity-50"
"x-transition:leave-end" "!bg-opacity-0"}
},
onHide: function() {
htmx.trigger(document.getElementById('modal-holder'), 'modalClosed', {});
},
};
var curModal = new Modal(modal_element, modal_options);
")
[:div.flex.place-items-center.place-content-center.w-full.h-full.p-12
[:div {:class (str "w-full sm:max-w-4xl sm:rounded-lg overflow-scroll max-h-full sm:max-h-[80vh]")
"@click.outside" "open=false"
"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"}]]]]]]]))