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

24
website/sandbox/learnpianochords/src/UI.elm
View file

@ -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"