[{"name":"Screen","comment":" A module for storing and interpreting screen dimensions using buckets.\n\nDepending on the situation you need, you can either implement screen\nsize-based functionality in the form of:\n\n\n- CSS Media Queries in elm-css.\n- Elm code with the data and data conversion.\n- Your own implementation using the raw bucket data.\n\n\nAll methods use the same core set of display buckets,\nbut doing anything with data in Elm is slower because it relies\non JavaScript. So when doing presentation-related things,\nalways use the Media Queries wherever possible.\n\n\n----\n\n# Storing and using Screen Buckets in the 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 size.\n\n## General screen data\n@docs Metrics, WidthMetrics, HeightMetrics\n\n## Initialising and updating Metrics\n@docs zero, set\n\n## Bucket types\nThese are stored in `Screen.Metrics` and can also be converted to from raw\nInts from functions in the raw numbers section.\n\nThese are ideal for using buckets for changing the basic functionality\nand elements of your app based on screen size. If you want to change\nyour app's presentation, you should use CSS Media Queries instead.\n\n```\nHtml.div\n    []\n    -- show mobile menu if screen width is Handset\n    [   ( if model.screen.width.broad == Handset then\n            Html.div [] [Html.text \"menu\"]\n          else\n            []\n        )   \n    ]\n```\n\n@docs BroadWidthBucket, FineWidthBucket, HeightBucket\n\n----\n\n# CSS Media Queries\n\nUse these to create Media Queries to change your app's presentation in elm-css.\n\nThis is the most responsive way to change stuff based on screen size in the\nbrowser, so you should use it wherever you can.\n\nYou can stack these media queries in a list like below:\n\n```\ncss [ withMedia [ Screen.handset, Screen.portable1, Screen.portable2 ]\n        [ height (px 32)\n        , overflow hidden\n        ]\n\n    , withMedia [ Screen.portable3, Screen.wide ]\n        [ width (px 192)\n        , padding4 (px 64) (blc 32) (px 32) (px 48)\n        ]\n    ]\n```\n\n## Width Buckets (broad)\n@docs handset, portable, wide\n\n## Width Buckets (fine)\n@docs handset1, handset2, handset3, portable1, portable2, portable3, wide1, wide2\n\n## Height Buckets\n@docs limited, medium, tall\n\n----\n\n# Raw data\nShould you need access to the base metric numbers these buckets are made of.\n\n## Data types\n@docs Bucket, Boundary, BucketAxis\n\n## Convert data to buckets\n@docs toBroadWidthBucket, toFineWidthBucket, toHeightBucket\n\n## Width Buckets (broad)\n@docs handsetBkt, portableBkt, wideBkt\n\n## Width Buckets (fine)\n@docs handset1Bkt, handset2Bkt, handset3Bkt, portable1Bkt, portable2Bkt, portable3Bkt, wide1Bkt, wide2Bkt\n\n## Height\n@docs limitedBkt, mediumBkt, tallBkt\n\n\n\n","unions":[{"name":"Boundary","comment":" The value that the minimum or a maximum of a bucket can be at.\n\n- NoLimit: Either zero (for min) or infinity (for max).\n- Defined: A definite value (in px, represented as Ints here).\n","args":[],"cases":[["NoLimit",[]],["Defined",["Basics.Int"]]]},{"name":"BroadWidthBucket","comment":" Custom type representing broad width buckets.\n\nCheck this package's readme for summaries of all the buckets.\n","args":[],"cases":[["Handset",[]],["Portable",[]],["Wide",[]]]},{"name":"BucketAxis","comment":" Defines what axis a bucket is for.\n","args":[],"cases":[["Width",[]],["Height",[]]]},{"name":"FineWidthBucket","comment":" Custom type representing fine width buckets.\n\nCheck this package's readme for summaries of all the buckets.\n","args":[],"cases":[["Handset1",[]],["Handset2",[]],["Handset3",[]],["Portable1",[]],["Portable2",[]],["Portable3",[]],["Wide1",[]],["Wide2",[]]]},{"name":"HeightBucket","comment":" Custom type representing height buckets.\n\nCheck this package's readme for summaries of all the buckets.\n","args":[],"cases":[["Limited",[]],["Medium",[]],["Tall",[]]]}],"aliases":[{"name":"Bucket","comment":" A single screen dimension bucket.\n","args":[],"type":"{ min : Screen.Boundary, max : Screen.Boundary, axis : Screen.BucketAxis }"},{"name":"HeightMetrics","comment":" The record  for the height portion of Metrics.\n\nHeights are generally less important than height for determining\nscreen layout so there's only broad buckets.\n","args":[],"type":"{ exact : Basics.Int, broad : Screen.HeightBucket }"},{"name":"Metrics","comment":" The type for storing all screen information.\n\nWidths are generally more important than height for determining\nscreen layout so there's both broad and fine buckets for width.\n\n","args":[],"type":"{ width : Screen.WidthMetrics, height : Screen.HeightMetrics }"},{"name":"WidthMetrics","comment":" The record for the width portion of Metrics.\n\nWidths are generally more important than height for determining\nscreen layout so there's both broad and fine buckets.\n","args":[],"type":"{ exact : Basics.Int, broad : Screen.BroadWidthBucket, fine : Screen.FineWidthBucket }"}],"values":[{"name":"handset","comment":" CSS Media query covering all handset width buckets (handset1 - handset3). ","type":"Css.Media.MediaQuery"},{"name":"handset1","comment":" CSS Media query for the handset1 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"handset1Bkt","comment":" Raw values for the handset1 width bucket.\n","type":"Screen.Bucket"},{"name":"handset2","comment":" CSS Media query for the handset2 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"handset2Bkt","comment":" Raw values for the handset2 width bucket.\n","type":"Screen.Bucket"},{"name":"handset3","comment":" CSS Media query for the handset3 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"handset3Bkt","comment":" Raw values for the handset3 width bucket.\n","type":"Screen.Bucket"},{"name":"handsetBkt","comment":" Raw values for the handset width bucket.\n","type":"Screen.Bucket"},{"name":"limited","comment":" CSS Media query covering the limited height bucket.\n","type":"Css.Media.MediaQuery"},{"name":"limitedBkt","comment":" Raw values for the limited height bucket.\n","type":"Screen.Bucket"},{"name":"medium","comment":" CSS Media query covering the medium height bucket.\n","type":"Css.Media.MediaQuery"},{"name":"mediumBkt","comment":" Raw values for the medium height bucket.\n","type":"Screen.Bucket"},{"name":"portable","comment":" CSS Media query covering all portable width buckets (portable1 - portable3). ","type":"Css.Media.MediaQuery"},{"name":"portable1","comment":" CSS Media query for the portable1 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"portable1Bkt","comment":" Raw values for the portable1 width bucket.\n","type":"Screen.Bucket"},{"name":"portable2","comment":" CSS Media query for the portable2 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"portable2Bkt","comment":" Raw values for the portable2 width bucket.\n","type":"Screen.Bucket"},{"name":"portable3","comment":" CSS Media query for the portable3 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"portable3Bkt","comment":" Raw values for the portable3 width bucket.\n","type":"Screen.Bucket"},{"name":"portableBkt","comment":" Raw values for the portable width bucket.\n","type":"Screen.Bucket"},{"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\nBecause bucket boundaries are in Ints while functions like\n`Browser.Events.onResize` produce Floats, the function rounds those\nvalues up when comparing against buckets.\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 -> Screen.Metrics"},{"name":"tall","comment":" CSS Media query covering the tall height bucket.\n","type":"Css.Media.MediaQuery"},{"name":"tallBkt","comment":" Raw values for the tall height bucket.\n","type":"Screen.Bucket"},{"name":"toBroadWidthBucket","comment":" Takes an int representing screen width in pixels\nand converts it into a broad screen width bucket.\n","type":"Basics.Int -> Screen.BroadWidthBucket"},{"name":"toFineWidthBucket","comment":" Takes a Int representing screen width and \n and converts it into a fine screen width bucket.\n","type":"Basics.Int -> Screen.FineWidthBucket"},{"name":"toHeightBucket","comment":" Takes an int representing a screen height in pixels\nand converts it into a screen height bucket.\n\n Buckets boundaries are Ints, so this function rounds the\n screen width Int *up*.\n\nhttps://github.com/dzuk-mutant/Helium/blob/master/docs/display.md#display-height-groups\n","type":"Basics.Int -> Screen.HeightBucket"},{"name":"wide","comment":" CSS Media query covering all wide width buckets (wide1 - wide2). ","type":"Css.Media.MediaQuery"},{"name":"wide1","comment":" CSS Media query for the wide1 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"wide1Bkt","comment":" Raw values for the wide1 width bucket.\n","type":"Screen.Bucket"},{"name":"wide2","comment":" CSS Media query for the wide2 width bucket.\n","type":"Css.Media.MediaQuery"},{"name":"wide2Bkt","comment":" Raw values for the wide2 width bucket.\n","type":"Screen.Bucket"},{"name":"wideBkt","comment":" Raw values for the wide width bucket.\n","type":"Screen.Bucket"},{"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"}],"binops":[]}]