2 files changed, 75 insertions, 21 deletions
diff --git a/frontend/Main.elm b/frontend/Main.elm
index c977e890ae95..3527540d9e9f 100644
--- a/frontend/Main.elm
+++ b/frontend/Main.elm
@@ -1,10 +1,21 @@
 module Main exposing (..)
 
 import Html exposing (Html, text, div, span)
+import Html.Attributes exposing (style)
 import Json.Decode exposing (..)
 import Http
 
 
+--  Material design imports
+
+import Material
+import Material.Card as Card
+import Material.Color as Color
+import Material.Grid exposing (grid, cell, size, Device(..))
+import Material.Layout as Layout
+import Material.Scheme as Scheme
+
+
 -- API interface to Gemma
 
 
@@ -52,24 +63,16 @@ type Msg
     = None
     | LoadTasks
     | NewTasks (Result Http.Error (List Task))
+    | Mdl (Material.Msg Msg)
 
 
 type alias Model =
     { tasks : List Task
     , error : Maybe String
+    , mdl : Material.Model
     }
 
 
-renderTask : Task -> Html Msg
-renderTask task =
-    div [] [ span [] [ text task.name ] ]
-
-
-view : Model -> Html Msg
-view model =
-    div [] (List.map renderTask model.tasks)
-
-
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
@@ -77,7 +80,7 @@ update msg model =
             ( model, loadTasks )
 
         NewTasks (Ok tasks) ->
-            ( { tasks = tasks, error = Nothing }, Cmd.none )
+            ( { model | tasks = tasks, error = Nothing }, Cmd.none )
 
         NewTasks (Err err) ->
             ( { model | error = Just (toString err) }, Cmd.none )
@@ -86,16 +89,66 @@ update msg model =
             ( model, Cmd.none )
 
 
-init : ( Model, Cmd Msg )
-init =
-    ( { tasks = [], error = Nothing }, loadTasks )
+
+-- View implementation
+
+
+white =
+    Color.text Color.white
+
+
+taskColor : Task -> Color.Hue
+taskColor task =
+    if task.remaining > 2 then
+        Color.Green
+    else if task.remaining < 0 then
+        Color.Red
+    else
+        Color.Yellow
+
+
+renderTask : Task -> Html Msg
+renderTask task =
+    Card.view
+        [ Color.background (Color.color (taskColor task) Color.S800) ]
+        [ Card.title [] [ Card.head [ white ] [ text task.name ] ] ]
+
+
+
+--    div [] [ span [] [  ] ]
+
+
+gemmaView : Model -> Html Msg
+gemmaView model =
+    grid []
+        (List.map (\t -> cell [ size All 3 ] [ renderTask t ])
+            model.tasks
+        )
+
+
+view : Model -> Html Msg
+view model =
+    gemmaView model |> Scheme.top
+
+
+
+-- div [ style [ ( "padding", "2rem" ) ] ]
+--
+--     |> Scheme.top
 
 
 main : Program Never Model Msg
 main =
-    Html.program
-        { init = init
-        , view = view
-        , update = update
-        , subscriptions = always Sub.none
-        }
+    let
+        model =
+            { tasks = []
+            , error = Nothing
+            , mdl = Material.model
+            }
+    in
+        Html.program
+            { init = ( model, Cmd.batch [ loadTasks, Material.init Mdl ] )
+            , view = view
+            , update = update
+            , subscriptions = Material.subscriptions Mdl
+            }
diff --git a/frontend/elm-package.json b/frontend/elm-package.json
index e0c71aadfdc6..2ae541ae0b95 100644
--- a/frontend/elm-package.json
+++ b/frontend/elm-package.json
@@ -10,7 +10,8 @@
     "dependencies": {
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "elm-lang/http": "1.0.0 <= v < 2.0.0"
+        "elm-lang/http": "1.0.0 <= v < 2.0.0",
+        "debois/elm-mdl": "8.1.0 <= v < 9.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }