maurice/snix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create Tailwind module

Browse source 
Moving the UI.tw function into Tailwind.use. Creating and consuming some
functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally
style some of my components.
This commit is contained in:
William Carroll 2020-04-19 13:40:18 +01:00
parent 7b2163d804
commit f92fe97aff
5 changed files with 49 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

15
website/sandbox/learnpianochords/src/Overview.elm
View file

@ -5,6 +5,7 @@ import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import State
import Tailwind
import UI
@ -16,7 +17,7 @@ header1 copy =
, "pb-12"
, Responsive.h1
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -29,7 +30,7 @@ header2 copy =
, "pb-10"
, Responsive.h2
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -41,7 +42,7 @@ paragraph copy =
[ [ "pb-10"
, Responsive.h3
]
|> UI.tw
|> Tailwind.use
|> class
]
[ text copy ]
@ -59,15 +60,15 @@ numberedList items =
, "list-decimal"
, Responsive.h3
]
|> UI.tw
|> Tailwind.use
|> class
]
(items |> List.map (\x -> li [ [ "pb-10" ] |> UI.tw |> class ] [ text x ]))
(items |> List.map (\x -> li [ [ "pb-10" ] |> Tailwind.use |> class ] [ text x ]))
render : State.Model -> Html State.Msg
render model =
div [ [ "container", "mx-auto" ] |> UI.tw |> class ]
div [ [ "container", "mx-auto" ] |> Tailwind.use |> class ]
[ header1 "Welcome to LearnPianoChords.app!"
, paragraph """
Learn Piano Chords helps piano players master chords.
@ -110,7 +111,7 @@ render model =
"""
]
]
, div [ [ "text-center", "py-20" ] |> UI.tw |> class ]
, div [ [ "text-center", "py-20" ] |> Tailwind.use |> class ]
[ UI.simpleButton
{ label = "Let's get started"
, handleClick = State.SetView State.Preferences