[{"name":"Screen","comment":" A module that contains functions for comparing Screen Metrics against\nScreen Buckets so you can change your app's functionality or presentation\nbased on how big the user's screen is.\n\nThis module also contains optional pre-built Buckets.\n\n# Checking Metrics against Buckets\n\nDepending on the situation you need, you can either check via:\n\n- Checking the Metrics values in the model.\n- CSS media queries in elm-css.\n\nAll methods use the same Bucket data type, but doing anything with\ndata in Elm is slower because it relies on JavaScript. So when doing\npresentation-related things with elm-css, always use the media queries\nwherever possible.\n\n## Checking with Elm data\n@docs isIn\n\n## Checking with CSS media queries\n@docs withMedia\n\n----\n\n\n# Default Buckets\nThese are the default buckets that come with this, but you can make your own with `Screen.Bucket`.\n\nDetails about what sizes these buckets are and what they're for can be found in the readme.\n\n## Width Buckets\nBecause width tends to be more important than height in creating\nresponsive interfaces, width buckets have more detail, with have two\ndifferent parallel levels of detail for convenience.\n\n### Broad buckets\n@docs handset, portable, wide\n\n### Fine Buckets\n@docs handset1, handset2, handset3, portable1, portable2, portable3, wide1, wide2\n\n## Height Buckets\n@docs limited, medium, tall\n\n\n","unions":[],"aliases":[],"values":[{"name":"handset","comment":" A bucket that covers all 'handset' buckets (`handset1`, `handset2` and `handset3`).\n","type":"Screen.Bucket.Bucket"},{"name":"handset1","comment":" The handset1 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"handset2","comment":" The handset2 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"handset3","comment":" The handset3 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"isIn","comment":" Checks to see if the screen size (represented by `Metrics`) matches\nany buckets that you provide.\n\nUseful when you want to swap out functionality, layouts or\ninterface elements based on screen size.\n```\nHtml.div\n    []\n    -- show mobile menu if screen width is small enough\n    [   ( if Screen.isIn [ handset, portable1 ] model.screen then\n            Html.div [] [ Html.text \"menu\" ]\n          else\n            []\n        )   \n    ]\n```\n","type":"List.List Screen.Bucket.Bucket -> Screen.Metrics.Metrics -> Basics.Bool"},{"name":"limited","comment":" The limited height bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"medium","comment":" The medium height bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"portable","comment":" A bucket that covers all 'portable' buckets (`portable1`, `portable2` and `portable3`).\n","type":"Screen.Bucket.Bucket"},{"name":"portable1","comment":" The portable1 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"portable2","comment":" The portable2 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"portable3","comment":" The portable3 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"tall","comment":" The tall height bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"wide","comment":" A bucket that covers all 'wide' buckets (`wide1` and `wide2`).\n","type":"Screen.Bucket.Bucket"},{"name":"wide1","comment":" The wide1 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"wide2","comment":" The wide2 width bucket.\n","type":"Screen.Bucket.Bucket"},{"name":"withMedia","comment":" Converts a list of buckets and a list of elm-css Styles into a Style\nthat become active depending on whether or not the screen size\nis in the given buckets.\n\nIt performs the equivalent of `Css.Media.withMedia`.\n\n```\ncss [ Screen.withMedia [ handset, portable1, portable2 ]\n        [ height (px 32)\n        , overflow hidden\n        ]\n\n    , Screen.withMedia [ portable3, wide ]\n        [ width (px 192)\n        , padding4 (px 64) (px 32) (px 32) (px 48)\n        ]\n    ]\n```\n\nThis doesn't use your model's `Metrics` because CSS media\nqueries don't get checked against the screen size within Elm,\nbut by the browsers directly.\n","type":"List.List Screen.Bucket.Bucket -> List.List Css.Style -> Css.Style"}],"binops":[]},{"name":"Screen.Bucket","comment":" A module for creating sets of screen boundaries (here, called 'buckets') for comparing against the user's screen size.\n\n## Types\n@docs Bucket, Boundary, Axis\n\n## Functions\n@docs create, stepBelow\n\n## Conversions\n@docs toMediaQuery\n\n","unions":[{"name":"Axis","comment":" Defines what axis a bucket is for.\n","args":[],"cases":[["Width",[]],["Height",[]]]},{"name":"Boundary","comment":" The value that the minimum or a maximum of a Bucket can be at.\n\n- `NoLimit`: Represents either zero (if min) or infinity (if max).\n- `Defined`: A definite value (in px, represented as Ints).\n","args":[],"cases":[["NoLimit",[]],["Defined",["Basics.Int"]]]}],"aliases":[{"name":"Bucket","comment":" A single bucket. Can only be used for one dimension (as defined by it's axis).\n","args":[],"type":"{ min : Screen.Bucket.Boundary, max : Screen.Bucket.Boundary, axis : Screen.Bucket.Axis }"}],"values":[{"name":"create","comment":" A function that creates a Bucket using the normal values that Buckets contain.\n\nConsider using `stepBelow` in conjunction with this function to create\nbuckets that neatly slot next to each other.\n```\nmobile : Bucket\nmobile = Bucket.create Width NoLimit (stepBelow tablet) \n\ntablet : Bucket\ntablet = Bucket.create Width (Defined 412) (stepBelow desktop) \n\ndesktop : Bucket\ndesktop = Bucket.create Width (Defined 1052) NoLimit\n```\n","type":"Screen.Bucket.Axis -> Screen.Bucket.Boundary -> Screen.Bucket.Boundary -> Screen.Bucket.Bucket"},{"name":"stepBelow","comment":" Will produce a Boundary that is -1 of the minimum\nboundary of the given Bucket, if that Boundary is `Definite`.\n\nIf the minimum is `NoLimit` instead, then it will just return `NoLimit`.\n\nUseful when you want to create buckets that neatly\nslot next to each other.\n\n\n```\ntablet : Bucket\ntablet = Bucket.create Width (Defined 512) (stepBelow desktop) \n\ndesktop : Bucket\ndesktop = Bucket.create Width (Defined 1052) NoLimit\n```\n","type":"Screen.Bucket.Bucket -> Screen.Bucket.Boundary"},{"name":"toMediaQuery","comment":" A function that converts a Bucket into an elm-css MediaQuery.\n\nThis function exists for possible edge cases that you might have. \nIf you want to use buckets as media queries in a typical way,\nyou'll probably want to look at `Screen.withMedia` instead.\n","type":"Screen.Bucket.Bucket -> Css.Media.MediaQuery"}],"binops":[]},{"name":"Screen.Metrics","comment":"\n\nA module for creating and storing screen metrics in your model.\n\nUse this array of tools when you need to store and update the screen size\nin your model, so you can change your app's functionality based on screen\nsize by comparing them to Buckets.\n\n# General screen data\n@docs Metrics, zero, set, setFloats\n\n","unions":[],"aliases":[{"name":"Metrics","comment":" The type for storing all screen information.\n","args":[],"type":"{ width : Basics.Int, height : Basics.Int }"}],"values":[{"name":"set","comment":" Takes the width and height values that you'd get from functions like\n`Browser.Events.onResize` and updates the screen metrics structure based\non those values.\n\n````\nupdate : Msg -> Model -> ( Model, Cmd Msg )\nupdate msg model =\n    case msg of\n        ScreenResize w h ->\n            ( { model | screen = Screen.set w h model.screen }, Cmd.none )\n\n````\n","type":"Basics.Int -> Basics.Int -> Screen.Metrics.Metrics -> Screen.Metrics.Metrics"},{"name":"setFloats","comment":" When you want to initialise your Metrics, you'll probably end up using\n`Browser.Dom.getViewport`. Functions like this return pixels represented as Floats\ninstead of Ints, so use this function in these cases, which will correctly round\nthe Floats up into Ints for storage in `Metrics`.\n","type":"Basics.Float -> Basics.Float -> Screen.Metrics.Metrics -> Screen.Metrics.Metrics"},{"name":"zero","comment":" Makes a starting metrics structure where all the values are 0.\n\nUse this in your initial model, but the model must be properly\ninitialised afterwards.\n","type":"Screen.Metrics.Metrics"}],"binops":[]}]