mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-23 19:19:52 +00:00
141 lines
2.6 KiB
Elm
141 lines
2.6 KiB
Elm
|
module Demo.Page
|
||
|
( demo, package, mds, mdl
|
||
|
, fromMDL, fromMDS
|
||
|
, body
|
||
|
)
|
||
|
where
|
||
|
|
||
|
import Html exposing (..)
|
||
|
import Html.Attributes exposing (href, class)
|
||
|
import Markdown
|
||
|
|
||
|
import Material.Grid exposing (..)
|
||
|
import Material.Style as Style exposing (styled, cs, css, attribute)
|
||
|
import Material.Button as Button
|
||
|
import Material.Color as Color
|
||
|
import Material.Icon as Icon
|
||
|
|
||
|
|
||
|
-- REFERENCES
|
||
|
|
||
|
|
||
|
demo : String -> (String, String)
|
||
|
demo url =
|
||
|
( "Demo source", url )
|
||
|
|
||
|
|
||
|
package : String -> (String, String)
|
||
|
package url =
|
||
|
( "Package documentation", url )
|
||
|
|
||
|
|
||
|
mds : String -> (String, String)
|
||
|
mds url =
|
||
|
( "Material Design Specification", url )
|
||
|
|
||
|
|
||
|
mdl : String -> (String, String)
|
||
|
mdl url =
|
||
|
( "Material Design Lite documentation", url )
|
||
|
|
||
|
|
||
|
references : List (String, String) -> List Html
|
||
|
references links =
|
||
|
[ text "References"
|
||
|
, ul []
|
||
|
( links |> List.map (\(str, url) ->
|
||
|
li [] [ a [ href url ] [ text str ] ]
|
||
|
)
|
||
|
)
|
||
|
]
|
||
|
|
||
|
|
||
|
-- DOCUMENTATION QUOTES
|
||
|
|
||
|
|
||
|
from : String -> String -> String -> Html
|
||
|
from title url body =
|
||
|
div []
|
||
|
[ text "From the "
|
||
|
, a [ href url ] [ text title ]
|
||
|
, text ":"
|
||
|
, Markdown.toHtml body
|
||
|
]
|
||
|
|
||
|
|
||
|
fromMDL : String -> String -> Html
|
||
|
fromMDL =
|
||
|
from "Material Design Lite documentation"
|
||
|
|
||
|
|
||
|
fromMDS : String -> String -> Html
|
||
|
fromMDS =
|
||
|
from "Material Design Specification"
|
||
|
|
||
|
|
||
|
-- TITLES
|
||
|
|
||
|
|
||
|
title : String -> Html
|
||
|
title t =
|
||
|
Style.div
|
||
|
[ Color.text Color.primary
|
||
|
, cs "mdl-typography--display-4"
|
||
|
-- TODO. Typography module
|
||
|
]
|
||
|
[ text t ]
|
||
|
|
||
|
|
||
|
demoTitle : Html
|
||
|
demoTitle =
|
||
|
Style.div
|
||
|
[ Color.text Color.primary
|
||
|
, cs "mdl-typography--display-1"
|
||
|
-- TODO. Typography module
|
||
|
]
|
||
|
[ text "Demo" ]
|
||
|
|
||
|
|
||
|
|
||
|
-- VIEW SOURCE BUTTON
|
||
|
|
||
|
|
||
|
addr : Signal.Address Button.Action
|
||
|
addr = (Signal.mailbox Button.Click).address
|
||
|
|
||
|
|
||
|
fab : String -> Html
|
||
|
fab url =
|
||
|
Button.fab addr (Button.model False)
|
||
|
[ css "position" "fixed"
|
||
|
, css "right" "72px"
|
||
|
, css "bottom" "72px"
|
||
|
, Button.colored
|
||
|
--, attribute (href srcUrl)
|
||
|
, attribute (Html.Attributes.attribute "onclick" ("alert('foo!');")) --("window.location.href = '" ++ srcUrl ++ "';") )
|
||
|
]
|
||
|
[ Icon.i "link" ]
|
||
|
|
||
|
|
||
|
-- BODY
|
||
|
|
||
|
|
||
|
body : String -> String -> Html -> List (String, String) -> List Html -> Html
|
||
|
body t srcUrl contents links demo =
|
||
|
div []
|
||
|
( title t
|
||
|
:: grid []
|
||
|
[ cell [ size All 6, size Phone 4 ] [ contents ]
|
||
|
, cell
|
||
|
[ size All 5, offset Desktop 1, size Phone 4, align Top ]
|
||
|
( references <| ("Demo source", srcUrl) :: links )
|
||
|
]
|
||
|
:: fab srcUrl
|
||
|
:: demoTitle
|
||
|
:: demo
|
||
|
)
|
||
|
|
||
|
|
||
|
|
||
|
|