Ensure the overlayButton is truly h-screen and w-screen

Now the "Tap to practice" button fully covers the screen.

- Dropped support for a Piano direction (for now)
- Using w-full and w-1/2 for piano key "length"

2 files changed, 35 insertions, 112 deletions

diff --git a/website/sandbox/learnpianochords/src/Piano.elm b/website/sandbox/learnpianochords/src/Piano.elm
index abd8c6ec0b55..d231f1467438 100644
--- a/website/sandbox/learnpianochords/src/Piano.elm
+++ b/website/sandbox/learnpianochords/src/Piano.elm
@@ -9,16 +9,8 @@ import Theory
 import UI
 
 
-{-| On mobile phones, the keyboard displays vertically.
--}
-type Direction
-    = Horizontal
-    | Vertical
-
-
 type alias KeyMarkup a =
     { offset : Int
-    , direction : Direction
     , isHighlit : Bool
     , note : Theory.Note
     , isRootNote : Bool
@@ -33,65 +25,27 @@ type alias Props =
     }
 
 
-{-| Convert an integer into its pixel representation for CSS.
--}
-pixelate : Int -> String
-pixelate x =
-    String.fromInt x ++ "px"
-
-
-{-| Pixel width of the white keys.
--}
-naturalWidth : Direction -> Int
-naturalWidth direction =
-    case direction of
-        Vertical ->
-            1080
-
-        Horizontal ->
-            45
-
-
-{-| Pixel height of the white keys.
--}
-naturalHeight : Direction -> Int
-naturalHeight direction =
-    case direction of
-        Vertical ->
-            130
-
-        Horizontal ->
-            250
-
+naturalThickness : Int
+naturalThickness =
+    105
 
-{-| Pixel width of the black keys.
--}
-accidentalWidth : Direction -> Int
-accidentalWidth direction =
-    case direction of
-        Vertical ->
-            round (toFloat (naturalWidth direction) * 0.6)
 
