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…
	
	Add table
		Add a link
		
	
		Reference in a new issue