From 058d212109244afdde2fdf80630994862b6684e2 Mon Sep 17 00:00:00 2001 From: "@s.roertgen" Date: Wed, 21 Aug 2024 10:31:30 +0200 Subject: [PATCH] even better fix confetti and prettify add-resource dialog --- resources/public/css/output.css | 77 +++++++++++++++++++++++++++++++++ src/ied/views.cljs | 57 ++++++++++++++---------- 2 files changed, 111 insertions(+), 23 deletions(-) diff --git a/resources/public/css/output.css b/resources/public/css/output.css index e95cf54..ea5e2ca 100644 --- a/resources/public/css/output.css +++ b/resources/public/css/output.css @@ -1329,6 +1329,23 @@ html { border-end-end-radius: inherit; } +.kbd { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: var(--rounded-btn, 0.5rem); + border-width: 1px; + border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); + --tw-border-opacity: 0.2; + --tw-bg-opacity: 1; + background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))); + padding-left: 0.5rem; + padding-right: 0.5rem; + border-bottom-width: 2px; + min-height: 2.2em; + min-width: 2.2em; +} + .menu { display: flex; flex-direction: column; @@ -1539,11 +1556,24 @@ html { color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity))); } +.badge-info { + border-color: transparent; + --tw-bg-opacity: 1; + background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity))); + --tw-text-opacity: 1; + color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity))); +} + .badge-outline.badge-primary { --tw-text-opacity: 1; color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity))); } +.badge-outline.badge-info { + --tw-text-opacity: 1; + color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity))); +} + .btm-nav > *.disabled, .btm-nav > *[disabled] { pointer-events: none; @@ -2451,6 +2481,15 @@ details.collapse summary::-webkit-details-marker { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.kbd-sm { + padding-left: 0.25rem; + padding-right: 0.25rem; + font-size: 0.875rem; + line-height: 1.25rem; + min-height: 1.6em; + min-width: 1.6em; +} + .avatar.online:before { content: ""; position: absolute; @@ -2597,6 +2636,20 @@ details.collapse summary::-webkit-details-marker { margin: 0.5rem; } +.m-auto { + margin: auto; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .ml-auto { margin-left: auto; } @@ -2661,6 +2714,10 @@ details.collapse summary::-webkit-details-marker { width: 100%; } +.w-1\/2 { + width: 50%; +} + .max-w-xs { max-width: 20rem; } @@ -2673,6 +2730,10 @@ details.collapse summary::-webkit-details-marker { flex: none; } +.grow { + flex-grow: 1; +} + @keyframes flyIn { 0% { transform: translateX(-100%); @@ -2721,6 +2782,12 @@ details.collapse summary::-webkit-details-marker { gap: 0.5rem; } +.space-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); +} + .truncate { overflow: hidden; text-overflow: ellipsis; @@ -2764,6 +2831,11 @@ details.collapse summary::-webkit-details-marker { border-color: rgb(255 255 255 / var(--tw-border-opacity)); } +.border-base-300 { + --tw-border-opacity: 1; + border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity))); +} + .bg-base-100 { --tw-bg-opacity: 1; background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))); @@ -2798,6 +2870,11 @@ details.collapse summary::-webkit-details-marker { padding-bottom: 1rem; } +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; diff --git a/src/ied/views.cljs b/src/ied/views.cljs index 61406cc..fcb41aa 100644 --- a/src/ied/views.cljs +++ b/src/ied/views.cljs @@ -15,26 +15,29 @@ :uri uri :author author})] (fn [] - [:form {:on-submit (fn [e] - (.preventDefault e) + [:form {:on-submit (fn [e] + (.preventDefault e) ;; do something with the state @s - )} - [:label {:for name} "Name: "] - [:input {:type :text :name :name - :value (:name @s) - :on-change (fn [e] - (swap! s assoc :name (-> e .-target .-value)))}] - [:label {:for uri} "Uri: "] - [:input {:type :text :name :uri - :value (:uri @s) - :on-change (fn [e] - (swap! s assoc :uri (-> e .-target .-value)))}] - [:label {:for uri} "Author: "] - [:input {:type :text :name :author - :value (:author @s) - :on-change (fn [e] - (swap! s assoc :author (-> e .-target .-value)))}] - [:button {:class "btn btn-warning" + )} + [:label + {:class "input input-bordered flex items-center gap-2"} + "Name" + [:input {:on-change (fn [e] + (swap! s assoc :name (-> e .-target .-value))) + :type "text", :class "grow", :placeholder "Daisy"}]] + [:label + {:class "input input-bordered flex items-center gap-2"} + "URL" + [:input {:on-change (fn [e] + (swap! s assoc :uri (-> e .-target .-value))) + :type "text", :class "grow", :placeholder "daisy@site.com"}]] + [:label + {:class "input input-bordered flex items-center gap-2"} + [:input {:on-change (fn [e] + (swap! s assoc :author (-> e .-target .-value))) + :type "text", :class "grow", :placeholder "Author"}]] + + [:button {:class "btn btn-warning w-1/2 mx-auto" :on-click #(re-frame/dispatch [::events/publish-resource {:name (:name @s) ;; TODO this should be sth like build event :id (:uri @s) :author (:author @s)}])} @@ -85,7 +88,7 @@ now (quot (.now js/Date) 1000) diff (- now visited-at) _ () #_(when (>= diff 5) - (re-frame/dispatch [::events/add-confetti]))] + (re-frame/dispatch [::events/add-confetti]))] [:div {:class "animate-flyIn card bg-base-100 w-96 shadow-xl min-h-[620px]"} [:figure @@ -415,10 +418,18 @@ ;; Add Resource Panel (defn add-resource-panel [] [:div - [:h1 "Add Resource"] + {:class "w-1/2 mx-auto flex flex-col space-y-4"} [add-resource-form] - [add-resource-by-json] - [add-resosurce-by-uri]]) + [:div + {:tabIndex "0", + :class "collapse collapse-arrow border-base-300 bg-base-200 border"} + [:div + {:class "collapse-title text-xl font-medium"} + "Focus me to see content"] + [:div + {:class "collapse-content"} + [add-resource-by-json] + [add-resosurce-by-uri]]]]) (defmethod routes/panels :add-resource-panel [] [add-resource-panel])