Skip to content

Instantly share code, notes, and snippets.

@SirmaXX
Last active July 18, 2019 15:23
Show Gist options
  • Save SirmaXX/28d4e0142f23d124a7f3e814e00d3a6e to your computer and use it in GitHub Desktop.
Save SirmaXX/28d4e0142f23d124a7f3e814e00d3a6e to your computer and use it in GitHub Desktop.
responsive elm tricky
import Browser
import Html exposing (map,text,Html,div,p,ul,button,input,h1,li,br,h3 )
import Html.Attributes exposing (value,type_ ,checked,class,style)
import Html.Events exposing (onClick,onInput)
import Element exposing (..)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
import Element.Input as Input
import Element.Region as Region
--MAİN
main =
Browser.document
{ init = init
, update = update
,subscriptions = subscriptions
, view = view
}
type alias Flags=
{
width:Int
,height:Int
}
type alias Model =
{ device:Device }
--INIT
init : Flags -> ( Model, Cmd Msg )
init flags =
( { device = Element.classifyDevice flags
}
, Cmd.none
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
DeviceClassified device ->
( { model | device = device }
, Cmd.none
)
subscriptions : Model -> Sub Msg
subscriptions model =
onResize <|
\width height ->
DeviceClassified (Element.classifyDevice { width = width, height = height })
--UPDATE
view : Model -> Browser.Document Msg
view model =
{ title = "Deniz Balcı"
, body = deviceBody model
}
deviceBody : Model -> List (Html Msg)
deviceBody model =
case model.device.class of
Phone ->
mobileLayout
_ ->
a4PagesLayout
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment