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:
parent
f0803547e4
commit
720d727d64
2 changed files with 58 additions and 22 deletions
|
@ -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
|
||||
|
|
|
@ -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 ]
|
||||
]
|
||||
|
|
Loading…
Reference in a new issue