From 7b2163d804a67054b7ac1bf5d8eb047b39dd92d9 Mon Sep 17 00:00:00 2001 From: William Carroll Date: Sun, 19 Apr 2020 13:14:18 +0100 Subject: [PATCH] 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" --- .../sandbox/learnpianochords/src/Piano.elm | 139 ++++-------------- website/sandbox/learnpianochords/src/UI.elm | 8 +- 2 files changed, 35 insertions(+), 112 deletions(-) diff --git a/website/sandbox/learnpianochords/src/Piano.elm b/website/sandbox/learnpianochords/src/Piano.elm index abd8c6ec0..d231f1467 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,6 +25,16 @@ type alias Props = } +naturalThickness : Int +naturalThickness = + 105 + + +accidentalThickness : Int +accidentalThickness = + round (toFloat naturalThickness / 2.0) + + {-| Convert an integer into its pixel representation for CSS. -} pixelate : Int -> String @@ -40,58 +42,10 @@ 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 - - -{-| 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) - - -{-| Pixel height of the black keys. --} -accidentalHeight : Direction -> Int -accidentalHeight direction = - case direction of - Vertical -> - round (toFloat (naturalHeight direction) * 0.63) - - Horizontal -> - round (toFloat (naturalHeight direction) * 0.63) - - {-| 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) + case ( Theory.keyClass prev, Theory.keyClass curr ) of + ( Theory.Natural, Theory.Accidental ) -> + prevOffset + naturalThickness - round (toFloat accidentalThickness / 2) - ( Theory.Accidental, Theory.Natural, Horizontal ) -> - prevOffset + round (toFloat (accidentalWidth direction) / 2) + ( Theory.Accidental, Theory.Natural ) -> + prevOffset + round (toFloat accidentalThickness / 2) - ( Theory.Natural, Theory.Natural, Horizontal ) -> - prevOffset + naturalWidth direction - - -- Vertical - ( Theory.Natural, Theory.Accidental, Vertical ) -> - prevOffset + naturalHeight direction - round (toFloat (accidentalHeight direction) / 2) - - ( Theory.Accidental, Theory.Natural, Vertical ) -> - prevOffset + round (toFloat (accidentalHeight direction) / 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 dd0b7d2e0..4fa8f65fb 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 =