Made error page look pretty good

This commit is contained in:
2023-10-30 20:47:55 -07:00
parent a5672d8954
commit 3d5c307760
6 changed files with 24 additions and 16 deletions

View File

@@ -6,7 +6,9 @@
(defn modal- [params & children]
[:div (-> params
(assoc "@click.outside" "open=false"
:x-data (hx/json {:index 0 :hidingIndex -1})
:x-data (hx/json {:index 0 :hidingIndex -1 :unexpectedError false})
"x-on:htmx:response-error" "unexpectedError=true"
"x-on:htmx:before-request" "unexpectedError=false"
:x-ref "modalStack"
"@modalnext"
"$refs.modalStack.children[index].setAttribute('x-transition:leave-end', '-translate-x-full scale-0 opacity-0' );
@@ -43,7 +45,12 @@
#_[:div.bg-green-300.w-full.h-64
"hello"]
content]
(when footer [:div {:class "p-4 shrink-0"} footer])]])
(when footer [:div {:class "p-4"}
[:span.items-center.bg-red-100.text-red-800.text-xs.font-medium.mb-2.p-1.rounded-full.inline-flex (hx/alpine-appear {:x-show "unexpectedError" :class "dark:bg-red-900 dark:text-red-300"})
[:span {:class "w-2 h-2 mr-1 bg-red-500 rounded-full"}]
[:span.px-2.py-0.5 "An unexpected error has occured. Integreat staff have been notified."]]
[:div {:class "shrink-0"}
footer]])]])
(defn stacked-modal-card- [index params header content footer]
@@ -60,4 +67,8 @@
[:div {:class "px-6 space-y-6 overflow-y-scroll w-full shrink"}
content]
(when footer [:div {:class "p-4 shrink-0"} footer])])
(when footer [:div {:class "p-4"}
[:span.items-center.bg-red-100.text-red-800.text-xs.font-medium.mb-2.p-1.rounded-full.inline-flex (hx/alpine-appear {:x-show "unexpectedError" :class "dark:bg-red-900 dark:text-red-300"})
[:span {:class "w-2 h-2 bg-red-500 rounded-full"}]
[:span.px-2.py-0.5 "An unexpected error has occured. Integreat staff have been notified."]]
[:div {:class "shrink-0"}]footer])])