Create Tailwind module
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:
parent
7b2163d804
commit
f92fe97aff
5 changed files with 49 additions and 27 deletions
|
@ -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
|
||||
|
|
|
@ -6,6 +6,7 @@ import Html.Events exposing (..)
|
|||
import Icon
|
||||
import Responsive
|
||||
import State
|
||||
import Tailwind
|
||||
import Tempo
|
||||
import Theory
|
||||
import UI
|
||||
|
@ -105,7 +106,7 @@ keyCheckboxes model =
|
|||
, "pt-10"
|
||||
, Responsive.h2
|
||||
]
|
||||
|> UI.tw
|
||||
|> Tailwind.use
|
||||
|> class
|
||||
]
|
||||
[ text "Select keys" ]
|
||||
|
@ -134,7 +135,7 @@ closePreferences =
|
|||
, "top-0"
|
||||
, "z-10"
|
||||
]
|
||||
|> UI.tw
|
||||
|> Tailwind.use
|
||||
|> class
|
||||
, onClick (State.SetView State.Practice)
|
||||
]
|
||||
|
|
29
website/sandbox/learnpianochords/src/Tailwind.elm
Normal file
29
website/sandbox/learnpianochords/src/Tailwind.elm
Normal file
|
@ -0,0 +1,29 @@
|
|||
module Tailwind exposing (..)
|
||||
|
||||
{-| Functions to make Tailwind development in Elm even more pleasant.
|
||||
-}
|
||||
|
||||
|
||||
{-| Conditionally use `class` selection when `condition` is true.
|
||||
-}
|
||||
when : Bool -> String -> String
|
||||
when condition class =
|
||||
if condition then
|
||||
class
|
||||
|
||||
else
|
||||
""
|
||||
|
||||
|
||||
if_ : Bool -> String -> String -> String
|
||||
if_ condition whenTrue whenFalse =
|
||||
if condition then
|
||||
whenTrue
|
||||
|
||||
else
|
||||
whenFalse
|
||||
|
||||
|
||||
use : List String -> String
|
||||
use styles =
|
||||
String.join " " styles
|
|
@ -4,6 +4,7 @@ import Html exposing (..)
|
|||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (..)
|
||||
import Responsive
|
||||
import Tailwind
|
||||
import UI
|
||||
|
||||
|
||||
|
@ -20,7 +21,7 @@ render { tempo, handleInput } =
|
|||
[ [ "py-10"
|
||||
, Responsive.h2
|
||||
]
|
||||
|> UI.tw
|
||||
|> Tailwind.use
|
||||
|> class
|
||||
]
|
||||
[ text (String.fromInt tempo ++ " BPM") ]
|
||||
|
|
|
@ -4,6 +4,7 @@ import Html exposing (..)
|
|||
import Html.Attributes exposing (..)
|
||||
import Html.Events exposing (..)
|
||||
import Responsive
|
||||
import Tailwind
|
||||
|
||||
|
||||
type Color
|
||||
|
@ -31,11 +32,6 @@ textForColor color =
|
|||
"text-black"
|
||||
|
||||
|
||||
tw : List String -> String
|
||||
tw styles =
|
||||
String.join " " styles
|
||||
|
||||
|
||||
simpleButton :
|
||||
{ label : String
|
||||
, handleClick : msg
|
||||
|
@ -57,7 +53,7 @@ simpleButton { label, handleClick, color, classes } =
|
|||
]
|
||||
in
|
||||
button
|
||||
[ class (tw <| List.concat [ buttonClasses, classes ])
|
||||
[ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
|
||||
, onClick handleClick
|
||||
]
|
||||
[ text label ]
|
||||
|
@ -90,7 +86,7 @@ textToggleButton { label, toggled, handleClick, classes } =
|
|||
]
|
||||
in
|
||||
button
|
||||
[ class (tw <| List.concat [ buttonClasses, classes ])
|
||||
[ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
|
||||
, onClick handleClick
|
||||
]
|
||||
[ text label ]
|
||||
|
@ -116,7 +112,7 @@ textField { placeholderText, handleInput, classes } =
|
|||
]
|
||||
in
|
||||
input
|
||||
[ class (tw <| List.concat [ inputClasses, classes ])
|
||||
[ class (Tailwind.use <| List.concat [ inputClasses, classes ])
|
||||
, onInput handleInput
|
||||
, placeholder placeholderText
|
||||
]
|
||||
|
@ -139,17 +135,11 @@ overlayButton { label, handleClick, isVisible } =
|
|||
, "z-30"
|
||||
, "w-screen"
|
||||
, "h-screen"
|
||||
, Tailwind.if_ isVisible "opacity-100" "opacity-0"
|
||||
]
|
||||
|
||||
extraClasses =
|
||||
if isVisible then
|
||||
[ "opacity-100" ]
|
||||
|
||||
else
|
||||
[ "opacity-0" ]
|
||||
in
|
||||
button
|
||||
[ List.concat [ classes, extraClasses ] |> tw |> class
|
||||
[ classes |> Tailwind.use |> class
|
||||
, style "background-color" "rgba(0,0,0,0.30)"
|
||||
, onClick handleClick
|
||||
]
|
||||
|
@ -157,7 +147,7 @@ overlayButton { label, handleClick, isVisible } =
|
|||
[ style "-webkit-text-stroke-width" "2px"
|
||||
, style "-webkit-text-stroke-color" "black"
|
||||
, class <|
|
||||
tw
|
||||
Tailwind.use
|
||||
[ "transform"
|
||||
, "-rotate-90"
|
||||
, "text-white"
|
||||
|
|
Loading…
Reference in a new issue