From 6fbe593426ddcfd5cf395b0e26a1e9e3ab1819a7 Mon Sep 17 00:00:00 2001 From: Zac Jones Date: Wed, 22 Dec 2021 16:10:52 -0500 Subject: [PATCH] add styling to form inputs --- resources/public/css/main.css | 94 ++++++++++++++++++++++++++++++----- resources/public/index.html | 2 +- src/com/example/ui.cljs | 26 +++++----- 3 files changed, 96 insertions(+), 26 deletions(-) diff --git a/resources/public/css/main.css b/resources/public/css/main.css index a869c32..a9925cf 100644 --- a/resources/public/css/main.css +++ b/resources/public/css/main.css @@ -468,9 +468,23 @@ Ensure the default browser behavior of the `hidden` attribute. .relative { position: relative; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} .mr-2 { margin-right: 0.5rem; } +.mb-2 { + margin-bottom: 0.5rem; +} +.mb-4 { + margin-bottom: 1rem; +} .block { display: block; } @@ -492,24 +506,30 @@ Ensure the default browser behavior of the `hidden` attribute. .hidden { display: none; } +.max-w-fit { + max-width: fit-content; +} .transform { transform: var(--tw-transform); } .\!transform { transform: var(--tw-transform) !important; } +.cursor-pointer { + cursor: pointer; +} .resize { resize: both; } .items-center { align-items: center; } -.justify-end { - justify-content: flex-end; -} .justify-between { justify-content: space-between; } +.gap-1 { + gap: 0.25rem; +} .truncate { overflow: hidden; text-overflow: ellipsis; @@ -518,20 +538,46 @@ Ensure the default browser behavior of the `hidden` attribute. .rounded { border-radius: 0.25rem; } +.rounded-lg { + border-radius: 0.5rem; +} .border { border-width: 1px; } -.bg-black { +.bg-gray-800 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(31 41 55 / var(--tw-bg-opacity)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-300 { +.bg-gray-700 { --tw-bg-opacity: 1; - background-color: rgb(252 165 165 / var(--tw-bg-opacity)); + background-color: rgb(55 65 81 / var(--tw-bg-opacity)); +} +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} +.p-4 { + padding: 1rem; +} +.px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; } .uppercase { text-transform: uppercase; @@ -542,6 +588,9 @@ Ensure the default browser behavior of the `hidden` attribute. .capitalize { text-transform: capitalize; } +.italic { + font-style: italic; +} *, ::before, ::after { --tw-ordinal: var(--tw-empty,/*!*/ /*!*/); --tw-slashed-zero: var(--tw-empty,/*!*/ /*!*/); @@ -554,17 +603,17 @@ Ensure the default browser behavior of the `hidden` attribute. --tw-ordinal: ordinal; font-variant-numeric: var(--tw-font-variant-numeric); } -.text-red-800 { +.text-gray-100 { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity)); + color: rgb(243 244 246 / var(--tw-text-opacity)); } -.text-red-900 { +.text-gray-300 { --tw-text-opacity: 1; - color: rgb(127 29 29 / var(--tw-text-opacity)); + color: rgb(209 213 219 / var(--tw-text-opacity)); } -.text-zinc-800 { +.text-gray-700 { --tw-text-opacity: 1; - color: rgb(39 39 42 / var(--tw-text-opacity)); + color: rgb(55 65 81 / var(--tw-text-opacity)); } .underline { text-decoration-line: underline; @@ -574,6 +623,11 @@ Ensure the default browser behavior of the `hidden` attribute. --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} .ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); @@ -596,4 +650,18 @@ Ensure the default browser behavior of the `hidden` attribute. } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); +} +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} +@media (min-width: 640px) { + + .sm\:flex { + display: flex; + } + + .sm\:justify-between { + justify-content: space-between; + } } \ No newline at end of file diff --git a/resources/public/index.html b/resources/public/index.html index d32dc5b..5b416cd 100644 --- a/resources/public/index.html +++ b/resources/public/index.html @@ -4,7 +4,7 @@ - +
It seems the Fulcro app has not been loaded yet. Verify that shadow-cljs has finished building and reload the page
diff --git a/src/com/example/ui.cljs b/src/com/example/ui.cljs index 40f01c2..e857c53 100644 --- a/src/com/example/ui.cljs +++ b/src/com/example/ui.cljs @@ -22,14 +22,14 @@ :ident (fn [] [:component/id :header]) :initial-state {}} (let [load-user (get props [df/marker-table :load-progress])] - (div :.flex.justify-between.items-center - (div :.text-zinc-800 "Should I Train?") + (div :.flex.justify-between.items-center.my-4 + (div :.text-grey-100 "Should I Train?") (when-not load-user (div :.flex.flex-end (when (:user/authenticated? user) (div :.flex - (p :.mr-2 (str "Hello " (or (:user/name user) "from the ui/Root component") "!")) - (button {:onClick #(on-signout)} "Sign out"))) - (when (not (:user/authenticated? user)) (button {:onClick #(github-signin)} "Sign in with GitHub"))))))) + (p :.mr-2.text-grey-100 (str "Hello " (or (:user/name user) "from the ui/Root component") "!")) + (button :.text-grey-100 {:onClick #(on-signout)} "Sign out"))) + (when (not (:user/authenticated? user)) (button :.text-grey-100 {:onClick #(github-signin)} "Sign in with GitHub"))))))) (def ui-header (comp/factory Header)) @@ -37,21 +37,23 @@ (let [input-props (-> props (dissoc :label :valid? :error-message :input-class :options))] (div - (dom/label {:htmlFor label} label) + (dom/label :.relative.block.bg-white.border.rounded-lg.shadow-sm.px-6.py-4.cursor-pointer.sm:flex.sm:justify-between.focus:outline-none.text-gray-700 {:htmlFor label} label) (input-class input-props) (dom/div {:classes [(when valid? "hidden")]} error-message)))) -(defsc Question [this {:question/keys [id label options]}] +(defsc Question [this {:question/keys [id label byline options]}] {:query [:question/id :question/label + :question/byline :ui/selected {:question/options [:option/label :option/value]}] :ident (fn [] [:question/id id]) :initial-state {}} - (div :.mb-4 - (h2 :.text-lg label) + (div :.mb-4.p-4.bg-gray-700.rounded.max-w-fit + (h2 :.text-xl.text-gray-100 label) + (p :.text-gray-300.mb-2.italic byline) (map (fn [o] (field {:input-class input :name id @@ -75,8 +77,8 @@ (when id (div (div :.flex.items-center.gap-1.mb3 - (h2 :.text-xl.text-zinc-800 label) - (p :.text-gray-500 "v" version)) + (h2 :.text-3xl.text-gray-100.mb-2 label) + (p :.text-gray-100 "v" version)) (dom/form (map ui-question questions))))) @@ -89,7 +91,7 @@ {:header (comp/get-query Header)} {:quiz (comp/get-query Quiz)}] :initial-state {:root/user {} :header {} :quiz {}}} - (div :.container.mx-auto.text-zinc-800 + (div :.container.mx-auto.text-gray-100 (ui-header (comp/computed (:header props) {:on-signout #(comp/transact! this [(mut/delete-root-user nil)]) :user user})) (when (:quiz props) (ui-quiz (:quiz props)))))