-        Horizontal ->
-            round (toFloat (naturalWidth direction) * 0.4)
+accidentalThickness : Int
+accidentalThickness =
+    round (toFloat naturalThickness / 2.0)
 
 
-{-| Pixel height of the black keys.
+{-| Convert an integer into its pixel representation for CSS.
 -}
-accidentalHeight : Direction -> Int
-accidentalHeight direction =
-    case direction of
-        Vertical ->
-            round (toFloat (naturalHeight direction) * 0.63)
-
-        Horizontal ->
-            round (toFloat (naturalHeight direction) * 0.63)
+pixelate : Int -> String
+pixelate x =
+    String.fromInt x ++ "px"
 
 
 {-| Return the markup for either a white or a black key.
 -}
 pianoKey : KeyMarkup a
-pianoKey { offset, isHighlit, note, direction, isRootNote } =
+pianoKey { offset, isHighlit, note, isRootNote } =
     let
         { natColor, accColor, hiColor, rootColor } =
             { natColor = "bg-white"
@@ -107,39 +61,23 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
             , "border-black"
             ]
 
-        { keyWidth, keyHeight, keyColor, offsetEdge, extraClasses } =
-            case ( Theory.keyClass note, direction ) of
-                ( Theory.Natural, Vertical ) ->
-                    { keyWidth = naturalWidth Vertical
-                    , keyHeight = naturalHeight Vertical
+        { keyLength, keyThickness, keyColor, offsetEdge, extraClasses } =
+            case Theory.keyClass note of
+                Theory.Natural ->
+                    { keyLength = "w-screen"
+                    , keyThickness = naturalThickness
                     , keyColor = natColor
                     , offsetEdge = "top"
                     , extraClasses = []
                     }
 
-                ( Theory.Natural, Horizontal ) ->
-                    { keyWidth = naturalWidth Horizontal
-                    , keyHeight = naturalHeight Horizontal
-                    , keyColor = natColor
-                    , offsetEdge = "left"
-                    , extraClasses = []
-                    }
-
-                ( Theory.Accidental, Vertical ) ->
-                    { keyWidth = accidentalWidth Vertical
-                    , keyHeight = accidentalHeight Vertical
+                Theory.Accidental ->
+                    { keyLength = "w-2/3"
+                    , keyThickness = accidentalThickness
                     , keyColor = accColor
                     , offsetEdge = "top"
                     , extraClasses = [ "z-10" ]
                     }
-
-                ( Theory.Accidental, Horizontal ) ->
-                    { keyWidth = accidentalWidth Horizontal
-                    , keyHeight = accidentalHeight Horizontal
-                    , keyColor = accColor
-                    , offsetEdge = "left"
-                    , extraClasses = [ "z-10" ]
-                    }
     in
     div
         [ class
@@ -153,8 +91,8 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
                 ( True, False ) ->
                     hiColor
             )
-        , style "width" (pixelate keyWidth)
-        , style "height" (pixelate keyHeight)
+        , class keyLength
+        , style "height" (pixelate keyThickness)
         , style offsetEdge (String.fromInt offset ++ "px")
         , class <| String.join " " (List.concat [ sharedClasses, extraClasses ])
         ]
@@ -164,39 +102,27 @@ pianoKey { offset, isHighlit, note, direction, isRootNote } =
 {-| A section of the piano consisting of all twelve notes.
 -}
 keys :
-    { direction : Direction
-    , start : Theory.Note
+    { start : Theory.Note
     , end : Theory.Note
     , highlitNotes : List Theory.Note
     , rootNote : Maybe Theory.Note
     }
     -> List (Html a)
-keys { direction, start, end, highlitNotes, rootNote } =
+keys { start, end, highlitNotes, rootNote } =
     let
         isHighlit note =
             List.member note highlitNotes
 
         spacing prevOffset prev curr =
-            case ( Theory.keyClass prev, Theory.keyClass curr, direction ) of
-                -- Horizontal
-                ( Theory.Natural, Theory.Accidental, Horizontal ) ->
-                    prevOffset + naturalWidth direction - round (toFloat (accidentalWidth direction) / 2)
-
-                ( Theory.Accidental, Theory.Natural, Horizontal ) ->
-                    prevOffset + round (toFloat (accidentalWidth direction) / 2)
-
-                ( Theory.Natural, Theory.Natural, Horizontal ) ->
-                    prevOffset + naturalWidth direction
-
-                -- Vertical
-                ( Theory.Natural, Theory.Accidental, Vertical ) ->
-                    prevOffset + naturalHeight direction - round (toFloat (accidentalHeight direction) / 2)
+            case ( Theory.keyClass prev, Theory.keyClass curr ) of
+                ( Theory.Natural, Theory.Accidental ) ->
+                    prevOffset + naturalThickness - round (toFloat accidentalThickness / 2)
 
-                ( Theory.Accidental, Theory.Natural, Vertical ) ->
-                    prevOffset + round (toFloat (accidentalHeight direction) / 2)
+                ( Theory.Accidental, Theory.Natural ) ->
+                    prevOffset + round (toFloat accidentalThickness / 2)
 
-                ( Theory.Natural, Theory.Natural, Vertical ) ->
-                    prevOffset + naturalHeight direction
+                ( Theory.Natural, Theory.Natural ) ->
+                    prevOffset + naturalThickness
 
                 -- This pattern should never hit.
                 _ ->
@@ -215,7 +141,6 @@ keys { direction, start, end, highlitNotes, rootNote } =
                                     { offset = 0
                                     , isHighlit = List.member curr highlitNotes
                                     , note = curr
-                                    , direction = direction
                                     , isRootNote =
                                         rootNote
                                             |> Maybe.map (\x -> x == curr)
@@ -235,7 +160,6 @@ keys { direction, start, end, highlitNotes, rootNote } =
                                     { offset = offset
                                     , isHighlit = List.member curr highlitNotes
                                     , note = curr
-                                    , direction = direction
                                     , isRootNote =
                                         rootNote
                                             |> Maybe.map (\x -> x == curr)
@@ -259,8 +183,7 @@ render : Props -> Html a
 render { chord } =
     div [ style "display" "flex" ]
         (keys
-            { direction = Vertical
-            , start = Theory.G3
+            { start = Theory.G3
             , end = Theory.C6
             , rootNote = chord |> Maybe.map .note
             , highlitNotes =
diff --git a/website/sandbox/learnpianochords/src/UI.elm b/website/sandbox/learnpianochords/src/UI.elm
index dd0b7d2e0c7e..4fa8f65fb54c 100644
--- a/website/sandbox/learnpianochords/src/UI.elm
+++ b/website/sandbox/learnpianochords/src/UI.elm
@@ -132,13 +132,13 @@ overlayButton :
 overlayButton { label, handleClick, isVisible } =
     let
         classes =
-            [ "bg-red-600"
-            , "absolute"
+            [ "fixed"
             , "top-0"
             , "left-0"
-            , "h-screen"
-            , "w-screen"
+            , "block"
             , "z-30"
+            , "w-screen"
+            , "h-screen"
             ]
 
         extraClasses =