diff options
Diffstat (limited to 'website/sandbox/learnpianochords')
| -rw-r--r-- | website/sandbox/learnpianochords/src/Overview.elm | 15 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Preferences.elm | 5 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Tailwind.elm | 29 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/Tempo.elm | 3 | ||||
| -rw-r--r-- | website/sandbox/learnpianochords/src/UI.elm | 24 |
5 files changed, 49 insertions, 27 deletions
diff --git a/website/sandbox/learnpianochords/src/Overview.elm b/website/sandbox/learnpianochords/src/Overview.elm index 021d15955d8c..628b52d79da9 100644 --- a/website/sandbox/learnpianochords/src/Overview.elm +++ b/website/sandbox/learnpianochords/src/Overview.elm @@ -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 diff --git a/website/sandbox/learnpianochords/src/Preferences.elm b/website/sandbox/learnpianochords/src/Preferences.elm index e90a669c21f2..83d4f97e24d5 100644 --- a/website/sandbox/learnpianochords/src/Preferences.elm +++ b/website/sandbox/learnpianochords/src/Preferences.elm @@ -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) ] diff --git a/website/sandbox/learnpianochords/src/Tailwind.elm b/website/sandbox/learnpianochords/src/Tailwind.elm new file mode 100644 index 000000000000..57d419db5a82 --- /dev/null +++ b/website/sandbox/learnpianochords/src/Tailwind.elm @@ -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 diff --git a/website/sandbox/learnpianochords/src/Tempo.elm b/website/sandbox/learnpianochords/src/Tempo.elm index a1afd776acb4..041313614f53 100644 --- a/website/sandbox/learnpianochords/src/Tempo.elm +++ b/website/sandbox/learnpianochords/src/Tempo.elm @@ -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") ] diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm index 4fa8f65fb54c..50bbaaa2142d 100644 --- a/website/sandbox/learnpianochords/src/UI.elm +++ b/website/sandbox/learnpianochords/src/UI.elm @@ -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" |