mirror of
https://github.com/correl/elm-mdl.git
synced 2024-11-23 19:19:52 +00:00
182 lines
3.5 KiB
Elm
182 lines
3.5 KiB
Elm
module Demo.Page
|
|
( demo, package, mds, mdl
|
|
, fromMDL, fromMDS
|
|
, body1, body2
|
|
)
|
|
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 =
|
|
[ header "References"
|
|
, ul
|
|
[ Html.Attributes.style
|
|
[ ("padding-left", "0")
|
|
]
|
|
]
|
|
( links |> List.map (\(str, url) ->
|
|
li
|
|
[ Html.Attributes.style
|
|
[ ("list-style-type", "none")
|
|
]
|
|
]
|
|
[ 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.styled Html.h1
|
|
[ Color.text Color.primary
|
|
--, cs "mdl-typography--display-4"
|
|
-- TODO. Typography module
|
|
]
|
|
[]
|
|
[ text t ]
|
|
|
|
|
|
|
|
header : String -> Html
|
|
header str =
|
|
text str
|
|
|
|
|
|
|
|
-- 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" "48px"
|
|
, css "top" "72px"
|
|
, css "z-index" "100"
|
|
, Button.colored
|
|
--, attribute (href srcUrl)
|
|
, attribute (Html.Attributes.attribute "onclick" ("alert('foo!');")) --("window.location.href = '" ++ srcUrl ++ "';") )
|
|
]
|
|
[ Icon.i "link" ]
|
|
|
|
|
|
-- BODY
|
|
|
|
|
|
body1 : String -> String -> Html -> List (String, String) -> List Html -> Html
|
|
body1 t srcUrl contents links demo =
|
|
div []
|
|
[ title t
|
|
, grid [ noSpacing ]
|
|
[ cell [ size All 6, size Phone 4 ] [ contents ]
|
|
, cell
|
|
[ size All 5, offset Desktop 1, size Phone 4, align Top
|
|
, css "position" "relative"
|
|
]
|
|
( references <| ("Demo source", srcUrl) :: links )
|
|
]
|
|
--, fab srcUrl
|
|
-- TODO: buttons can't be links (yet)
|
|
-- TODO: FAB placement.
|
|
--, header "Examples"
|
|
, Style.div
|
|
[ css "margin-bottom" "48px"
|
|
--, css "margin-top" "48px"
|
|
-- , Elevation.shadow 2
|
|
]
|
|
demo
|
|
]
|
|
|
|
|
|
body2 = body1
|
|
|
|
body3 : String -> String -> Html -> List (String, String) -> List Html -> Html
|
|
body3 t srcUrl contents links demo =
|
|
div
|
|
[
|
|
]
|
|
[ title t
|
|
, grid [ noSpacing ]
|
|
[ cell
|
|
[ size All 4, size Desktop 5, size Tablet 8 ]
|
|
[ contents
|
|
, div
|
|
[]
|
|
( references <| ("Demo source", srcUrl) :: links )
|
|
]
|
|
, cell
|
|
[ size Phone 4, size Desktop 5, offset Desktop 1, size Tablet 8 ]
|
|
demo
|
|
]
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|