Screen.Metrics

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.

General screen data

type alias Metrics =

{ width : Int

, height : Int

}

The type for storing all screen information.

zero : Metrics

Makes a starting metrics structure where all the values are 0.

Use this in your initial model, but the model must be properly initialised afterwards.

set : Int -> Int -> Metrics -> Metrics

Takes the width and height values that you'd get from functions like Browser.Events.onResize and updates the screen metrics structure based on those values.

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        ScreenResize w h ->
            ( { model | screen = Screen.set w h model.screen }, Cmd.none )

setFloats : Float -> Float -> Metrics -> 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 for storage in Metrics.

dzuk-mutant/nice-screen-buckets/2.0.0

Screen.Metrics

General screen data

Modules