dzuk-mutant / nice-screen-buckets / 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 : 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.