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:
William Carroll 2020-04-19 13:05:55 +01:00
parent 74ebb8e869
commit 2fe6d7a10c
5 changed files with 84 additions and 12 deletions

View file

@ -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

View file

@ -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 ]

View 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"

View file

@ -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

View file

@ -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 ]