Nicified demos.

demo/Demo/Badges.elm

@@ -17,7 +17,10 @@ c = cell [ size All 4 ]
 
 view : Html
 view =
-  [ grid 
+  [ p []
+      [ text """Below are examples of various badges."""
+      ]
+  , grid 
       [] 
       [ c [Style.span [ Badge.withBadge "2" ]  [text "Badge"]  ]
       , c [Style.span 
@@ -39,7 +42,7 @@ view =
       , c [ Icon.view "flight_takeoff" [ Icon.size24, Badge.withBadge "33", Badge.overlap ] [] ]
       ]
   ]
-  |> Page.body "Badges" srcUrl intro references
+  |> Page.body2 "Badges" srcUrl intro references
 
 
 

demo/Demo/Buttons.elm

@@ -113,8 +113,8 @@ view addr model =
           [ div
               [ style
                 [ ("text-align", "center")
-                , ("margin-top", "1em")
-                , ("margin-bottom", "1em")
+                , ("margin-top", ".6em")
+                , ("margin-bottom", ".6em")
                 ]
               ]
               [ view
@@ -123,7 +123,7 @@ view addr model =
               , div
                   [ style
                     [ ("font-size", "9pt")
-                    , ("margin-top", "1em")
+                    , ("margin-top", ".6em")
                     ]
                   ]
                   [ text description
@@ -134,8 +134,14 @@ view addr model =
     )
   )
   |> Grid.grid [] 
-  |> flip (::) []
-  |> Page.body "Buttons" srcUrl intro references
+  |> flip (::) 
+      [ p [] 
+         [ text """Various combinations of colors and button styles can be seen
+                   below. Most buttons have animations; try clicking."""
+         ]
+      ] 
+  |> List.reverse
+  |> Page.body2 "Buttons" srcUrl intro references
 
 intro : Html
 intro =

demo/Demo/Elevation.elm

@@ -31,13 +31,12 @@ elevate k =
     ]
 
 
-
-
 view : Html
 view =
   0 :: Elevation.validElevations
   |> List.map elevate 
-  |> Page.body "Elevation" srcUrl intro references
+  |> (::) ( p [] [ text """Below are boxes drawn at various elevations.""" ] )
+  |> Page.body1 "Elevation" srcUrl intro references
 
 
 

demo/Demo/Grid.elm

@@ -73,7 +73,7 @@ view =
     , std [size All 2, size Phone 4,  color 9] [text "2 (4 phone)"]
     ] |> grid []
   ]
-  |> Page.body "Grid" srcUrl intro references
+  |> Page.body1 "Grid" srcUrl intro references
 
 
 intro : Html

demo/Demo/Page.elm

@@ -41,10 +41,19 @@ mdl url =
 
 references : List (String, String) -> List Html
 references links = 
-  [ text "References" 
-  , ul [] 
+  [ header "References" 
+  , ul 
+      [ Html.Attributes.style 
+          [ ("padding-left", "0")
+          ]
+      ] 
       ( links |> List.map (\(str, url) -> 
-          li [] [ a [ href url ] [ text str ] ]
+          li 
+            [ Html.Attributes.style 
+                [ ("list-style-type", "none") 
+                ] 
+            ] 
+            [ a [ href url ] [ text str ] ]
         )
       )
   ]
@@ -87,13 +96,12 @@ title t =
     [ text t ]
 
 
-demoTitle : Html 
-demoTitle = 
-  Style.styled Html.h2
-    [ Color.text Color.primary 
-    ]
-    []
-    [ text "Example" ]
+
+header : String -> Html
+header str = 
+  text str
+
+
 
 -- VIEW SOURCE BUTTON
 
@@ -134,7 +142,7 @@ body1 t srcUrl contents links demo =
     --, fab srcUrl
     -- TODO: buttons can't be links (yet)
     -- TODO: FAB placement.
-    , demoTitle
+    --, header "Examples"
     , Style.div 
       [ css "margin-bottom" "48px"
       --, css "margin-top" "48px"
@@ -144,23 +152,25 @@ body1 t srcUrl contents links demo =
     ]
 
 
-body2 : String -> String -> Html -> List (String, String) -> List Html -> Html 
-body2 t srcUrl contents links demo = 
-  div []
+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 6 ] 
-          [ div [] contents
+          [ size All 4, size Desktop 5, size Tablet 8 ] 
+          [ contents
           , div 
               [] 
               ( references <| ("Demo source", srcUrl) :: links ) 
           ]
        , cell 
-           [ size All 4, size Desktop 6 ]
-           ( demoTitle
-           ::  demo 
-           )
+           [ size Phone 4, size Desktop 5, offset Desktop 1, size Tablet 8 ]
+           demo
        ]
     ]
 

demo/Demo/Snackbar.elm

@@ -264,33 +264,34 @@ clickView model (k, square) =
 
 view : Signal.Address Action -> Model -> Html
 view addr model =
-  Page.body "Snackbar & Toast" srcUrl intro references
+  Page.body2 "Snackbar & Toast" srcUrl intro references
     [ p [] 
         [ text """Click the buttons below to generate toasts and snackbars. Note that 
                   multiple activations are automatically queued."""
         ]
     , grid [ ] 
         [ cell 
-            [ size All 2, size Phone 2, align Top ]
-            [ addToastButton.view addr model.mdl 
-                [ Button.colored
-                , css "margin" "16px"
-                ] 
-                [ text "Toast" ]
-            ]
-        , cell 
-            [ size All 2, size Phone 2, align Top ]
+            [ size All 4, size Desktop 2]
             [ addSnackbarButton.view addr model.mdl 
                 [ Button.colored
-                , css "margin" "16px"
+                , css "width" "8em"
                 ] 
                 [ text "Snackbar" ]
             ]
         , cell 
-            [ size Desktop 7, offset Desktop 1 
-            , size Tablet 3, offset Tablet 1
+            [ size All 4, size Desktop 2]
+            [ addToastButton.view addr model.mdl 
+                [ Button.colored
+                , css "width" "8em"
+                ] 
+                [ text "Toast" ]
+            ]
+        , cell
+            [ size Desktop 10, offset Desktop 1 
+            , size Tablet 6, offset Tablet 1
             , size Phone 4
             , align Top 
+            , css "padding-top" "32px"
             ]
             (model.squares |> List.reverse |> List.map (clickView model))
         ]

demo/Demo/Textfields.elm

@@ -166,7 +166,7 @@ view addr model =
   |> grid []
   |> flip (::) [] 
   |> (::) (Html.text "Try entering text into some of the textfields below.")
-  |> Page.body "Textfields" srcUrl intro references
+  |> Page.body2 "Textfields" srcUrl intro references
 
 
 intro : Html