Tidy up the deck editor layout

www/src/Pages/DeckEditor.elm

@@ -71,22 +71,8 @@ update msg model =
             ( { model | deck = Failed }, Cmd.none )
 
 
-viewDeck : Model -> E.Element Msg
+viewDeck : Deck.Deck -> E.Element Msg
-viewDeck model =
+viewDeck deck =
-    case model.deck of
-        Failed ->
-            E.none
-
-        NotFound ->
-            E.none
-
-        Loading ->
-            E.el [ E.height E.fill, E.centerX ] <|
-                E.html <|
-                    Spinner.view UI.manaSpinner
-                        model.spinner
-
-        Ready deck ->
     let
         cardRow card =
             E.row
@@ -122,17 +108,32 @@ view model =
         [ E.width E.fill
         , E.height E.fill
         ]
-        [ viewDeck model
+        [ case model.deck of
-        , E.el
+            Ready deck ->
-            [ E.height (E.px 50)
+                viewDeck deck
-            , E.width E.fill
+
-            , E.padding 10
+            Failed ->
-            , Font.color UI.colors.text
+                E.none
-            , Background.color UI.colors.navBar
+
-            , E.alignBottom
+            NotFound ->
+                E.none
+
+            Loading ->
+                E.el [ E.height E.fill, E.centerX ] <|
+                    E.html <|
+                        Spinner.view UI.manaSpinner
+                            model.spinner
+        , UI.footer <|
+            case model.deck of
+                Ready deck ->
+                    UI.text <|
+                        String.join " "
+                            [ String.fromInt (List.sum <| List.map .quantity deck.cards)
+                            , "cards"
                             ]
-          <|
+
-            E.text "Foo"
+                _ ->
+                    E.none
         ]
 
 

www/src/UI.elm

@@ -2,6 +2,7 @@ module UI exposing
     ( Dimensions
     , cardRow
     , colors
+    , footer
     , getViewport
     , isMobile
     , manaSpinner
@@ -270,3 +271,16 @@ cardRow options attributes card =
             setBadge options.foil
                 :: List.map priceBadge prices
         ]
+
+
+footer : E.Element msg -> E.Element msg
+footer element =
+    E.el
+        [ E.height (E.px 50)
+        , E.width E.fill
+        , E.padding 10
+        , Font.color colors.text
+        , Background.color colors.navBar
+        , E.alignBottom
+        ]
+        element