add styling to form inputs #5
Conversation
| .mb-2 { | ||
| margin-bottom: 0.5rem; | ||
| } | ||
| .mb-4 { | ||
| margin-bottom: 1rem; | ||
| } |
There was a problem hiding this comment.
It's cool that this file updates based on the classes that are used. Nice overview of styling.
There was a problem hiding this comment.
even though locally generated files probably shouldn't be committed huh?
There was a problem hiding this comment.
yeah i didnt add a gitignore for this.. probably want to remove it from github
| @@ -4,7 +4,7 @@ | |||
| <link rel="stylesheet" href="/css/site.css"> | |||
| <link rel="stylesheet" href="/css/main.css"> | |||
| </head> | |||
| <body> | |||
| <body class="bg-gray-800 text-gray-100"> | |||
There was a problem hiding this comment.
Set background to gray-800
|
|
||
| (def ui-header (comp/factory Header)) | ||
|
|
||
| (defn field [{:keys [label valid? error-message input-class id] :as props}] | ||
| (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) |
There was a problem hiding this comment.
This input-class is giving me trouble. Not sure how to style the radio button. Ideally it would move in the label or be hidden entirely
There was a problem hiding this comment.
you have to add appearance: none and then add all your custom properties. This looks like a good guide https://moderncss.dev/pure-css-custom-styled-radio-buttons/
| :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) |
There was a problem hiding this comment.
Adds byline because some questions rely on it
There was a problem hiding this comment.
hey look, you added fulcro code 😎
| (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) |
There was a problem hiding this comment.
Probably only want to show the byline when its available so we avoid empty tags
| (p :.text-gray-300.mb-2.italic byline) | |
| (when byline (p :.text-gray-300.mb-2.italic byline)) |
There was a problem hiding this comment.
ahhh good call, that's real nice syntax
| (div :.container.mx-auto.text-zinc-800 | ||
| (div :.container.mx-auto.text-gray-100 |
There was a problem hiding this comment.
I was getting fancy with that zinc color lol
There was a problem hiding this comment.
I do eventually want to customize the tailwind config with the color pallet I have in #4 but keeping it simple for now
First pass at styling inputs. Would like to progress to #4
I'd like to change how the radio groups are displayed but my limitation of the language is making it hard. Those radio buttons could be centered in their respective answer or removed entirely
