A module for creating and storing screen metrics in your model.
Use this array of tools when you need to store and update the screen size in your model, so you can change your app's functionality based on screen size by comparing them to Buckets.
{ width : Basics.Int
, height : Basics.Int
}
The type for storing all screen information.
zero : Metrics
Makes a starting metrics structure where all the values are 0.
Use this as an initial value for your model that you can then initialise from.
fromInts : Basics.Int -> Basics.Int -> Metrics
Takes the width and height values that you'd get from functions like
Browser.Events.onResize
and creates Metrics based on those values.
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ScreenResize w h ->
( { model | screen = Screen.Metrics.fromInts w h }, Cmd.none )
fromFloats : Basics.Float -> Basics.Float -> Metrics
When you want to initialise your Metrics, you'll probably end up using
Browser.Dom.getViewport
. Functions like this return pixels represented as Floats
instead of Ints, so use this function in these cases, which will correctly round
the Floats up into Ints to create Metrics.