feat: initial elm-ui layout
This commit is contained in:
parent
a86e7dadaf
commit
7dfab317a4
1 changed files with 79 additions and 2 deletions
81
src/Main.elm
81
src/Main.elm
|
@ -1,5 +1,82 @@
|
|||
module Main exposing (main)
|
||||
|
||||
import Html exposing (text)
|
||||
import Browser
|
||||
import Browser.Events as Events
|
||||
import Element exposing (..)
|
||||
import Element.Background as Background
|
||||
import Element.Font as Font
|
||||
import Html exposing (Html)
|
||||
|
||||
main = text "Hello, world!"
|
||||
|
||||
main : Program Flags Model Msg
|
||||
main =
|
||||
Browser.document { init = init, update = update, subscriptions = subscribe, view = view }
|
||||
|
||||
|
||||
type alias Model =
|
||||
{ w : Int, h : Int }
|
||||
|
||||
|
||||
type alias Flags =
|
||||
( Int, Int )
|
||||
|
||||
|
||||
init : Flags -> ( Model, Cmd Msg )
|
||||
init flags =
|
||||
case flags of
|
||||
( width, height ) ->
|
||||
( { w = width, h = height }, Cmd.none )
|
||||
|
||||
|
||||
type Msg
|
||||
= Resize Int Int
|
||||
|
||||
|
||||
update : Msg -> Model -> ( Model, Cmd Msg )
|
||||
update msg model =
|
||||
case msg of
|
||||
Resize width height ->
|
||||
( { model | w = width, h = height }, Cmd.none )
|
||||
|
||||
|
||||
subscribe : Model -> Sub Msg
|
||||
subscribe _ =
|
||||
Events.onResize Resize
|
||||
|
||||
|
||||
htmlify : List (Element Msg) -> List (Html Msg)
|
||||
htmlify =
|
||||
List.map (Element.layout [])
|
||||
|
||||
|
||||
vw : Model -> Float -> Float
|
||||
vw model percent =
|
||||
Basics.toFloat model.w * percent / 100
|
||||
|
||||
|
||||
vh : Model -> Float -> Float
|
||||
vh model percent =
|
||||
Basics.toFloat model.h * percent / 100
|
||||
|
||||
|
||||
view : Model -> Browser.Document Msg
|
||||
view model =
|
||||
{ title = "MacGregor House"
|
||||
, body =
|
||||
htmlify
|
||||
[ el
|
||||
[ width fill
|
||||
, height fill
|
||||
, Background.color (rgb255 0 0 0)
|
||||
]
|
||||
(el
|
||||
[ alignLeft
|
||||
, alignTop
|
||||
, moveRight (vw model 10)
|
||||
, moveDown (vh model 50)
|
||||
, Font.color (rgb255 255 255 255)
|
||||
]
|
||||
(text "MacGregor House")
|
||||
)
|
||||
]
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue