Skip to content

Commit

Permalink
pokedex example: add missing tailwind dependency and fix errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanyabouman
tanyabouman committed Aug 15, 2023
1 parent 9c99134 commit 1dc24aa
Show file tree
Hide file tree
Showing 4 changed files with 55 additions and 52 deletions.
91 changes: 46 additions & 45 deletions examples/pokedex/app/Route/TailwindForm.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import Server.Request as Request exposing (Request)
import Server.Response as Response exposing (Response)
import Shared
import Tailwind.Breakpoints as Bp
import Tailwind.Theme as Th
import Tailwind.Utilities as Tw
import Time
import View exposing (View)
Expand Down Expand Up @@ -98,7 +99,7 @@ usernameInput formState field =
, Tw.gap_4
, Tw.items_start
, Tw.border_t
, Tw.border_gray_200
, Tw.border_color Th.gray_200
, Tw.pt_5
]
]
Expand All @@ -109,7 +110,7 @@ usernameInput formState field =
[ Tw.block
, Tw.text_sm
, Tw.font_medium
, Tw.text_gray_700
, Tw.text_color Th.gray_700
, Bp.sm
[ Tw.mt_px
, Tw.pt_2
Expand Down Expand Up @@ -143,9 +144,9 @@ usernameInput formState field =
, Tw.rounded_l_md
, Tw.border
, Tw.border_r_0
, Tw.border_gray_300
, Tw.bg_gray_50
, Tw.text_gray_500
, Tw.border_color Th.gray_300
, Tw.bg_color Th.gray_50
, Tw.text_color Th.gray_500
, Bp.sm
[ Tw.text_sm
]
Expand All @@ -164,10 +165,10 @@ usernameInput formState field =
, Tw.min_w_0
, Tw.rounded_none
, Tw.rounded_r_md
, Tw.border_gray_300
, Tw.border_color Th.gray_300
, Css.focus
[ Tw.ring_indigo_500
, Tw.border_indigo_500
[ Tw.ring_color Th.indigo_500
, Tw.border_color Th.indigo_500
]
, Bp.sm
[ Tw.text_sm
Expand Down Expand Up @@ -464,18 +465,18 @@ saveButton formHasErrors formAttrs =
, Tw.py_2
, Tw.px_4
, Tw.border
, Tw.border_transparent
, Tw.border_color Th.transparent
, Tw.shadow_sm
, Tw.text_sm
, Tw.font_medium
, Tw.rounded_md
, Tw.text_white
, Tw.bg_indigo_600
, Tw.text_color Th.white
, Tw.bg_color Th.indigo_600
, Css.focus
[ Tw.outline_none
, Tw.ring_2
, Tw.ring_offset_2
, Tw.ring_indigo_500
, Tw.ring_color Th.indigo_500
]
, --if formHasErrors then
-- Css.batch
Expand All @@ -486,7 +487,7 @@ saveButton formHasErrors formAttrs =
--
-- else
Css.hover
[ Tw.bg_indigo_700
[ Tw.bg_color Th.indigo_700
]
]
]
Expand All @@ -499,24 +500,24 @@ cancelButton =
Html.button
[ Attr.type_ "button"
, css
[ Tw.bg_white
[ Tw.bg_color Th.white
, Tw.py_2
, Tw.px_4
, Tw.border
, Tw.border_gray_300
, Tw.border_color Th.gray_300
, Tw.rounded_md
, Tw.shadow_sm
, Tw.text_sm
, Tw.font_medium
, Tw.text_gray_700
, Tw.text_color Th.gray_700
, Css.focus
[ Tw.outline_none
, Tw.ring_2
, Tw.ring_offset_2
, Tw.ring_indigo_500
, Tw.ring_color Th.indigo_500
]
, Css.hover
[ Tw.bg_gray_50
[ Tw.bg_color Th.gray_50
]
]
]
Expand Down Expand Up @@ -626,7 +627,7 @@ wrapSection children =
[ Tw.text_lg
, Tw.leading_6
, Tw.font_medium
, Tw.text_gray_900
, Tw.text_color Th.gray_900
]
]
[ Html.text "Profile" ]
Expand All @@ -635,7 +636,7 @@ wrapSection children =
[ Tw.mt_1
, Tw.max_w_2xl
, Tw.text_sm
, Tw.text_gray_500
, Tw.text_color Th.gray_500
]
]
[ Html.text "This information will be displayed publicly so be careful what you share." ]
Expand Down Expand Up @@ -689,7 +690,7 @@ view app model sharedModel =
, Tw.flex_col
, Tw.items_center
, Tw.mt_8
, Tw.border_gray_700
, Tw.border_color Th.gray_700
, Tw.rounded_lg
]
]
Expand Down Expand Up @@ -757,7 +758,7 @@ textInput info labelText field =
, Tw.gap_4
, Tw.items_start
, Tw.border_t
, Tw.border_gray_200
, Tw.border_color Th.gray_200
, Tw.pt_5
]
]
Expand All @@ -779,7 +780,7 @@ textInput info labelText field =
[ Tw.block
, Tw.text_sm
, Tw.font_medium
, Tw.text_gray_700
, Tw.text_color Th.gray_700
, Bp.sm
[ Tw.mt_px
, Tw.pt_2
Expand Down Expand Up @@ -807,11 +808,11 @@ textInput info labelText field =
, Tw.block
, Tw.w_full
, Tw.shadow_sm
, Tw.border_gray_300
, Tw.border_color Th.gray_300
, Tw.rounded_md
, Css.focus
[ Tw.ring_indigo_500
, Tw.border_indigo_500
[ Tw.ring_color Th.indigo_500
, Tw.border_color Th.indigo_500
]
, Bp.sm
[ Tw.max_w_xs
Expand All @@ -836,7 +837,7 @@ errorsView formState field =
[ css
[ Tw.mt_2
, Tw.text_sm
, Tw.text_red_600
, Tw.text_color Th.red_600
]
]
(if showErrors then
Expand Down Expand Up @@ -881,11 +882,11 @@ checkboxInput { name, description } info field =
[ css
[ Tw.h_4
, Tw.w_4
, Tw.text_indigo_600
, Tw.border_gray_300
, Tw.text_color Th.indigo_600
, Tw.border_color Th.gray_300
, Tw.rounded
, Css.focus
[ Tw.ring_indigo_500
[ Tw.ring_color Th.indigo_500
]
]
]
Expand All @@ -899,13 +900,13 @@ checkboxInput { name, description } info field =
[ Html.div
[ css
[ Tw.font_medium
, Tw.text_gray_700
, Tw.text_color Th.gray_700
]
]
[ Html.text name ]
, Html.p
[ css
[ Tw.text_gray_500
[ Tw.text_color Th.gray_500
]
]
[ Html.text description ]
Expand All @@ -919,7 +920,7 @@ wrapNotificationsSections children =
Html.div
[ css
[ Tw.divide_y
, Tw.divide_gray_200
, Tw.divide_color Th.gray_200
, Tw.pt_8
, Tw.space_y_6
, Bp.sm
Expand All @@ -934,7 +935,7 @@ wrapNotificationsSections children =
[ Tw.text_lg
, Tw.leading_6
, Tw.font_medium
, Tw.text_gray_900
, Tw.text_color Th.gray_900
]
]
[ Html.text "Notifications" ]
Expand All @@ -943,7 +944,7 @@ wrapNotificationsSections children =
[ Tw.mt_1
, Tw.max_w_2xl
, Tw.text_sm
, Tw.text_gray_500
, Tw.text_color Th.gray_500
]
]
[ Html.text "We'll always let you know about important changes, but you pick what else you want to hear about." ]
Expand All @@ -952,7 +953,7 @@ wrapNotificationsSections children =
[ css
[ Tw.space_y_6
, Tw.divide_y
, Tw.divide_gray_200
, Tw.divide_color Th.gray_200
, Bp.sm
[ Tw.space_y_5
]
Expand Down Expand Up @@ -990,10 +991,10 @@ wrapEmailSection children =
[ css
[ Tw.text_base
, Tw.font_medium
, Tw.text_gray_900
, Tw.text_color Th.gray_900
, Bp.sm
[ Tw.text_sm
, Tw.text_gray_700
, Tw.text_color Th.gray_700
]
]
, Attr.id "label-email"
Expand Down Expand Up @@ -1029,7 +1030,7 @@ radioInput errors item toRadio =
, Tw.block
, Tw.text_sm
, Tw.font_medium
, Tw.text_gray_700
, Tw.text_color Th.gray_700
]
]
[ Html.div
Expand All @@ -1042,11 +1043,11 @@ radioInput errors item toRadio =
[ css
[ Tw.h_4
, Tw.w_4
, Tw.text_indigo_600
, Tw.border_gray_300
, Tw.text_color Th.indigo_600
, Tw.border_color Th.gray_300
, Tw.mr_2
, Css.focus
[ Tw.ring_indigo_500
[ Tw.ring_color Th.indigo_500
]
]
]
Expand Down Expand Up @@ -1104,10 +1105,10 @@ wrapPushNotificationsSection formState field children =
[ css
[ Tw.text_base
, Tw.font_medium
, Tw.text_gray_900
, Tw.text_color Th.gray_900
, Bp.sm
[ Tw.text_sm
, Tw.text_gray_700
, Tw.text_color Th.gray_700
]
]
, Attr.id "label-notifications"
Expand All @@ -1129,7 +1130,7 @@ wrapPushNotificationsSection formState field children =
[ Html.p
[ css
[ Tw.text_sm
, Tw.text_gray_500
, Tw.text_color Th.gray_500
]
]
[ Html.text "These are delivered via SMS to your mobile phone." ]
Expand Down
2 changes: 2 additions & 0 deletions examples/pokedex/elm.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"elm-community/result-extra": "2.4.0",
"jluckyiv/elm-utc-date-strings": "1.0.0",
"justinmimbs/date": "4.0.1",
"matheus23/elm-default-tailwind-modules": "4.0.1",
"mdgriffith/elm-codegen": "3.0.0",
"miniBill/elm-codec": "2.0.0",
"noahzgordon/elm-color-extra": "1.0.2",
Expand All @@ -62,6 +63,7 @@
"fredcy/elm-parseint": "2.0.1",
"j-maas/elm-ordered-containers": "1.0.0",
"lukewestby/elm-string-interpolate": "1.0.4",
"matheus23/elm-tailwind-modules-base": "1.0.0",
"mgold/elm-nonempty-list": "4.2.0",
"miniBill/elm-unicode": "1.0.3",
"rtfeldman/elm-hex": "1.0.0",
Expand Down
7 changes: 3 additions & 4 deletions examples/pokedex/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions examples/pokedex/src/Icon.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module Icon exposing (error, icon2, icon3)
import Html.Styled exposing (Html)
import Svg.Styled exposing (path, svg)
import Svg.Styled.Attributes as SvgAttr
import Tailwind.Theme as Th
import Tailwind.Utilities as Tw


Expand All @@ -12,7 +13,7 @@ error =
[ SvgAttr.css
[ Tw.h_5
, Tw.w_5
, Tw.text_red_500
, Tw.text_color Th.red_500
]
, SvgAttr.viewBox "0 0 20 20"
, SvgAttr.fill "currentColor"
Expand All @@ -31,7 +32,7 @@ icon2 =
[ SvgAttr.css
[ Tw.h_full
, Tw.w_full
, Tw.text_gray_300
, Tw.text_color Th.gray_300
]
, SvgAttr.fill "currentColor"
, SvgAttr.viewBox "0 0 24 24"
Expand All @@ -49,7 +50,7 @@ icon3 =
[ Tw.mx_auto
, Tw.h_12
, Tw.w_12
, Tw.text_gray_400
, Tw.text_color Th.gray_400
]
, SvgAttr.stroke "currentColor"
, SvgAttr.fill "none"
Expand Down

0 comments on commit 1dc24aa

Please sign in to comment.