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

Makes error popup work

Browse Source
This commit is contained in:
Bryce Covert
2023-05-15 11:51:16 -07:00
parent ca82b2c81f
commit fb50f5727b
5 changed files with 146 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/input.css
View File

@@ -5,6 +5,10 @@
.htmx-added .fade-in {
opacity: 0.0 !important;
}
.htmx-added.fade-in {
opacity: 0.0 !important;
}
.fade-in {
opacity: 1.0;
}

96
resources/public/output.css
View File

@@ -1073,6 +1073,18 @@ input:checked + .toggle-bg {
top: 1.25rem;
}
.right-4 {
right: 1rem;
}
.right-2 {
right: 0.5rem;
}
.top-2 {
top: 0.5rem;
}
.z-10 {
z-index: 10;
}
@@ -1109,6 +1121,18 @@ input:checked + .toggle-bg {
grid-column: span 6 / span 6;
}
.m-2 {
margin: 0.5rem;
}
.m-8 {
margin: 2rem;
}
.m-4 {
margin: 1rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
@@ -1124,11 +1148,21 @@ input:checked + .toggle-bg {
margin-right: auto;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.-mb-1 {
margin-bottom: -0.25rem;
}
@@ -1193,6 +1227,10 @@ input:checked + .toggle-bg {
margin-top: 1.25rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
@@ -1281,6 +1319,14 @@ input:checked + .toggle-bg {
height: 100vh;
}
.h-16 {
height: 4rem;
}
.max-h-96 {
max-height: 24rem;
}
.max-h-full {
max-height: 100%;
}
@@ -1325,6 +1371,10 @@ input:checked + .toggle-bg {
width: 100%;
}
.w-16 {
width: 4rem;
}
.max-w-2xl {
max-width: 42rem;
}
@@ -1333,6 +1383,10 @@ input:checked + .toggle-bg {
max-width: 1536px;
}
.max-w-screen-lg {
max-width: 1024px;
}
.max-w-sm {
max-width: 24rem;
}
@@ -1653,6 +1707,11 @@ input:checked + .toggle-bg {
border-color: rgb(175 211 130 / var(--tw-border-opacity));
}
.border-red-300 {
--tw-border-opacity: 1;
border-color: rgb(255 104 104 / var(--tw-border-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(204 235 251 / var(--tw-bg-opacity));
@@ -1708,6 +1767,11 @@ input:checked + .toggle-bg {
background-color: rgb(242 248 234 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
background-color: rgb(255 230 230 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1722,6 +1786,11 @@ input:checked + .toggle-bg {
background-color: rgb(253 246 178 / var(--tw-bg-opacity));
}
.bg-green-200 {
--tw-bg-opacity: 1;
background-color: rgb(201 225 171 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
@@ -1858,6 +1927,10 @@ input:checked + .toggle-bg {
padding-top: 1.25rem;
}
.pt-8 {
padding-top: 2rem;
}
.text-left {
text-align: left;
}
@@ -1982,6 +2055,11 @@ input:checked + .toggle-bg {
color: rgb(97 145 37 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgb(102 1 1 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1992,6 +2070,15 @@ input:checked + .toggle-bg {
color: rgb(114 59 19 / var(--tw-text-opacity));
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgb(204 2 2 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0;
}
@@ -2097,6 +2184,10 @@ input:checked + .toggle-bg {
opacity: 0.0 !important;
}
.htmx-added.fade-in {
opacity: 0.0 !important;
}
.fade-in {
opacity: 1.0;
}
@@ -2489,6 +2580,11 @@ input:checked + .toggle-bg {
color: rgb(175 211 130 / var(--tw-text-opacity));
}
.dark .dark\:text-red-400 {
--tw-text-opacity: 1;
color: rgb(255 53 53 / var(--tw-text-opacity));
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));

25
src/clj/auto_ap/ssr/components/page.clj
View File

@@ -1,7 +1,9 @@
(ns auto-ap.ssr.components.page
(:require
[auto-ap.ssr.components.aside :refer [left-aside-]]
[auto-ap.ssr.components.navbar :refer [navbar-]]))
[auto-ap.ssr.components.navbar :refer [navbar-]]
[hiccup2.core :as hiccup]
[auto-ap.ssr.svg :as svg]))
(defn page- [{:keys [nav page-specific active-client identity app-params] :or {app-params {}}} & children]
[:div#app app-params
@@ -10,7 +12,26 @@
[:div.flex.pt-16.overflow-hidden
(left-aside- {:nav nav
:page-specific page-specific})
[:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "}
[:div#main-content {:class "relative w-full h-full lg:pl-64 overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content "
"_" (hiccup/raw "on htmx:responseError put event.detail.xhr.response into #error-details then add .htmx-added to #error-holder then remove .hidden from #error-holder then wait 10ms then remove .htmx-added from #error-holder")}
[:div#error-holder.hidden
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
[:div.relative
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
{"_" (hiccup/raw "on click add .hidden to #error-holder")}
svg/filled-x
]
]
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
[:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
[:div.inline-block.w-8.h-8.mr-2 svg/alert]
[:span.font-medium "Oh, drat! An unexpected error has occurred."]
[:div.text-sm
[:p "Integreat staff have been notified and are looking into it. " ]
[:p "To see error details, " [:a.underline {:href "#" :data-collapse-toggle "error-details"} "click here"] "."]
[:pre#error-details.text-xs.hidden]]]]]]
(into
[:div.p-4]
children)]]

21
src/clj/auto_ap/ssr/svg.clj
View File

@@ -271,3 +271,24 @@
:stroke "currentColor",
:stroke-linecap "round",
:stroke-linejoin "round"}]])
(def alert
[:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
[:defs]
[:title "alert-triangle"]
[:path {:d "M22.553,22.581a.569.569,0,0,1-.553.894H2a.569.569,0,0,1-.553-.894L11.553,2.37c.246-.492.648-.492.894,0Z", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
[:line {:x1 "12", :y1 "16.979", :x2 "12", :y2 "9.979", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
[:path {:d "M11.991,18.979a.246.246,0,0,0-.241.255.255.255,0,0,0,.254.245h.005a.246.246,0,0,0,.241-.255A.255.255,0,0,0,12,18.979h-.005", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]])
(def x
[:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
[:defs]
[:title "delete-2"]
[:circle {:cx "12", :cy "12", :r "11.5", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
[:line {:x1 "7", :y1 "7", :x2 "17", :y2 "17", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]
[:line {:x1 "17", :y1 "7", :x2 "7", :y2 "17", :fill "none", :stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round"}]])
(def filled-x
[:svg {:xmlns "http://www.w3.org/2000/svg", :viewbox "0 0 24 24"}
[:path {:d "M24,12A12,12,0,1,0,12,24,12,12,0,0,0,24,12Zm-7.29,3.28a1,1,0,0,1,0,1.41,1,1,0,0,1-1.42,0l-3.11-3.11a.26.26,0,0,0-.35,0L8.72,16.69a1,1,0,0,1-1.41-1.41l3.11-3.11a.26.26,0,0,0,0-.35L7.31,8.71a1,1,0,0,1,0-1.42,1,1,0,0,1,1.41,0l3.11,3.11a.24.24,0,0,0,.35,0l3.11-3.11a1,1,0,1,1,1.42,1.42L13.6,11.82a.24.24,0,0,0,0,.35Z", :fill "currentColor"}]])

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

@@ -34,7 +34,8 @@
[:script {:type "text/javascript", :src "https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"}]
[:script {:src "https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"}]
[:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" :type "text/css"}]
[:body {:hx-ext "disable-submit"}
[:body {:hx-ext "disable-submit"
}
contents
[:script {:src "/js/flowbite.min.js"}]
[:script {:lang "text/javascript"}