(ns auto-ap.ssr.ui (:require [hiccup2.core :as hiccup] [auto-ap.ssr.hx :as hx])) (defn html-page [hiccup] {:status 200 :headers {"Content-Type" "text/html"} :body (str "" (hiccup/html {} hiccup))}) (defn base-page [request contents page-name] (html-page [:html.has-navbar-fixed-top [:head [:meta {:charset "utf-8"}] [:meta {:http-equiv "X-UA-Compatible", :content "IE=edge"}] [:meta {:name "viewport", :content "width=device-width, initial-scale=1"}] [:title (str "Integreat | " page-name)] [:link {:href "/css/font.min.css", :rel "stylesheet"}] [:link {:rel "icon" :type "image/png" :href "/favicon.png"}] [:link {:rel "stylesheet", :href "/output.css"}] [:script {:src "https://unpkg.com/hyperscript.org@0.9.7/dist/_hyperscript.min.js"}] [:script {:src "https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js"}] [:script {:src "https://cdn.plaid.com/link/v2/stable/link-initialize.js"}] [:script {:src "https://unpkg.com/htmx.org@1.9.6/dist/htmx.min.js" :crossorigin= "anonymous"}] [:script {:src "https://unpkg.com/htmx.org/dist/ext/debug.js"}] [:script {:src "/js/htmx-disable.js"}] [:script {:type "text/javascript", :src "https://cdn.yodlee.com/fastlink/v4/initialize.js", :async "async"}]] [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css"}] [: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"}] [:script {:src "https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"}] [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" :type "text/css"}] [:script {:defer true :src "https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"}] [:script {:defer true :src "https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"}] [:style " input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- Crashes Chrome on hover */ -webkit-appearance: none; margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number] { -moz-appearance:textfield; /* Firefox */ } "] [:body {:hx-ext "disable-submit"} contents [:script {:src "/js/flowbite.min.js"}] [: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 {:class "bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" "x-show" "open" ":aria-hidden" "!open" "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"} ;; 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"}]]]]]))