Orient "Press to practice" button

Rotate the "Press to practice" copy to ensure that it is readable in landscape
mode.
This commit is contained in:
William Carroll 2020-04-18 14:24:41 +01:00
parent f0803547e4
commit 720d727d64
2 changed files with 58 additions and 22 deletions

View file

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

View file

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