Skip to content

Commit

Permalink
Merge pull request #5 from theianjones/zj/style-form-input
Browse files Browse the repository at this point in the history 
add styling to form inputs
  • Loading branch information
@theianjones
theianjones authored Dec 23, 2021
2 parents c4d41ee + 6fbe593 commit cb9016e
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 26 deletions.
94 changes: 81 additions & 13 deletions resources/public/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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,/*!*/ /*!*/);
Expand All @@ -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;
Expand All @@ -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);
Expand All @@ -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;
}
}
2 changes: 1 addition & 1 deletion resources/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<div id="app">It seems the Fulcro app has not been loaded yet. Verify that shadow-cljs has finished building and reload the page</div>
<script src="/js/main/main.js"></script>
</body>
Expand Down
26 changes: 14 additions & 12 deletions src/com/example/ui.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,36 +22,38 @@
: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))

(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)
(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
Expand All @@ -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)))))

Expand All @@ -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)))))

0 comments on commit cb9016e

Please sign in to comment.