diff options
author | William Carroll <wpcarro@gmail.com> | 2020-04-18T13·24+0100 |
---|---|---|
committer | William Carroll <wpcarro@gmail.com> | 2020-04-18T13·24+0100 |
commit | 720d727d64593baaa6653f77fc5fb6f5fc8868d5 (patch) | |
tree | 2fb42963555dc8f3638222f45578e268b898e2f3 /website/sandbox | |
parent | f0803547e47827a3fb3b9fb1f89949fa270b6d8e (diff) |
Orient "Press to practice" button
Rotate the "Press to practice" copy to ensure that it is readable in landscape mode.
Diffstat (limited to 'website/sandbox')
-rw-r--r-- | website/sandbox/learnpianochords/src/Main.elm | 34 | ||||
-rw-r--r-- | website/sandbox/learnpianochords/src/UI.elm | 46 |
2 files changed, 58 insertions, 22 deletions
diff --git a/website/sandbox/learnpianochords/src/Main.elm b/website/sandbox/learnpianochords/src/Main.elm index 054d318a08b1..1c40d0d7961a 100644 --- a/website/sandbox/learnpianochords/src/Main.elm +++ b/website/sandbox/learnpianochords/src/Main.elm @@ -98,7 +98,7 @@ init = Theory.allPitchClasses keys = - [] + [ { pitchClass = Theory.C, mode = Theory.MajorMode } ] practiceMode = KeyMode @@ -386,7 +386,7 @@ selectKey model { relativeMajor, relativeMinor } = { label = buttonLabel relativeMajor relativeMinor , handleClick = ToggleKey relativeMinor , classes = [ "flex-1" ] - , toggled = active relativeMinor + , toggled = active relativeMinor || active relativeMajor } ] @@ -464,7 +464,7 @@ practiceModeButtons model = openPreferences : Html Msg openPreferences = button - [ class "w-48 h-48 absolute left-0 top-0 z-20" + [ class "w-48 h-48 absolute left-0 top-0 z-40" , onClick (SetView Preferences) ] [ Icon.cog ] @@ -502,30 +502,20 @@ preferences model = practice : Model -> Html Msg practice model = let - classes = - [ "bg-gray-600" - , "h-screen" - , "w-full" - , "absolute" - , "z-10" - , "text-6xl" - ] - - ( handleClick, extraClasses, buttonText ) = + ( handleClick, buttonText ) = if model.isPaused then - ( Play, [ "opacity-50" ], "Press to practice" ) + ( Play, "Press to practice" ) else - ( Pause, [ "opacity-0" ], "" ) + ( Pause, "" ) in div [] - [ button - [ [ classes, extraClasses ] |> List.concat |> UI.tw |> class - , onClick handleClick - ] - [ text buttonText - ] - , openPreferences + [ openPreferences + , UI.overlayButton + { label = buttonText + , handleClick = handleClick + , isVisible = model.isPaused + } , Piano.render { highlight = model.selectedChord |> Maybe.andThen Theory.notesForChord |> Maybe.withDefault [] , start = model.firstNote diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm index 00114332db89..ac15b37d54fe 100644 --- a/website/sandbox/learnpianochords/src/UI.elm +++ b/website/sandbox/learnpianochords/src/UI.elm @@ -114,3 +114,49 @@ textField { placeholderText, handleInput, classes } = , placeholder placeholderText ] [] + + +overlayButton : + { label : String + , handleClick : msg + , isVisible : Bool + } + -> Html msg +overlayButton { label, handleClick, isVisible } = + let + classes = + [ "bg-red-600" + , "absolute" + , "top-0" + , "left-0" + , "h-screen" + , "w-screen" + , "z-30" + ] + + extraClasses = + if isVisible then + [ "opacity-100" ] + + else + [ "opacity-0" ] + in + button + [ List.concat [ classes, extraClasses ] |> tw |> class + , style "background-color" "rgba(0,0,0,0.30)" + , onClick handleClick + ] + [ h1 + [ style "-webkit-text-stroke-width" "2px" + , style "-webkit-text-stroke-color" "black" + , class <| + tw + [ "transform" + , "-rotate-90" + , "text-6xl" + , "text-white" + , "font-mono" + ] + ] + [ text label ] + ] |