From f414f9d9607a34e0187613374769bed2060cf32c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B8ren=20Debois?= Date: Mon, 21 Mar 2016 06:02:39 +0100 Subject: [PATCH] Partial upgrade of Demo to use Style --- Makefile | 2 +- examples/Demo.elm | 6 ++-- examples/Demo/Grid.elm | 56 ++++++++++++++++++++++++-------------- examples/Demo/Snackbar.elm | 4 +-- src/Material/Grid.elm | 22 +++++++-------- 5 files changed, 53 insertions(+), 37 deletions(-) diff --git a/Makefile b/Makefile index b9087d9..ceb8d8c 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ PAGES=../elm-mdl-gh-pages elm.js: - elm-make examples/Demo.elm --output elm.js + elm-make examples/Demo.elm --warn --output elm.js pages : elm-make examples/Demo.elm --output $(PAGES)/elm.js diff --git a/examples/Demo.elm b/examples/Demo.elm index 22c2344..aa109d4 100644 --- a/examples/Demo.elm +++ b/examples/Demo.elm @@ -125,8 +125,10 @@ view addr model = let top = div [ style - [ ("margin", "auto") - , ("width", "90%") + [ ("max-width", "55rem") + , ("margin", "auto") + , ("padding-left", "5%") + , ("padding-right", "5%") ] ] ((Array.get model.layout.selectedTab tabViews diff --git a/examples/Demo/Grid.elm b/examples/Demo/Grid.elm index 4e8992d..3a92e8e 100644 --- a/examples/Demo/Grid.elm +++ b/examples/Demo/Grid.elm @@ -1,38 +1,52 @@ module Demo.Grid where import Material.Grid exposing (..) +import Material.Style exposing (Style, css) + import Html exposing (..) +-- Cell styling + +style : Int -> List Style +style h = + [ css "text-sizing" "border-box" + , css "background-color" "#BDBDBD" + , css "height" (toString h ++ "px") + , css "padding-left" "8px" + , css "padding-top" "4px" + , css "color" "white" + ] + +-- Cell variants + +democell : Int -> List Style -> List Html -> Cell +democell k styling = + cell <| List.concat [style k, styling] + +small : List Style -> List Html -> Cell +small = democell 50 + +std : List Style -> List Html -> Cell +std = democell 200 + +-- Grid view : List Html view = [ [1..12] - |> List.map (\i -> cell [size All 1] [text "1"]) + |> List.map (\i -> small [size All 1] [text "1"]) |> grid [] , [1 .. 3] - |> List.map (\i -> cell [size All 4] [text <| "4"]) + |> List.map (\i -> std [size All 4] [text <| "4"]) |> grid [] - , [ cell [size All 6] [text "6"] - , cell [size All 4] [text "4"] - , cell [size All 2] [text "2"] + , [ std [size All 6] [text "6"] + , std [size All 4] [text "4"] + , std [size All 2] [text "2"] ] |> grid [] - , [ cell [size All 6, size Tablet 8] [text "6 (8 tablet)"] - , cell [size All 4, size Tablet 6] [text "4 (6 tablet)"] - , cell [size All 2, size Phone 4] [text "2 (4 phone)"] + , [ std [size All 6, size Tablet 8] [text "6 (8 tablet)"] + , std [size All 4, size Tablet 6] [text "4 (6 tablet)"] + , std [size All 2, size Phone 4] [text "2 (4 phone)"] ] |> grid [] - , Html.node "style" [] [text """ - .mdl-cell { - text-sizing: border-box; - background-color: #BDBDBD; - height: 200px; - padding-left: 8px; - padding-top: 4px; - color: white; - } - .mdl-grid:first-of-type .mdl-cell { - height: 50px; - } - """] ] diff --git a/examples/Demo/Snackbar.elm b/examples/Demo/Snackbar.elm index acb12d7..81ac37f 100644 --- a/examples/Demo/Snackbar.elm +++ b/examples/Demo/Snackbar.elm @@ -173,7 +173,7 @@ introStyle = """ blockquote:after { content: none; } blockquote { border-left-style: solid; - border-width: 3px; + border-width: 1px; padding-left: 1.3ex; border-color: rgb(255,82,82); /* TODO: Really need a way to specify "secondary color" in @@ -202,7 +202,7 @@ From the - [Demo source code](https://github.com/debois/elm-mdl/blob/master/examples/Demo/Snackbar.elm) - [elm-mdl package documentation](http://package.elm-lang.org/packages/debois/elm-mdl/1.0.1/Material-Snackbar) - [Material Design Specification](https://www.google.com/design/spec/components/snackbars-toasts.html) - - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section). + - [Material Design Lite documentation](https://www.getmdl.io/components/index.html#snackbar-section) #### Demo diff --git a/src/Material/Grid.elm b/src/Material/Grid.elm index e42e408..7e6183a 100644 --- a/src/Material/Grid.elm +++ b/src/Material/Grid.elm @@ -1,6 +1,6 @@ module Material.Grid ( grid, noSpacing, maxWidth - , cell + , Cell, cell , Device(..) , Align(..) , size @@ -35,7 +35,7 @@ Example use: top : Html top = - grid + grid [] [ cell [ size All 4 ] [ h4 [] [text "Cell 1"] ] @@ -60,7 +60,7 @@ Example use: Cells are configured with a `List Style`; this configuration dictates the size, offset, etc. of the cell. -@docs cell, Device, size, offset, Align, align, hide, order +@docs cell, Cell, Device, size, offset, Align, align, hide, order -} @@ -69,7 +69,6 @@ size, offset, etc. of the cell. import Html exposing (..) -import Html.Attributes exposing (..) import Material.Helpers exposing (clip, filter) import Material.Style as Style exposing (Style, cs, styled) @@ -99,7 +98,7 @@ encapsulates a screen size.) type Device = All | Desktop | Tablet | Phone -{- Opaque cell type. +{-| Opaque cell type. -} type Cell = Cell Html @@ -144,19 +143,20 @@ offset device k = "mdl-cell--" ++ toString c ++ "-offset" ++ suffix device |> cs -{-| Vertical alignment of cells; use with `align`. +{-| Alignment of cell contents; use with `align`. -} -type Align = Top | Middle | Bottom +type Align = Top | Middle | Bottom {-| Specify vertical cell alignment. See `Align`. -} align : Align -> Style align a = - cs <| case a of - Top -> "mdl-cell--top" - Middle -> "mdl-cell--middle" - Bottom -> "mdl-cell--bottom" + case a of + Top -> cs "mdl-cell--top" + Middle -> cs "mdl-cell--middle" + Bottom -> cs "mdl-cell--bottom" + {-| Specify that a cell should be hidden on given `Device`.