Responsively size UI
TL;DR: scale down UI for non-mobile devices. I pulled the screen resolution for my phone, the Google Pixel 4, off of the internet. I created a device profile in Chrome to develop this application specifically for my phone. To my surprise, when I opened the app on my phone, many of elements that looked good in Google Chrome, looked askew on my phone. I needed to troubleshoot. Here's how I did that: I used Tailwind to responsively color the bg for each breakpoint to see if my device was sm, md, lg, xl (according to Tailwind's breakpoint terminology). After reading Tailwind's documentation and comparing their breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device would be lg. It's not; it's md, which I confirmed by using ngrok to load localhost:8000 on my phone and see that the background-color was "md:bg-green-600". I'm still unsure why my device is not lg, but knowing that my device was md was enough to fix many of the styling issues. My current theory is that while my screen's resolution is 1080 wide, the pixel density affects the media query for the breakpoint.
This commit is contained in:
parent
74ebb8e869
commit
2fe6d7a10c
5 changed files with 84 additions and 12 deletions
|
@ -3,6 +3,7 @@ module Overview exposing (render)
|
||||||
import Html exposing (..)
|
import Html exposing (..)
|
||||||
import Html.Attributes exposing (..)
|
import Html.Attributes exposing (..)
|
||||||
import Html.Events exposing (..)
|
import Html.Events exposing (..)
|
||||||
|
import Responsive
|
||||||
import State
|
import State
|
||||||
import UI
|
import UI
|
||||||
|
|
||||||
|
@ -10,7 +11,11 @@ import UI
|
||||||
header1 : String -> Html msg
|
header1 : String -> Html msg
|
||||||
header1 copy =
|
header1 copy =
|
||||||
h2
|
h2
|
||||||
[ [ "text-center", "text-6xl", "pt-24", "pb-12" ]
|
[ [ "text-center"
|
||||||
|
, "pt-24"
|
||||||
|
, "pb-12"
|
||||||
|
, Responsive.h1
|
||||||
|
]
|
||||||
|> UI.tw
|
|> UI.tw
|
||||||
|> class
|
|> class
|
||||||
]
|
]
|
||||||
|
@ -19,13 +24,26 @@ header1 copy =
|
||||||
|
|
||||||
header2 : String -> Html msg
|
header2 : String -> Html msg
|
||||||
header2 copy =
|
header2 copy =
|
||||||
h2 [ [ "text-center", "text-5xl", "pb-10" ] |> UI.tw |> class ]
|
h2
|
||||||
|
[ [ "text-center"
|
||||||
|
, "pb-10"
|
||||||
|
, Responsive.h2
|
||||||
|
]
|
||||||
|
|> UI.tw
|
||||||
|
|> class
|
||||||
|
]
|
||||||
[ text copy ]
|
[ text copy ]
|
||||||
|
|
||||||
|
|
||||||
paragraph : String -> Html msg
|
paragraph : String -> Html msg
|
||||||
paragraph copy =
|
paragraph copy =
|
||||||
p [ [ "text-4xl", "pb-10" ] |> UI.tw |> class ]
|
p
|
||||||
|
[ [ "pb-10"
|
||||||
|
, Responsive.h3
|
||||||
|
]
|
||||||
|
|> UI.tw
|
||||||
|
|> class
|
||||||
|
]
|
||||||
[ text copy ]
|
[ text copy ]
|
||||||
|
|
||||||
|
|
||||||
|
@ -39,7 +57,7 @@ numberedList items =
|
||||||
ol
|
ol
|
||||||
[ [ "list-inside"
|
[ [ "list-inside"
|
||||||
, "list-decimal"
|
, "list-decimal"
|
||||||
, "text-4xl"
|
, Responsive.h3
|
||||||
]
|
]
|
||||||
|> UI.tw
|
|> UI.tw
|
||||||
|> class
|
|> class
|
||||||
|
|
|
@ -4,6 +4,7 @@ import Html exposing (..)
|
||||||
import Html.Attributes exposing (..)
|
import Html.Attributes exposing (..)
|
||||||
import Html.Events exposing (..)
|
import Html.Events exposing (..)
|
||||||
import Icon
|
import Icon
|
||||||
|
import Responsive
|
||||||
import State
|
import State
|
||||||
import Tempo
|
import Tempo
|
||||||
import Theory
|
import Theory
|
||||||
|
@ -98,7 +99,16 @@ keyCheckboxes model =
|
||||||
]
|
]
|
||||||
in
|
in
|
||||||
div []
|
div []
|
||||||
[ h2 [ class "text-gray-500 text-center pt-10 text-5xl" ] [ text "Select keys" ]
|
[ h2
|
||||||
|
[ [ "text-gray-500"
|
||||||
|
, "text-center"
|
||||||
|
, "pt-10"
|
||||||
|
, Responsive.h2
|
||||||
|
]
|
||||||
|
|> UI.tw
|
||||||
|
|> class
|
||||||
|
]
|
||||||
|
[ text "Select keys" ]
|
||||||
, ul []
|
, ul []
|
||||||
(circleOfFifths
|
(circleOfFifths
|
||||||
|> List.map
|
|> List.map
|
||||||
|
@ -115,7 +125,17 @@ keyCheckboxes model =
|
||||||
closePreferences : Html State.Msg
|
closePreferences : Html State.Msg
|
||||||
closePreferences =
|
closePreferences =
|
||||||
button
|
button
|
||||||
[ class "w-48 h-48 absolute right-0 top-0 z-10"
|
[ [ "w-48"
|
||||||
|
, "lg:w-32"
|
||||||
|
, "h-48"
|
||||||
|
, "lg:h-32"
|
||||||
|
, "absolute"
|
||||||
|
, "right-0"
|
||||||
|
, "top-0"
|
||||||
|
, "z-10"
|
||||||
|
]
|
||||||
|
|> UI.tw
|
||||||
|
|> class
|
||||||
, onClick (State.SetView State.Practice)
|
, onClick (State.SetView State.Practice)
|
||||||
]
|
]
|
||||||
[ Icon.close ]
|
[ Icon.close ]
|
||||||
|
|
19
website/sandbox/learnpianochords/src/Responsive.elm
Normal file
19
website/sandbox/learnpianochords/src/Responsive.elm
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
module Responsive exposing (..)
|
||||||
|
|
||||||
|
{-| Returns a string containing all of the Tailwind selectors we use to size
|
||||||
|
h2-sized elements across various devices. -}
|
||||||
|
h1 : String
|
||||||
|
h1 =
|
||||||
|
"text-6xl lg:text-4xl"
|
||||||
|
|
||||||
|
{-| Returns a string containing all of the Tailwind selectors we use to size
|
||||||
|
h2-sized elements across various devices. -}
|
||||||
|
h2 : String
|
||||||
|
h2 =
|
||||||
|
"text-5xl lg:text-3xl"
|
||||||
|
|
||||||
|
{-| Returns a string containing all of the Tailwind selectors we use to size
|
||||||
|
h3-sized elements across various devices. -}
|
||||||
|
h3 : String
|
||||||
|
h3 =
|
||||||
|
"text-4xl lg:text-2xl"
|
|
@ -3,6 +3,7 @@ module Tempo exposing (render)
|
||||||
import Html exposing (..)
|
import Html exposing (..)
|
||||||
import Html.Attributes exposing (..)
|
import Html.Attributes exposing (..)
|
||||||
import Html.Events exposing (..)
|
import Html.Events exposing (..)
|
||||||
|
import Responsive
|
||||||
import UI
|
import UI
|
||||||
|
|
||||||
|
|
||||||
|
@ -15,7 +16,14 @@ type alias Props msg =
|
||||||
render : Props msg -> Html msg
|
render : Props msg -> Html msg
|
||||||
render { tempo, handleInput } =
|
render { tempo, handleInput } =
|
||||||
div [ class "text-center" ]
|
div [ class "text-center" ]
|
||||||
[ p [ class "text-5xl py-10" ] [ text (String.fromInt tempo ++ " BPM") ]
|
[ p
|
||||||
|
[ [ "py-10"
|
||||||
|
, Responsive.h2
|
||||||
|
]
|
||||||
|
|> UI.tw
|
||||||
|
|> class
|
||||||
|
]
|
||||||
|
[ text (String.fromInt tempo ++ " BPM") ]
|
||||||
, UI.textField
|
, UI.textField
|
||||||
{ placeholderText = "Set tempo..."
|
{ placeholderText = "Set tempo..."
|
||||||
, handleInput = handleInput
|
, handleInput = handleInput
|
||||||
|
|
|
@ -3,6 +3,7 @@ module UI exposing (..)
|
||||||
import Html exposing (..)
|
import Html exposing (..)
|
||||||
import Html.Attributes exposing (..)
|
import Html.Attributes exposing (..)
|
||||||
import Html.Events exposing (..)
|
import Html.Events exposing (..)
|
||||||
|
import Responsive
|
||||||
|
|
||||||
|
|
||||||
type Color
|
type Color
|
||||||
|
@ -48,9 +49,11 @@ simpleButton { label, handleClick, color, classes } =
|
||||||
[ bgForColor color
|
[ bgForColor color
|
||||||
, textForColor color
|
, textForColor color
|
||||||
, "py-10"
|
, "py-10"
|
||||||
|
, "lg:py-6"
|
||||||
, "px-20"
|
, "px-20"
|
||||||
, "text-5xl"
|
, "lg:px-12"
|
||||||
, "rounded-lg"
|
, "rounded-lg"
|
||||||
|
, Responsive.h2
|
||||||
]
|
]
|
||||||
in
|
in
|
||||||
button
|
button
|
||||||
|
@ -80,8 +83,10 @@ textToggleButton { label, toggled, handleClick, classes } =
|
||||||
[ textColor
|
[ textColor
|
||||||
, textTreatment
|
, textTreatment
|
||||||
, "py-8"
|
, "py-8"
|
||||||
|
, "lg:py-5"
|
||||||
, "px-10"
|
, "px-10"
|
||||||
, "text-5xl"
|
, "lg:px-6"
|
||||||
|
, Responsive.h2
|
||||||
]
|
]
|
||||||
in
|
in
|
||||||
button
|
button
|
||||||
|
@ -100,12 +105,14 @@ textField :
|
||||||
textField { placeholderText, handleInput, classes } =
|
textField { placeholderText, handleInput, classes } =
|
||||||
let
|
let
|
||||||
inputClasses =
|
inputClasses =
|
||||||
[ "text-5xl"
|
[ "w-full"
|
||||||
, "w-full"
|
|
||||||
, "py-10"
|
, "py-10"
|
||||||
|
, "lg:py-6"
|
||||||
, "px-16"
|
, "px-16"
|
||||||
|
, "lg:px-10"
|
||||||
, "border"
|
, "border"
|
||||||
, "rounded-lg"
|
, "rounded-lg"
|
||||||
|
, Responsive.h2
|
||||||
]
|
]
|
||||||
in
|
in
|
||||||
input
|
input
|
||||||
|
@ -153,9 +160,9 @@ overlayButton { label, handleClick, isVisible } =
|
||||||
tw
|
tw
|
||||||
[ "transform"
|
[ "transform"
|
||||||
, "-rotate-90"
|
, "-rotate-90"
|
||||||
, "text-6xl"
|
|
||||||
, "text-white"
|
, "text-white"
|
||||||
, "font-mono"
|
, "font-mono"
|
||||||
|
, Responsive.h1
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
[ text label ]
|
[ text label ]
|
||||||
|
|
Loading…
Reference in a new issue