1 files changed, 32 insertions, 22 deletions
diff --git a/src/client/View/LoggedIn/Monthly.elm b/src/client/View/LoggedIn/Monthly.elm
index 17c354a..518724b 100644
--- a/src/client/View/LoggedIn/Monthly.elm
+++ b/src/client/View/LoggedIn/Monthly.elm
@@ -21,37 +21,40 @@ import Model.Translations exposing (getMessage, getParamMessage)
 import ServerCommunication as SC exposing (serverCommunications)
 
 import View.Icon exposing (renderIcon)
+import View.Expand exposing (..)
+import View.Price exposing (price)
 
 monthlyPayments : Model -> LoggedInView -> Html
 monthlyPayments model loggedInView =
   let monthly = loggedInView.monthly
-  in  if List.isEmpty monthly.payments
-        then
-          text ""
-        else
-          div
-            [ class ("monthlyPayments" ++ if monthly.visibleDetail then " detail" else "") ]
-            [ monthlyCount model monthly
-            , if monthly.visibleDetail then paymentsTable model loggedInView monthly else text ""
+  in  div
+        [ classList
+            [ ("monthlyPayments", True)
+            , ("detail", monthly.visibleDetail)
             ]
+        ]
+        [ monthlyCount model monthly
+        , if monthly.visibleDetail then paymentsTable model loggedInView monthly else text ""
+        ]
 
 monthlyCount : Model -> Monthly -> Html
 monthlyCount model monthly =
   let count = List.length monthly.payments
       total = List.sum << List.map .cost <| monthly.payments
       key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount"
-  in  button
-        [ class "count"
-        , onClick actions.address (UpdateLoggedIn << UpdateMonthly <| ToggleDetail)
-        ]
-        [ text (getParamMessage [toString count, toString total] key model.translations)
-        , div
-            [ class "expand" ]
-            [ if monthly.visibleDetail
-                then renderIcon "chevron-up"
-                else renderIcon "chevron-down"
+  in  if count == 0
+        then
+          div
+            [ class "count" ]
+            [ text (getMessage "NoMonthlyPayment" model.translations) ]
+        else
+          button
+            [ class "count"
+            , onClick actions.address (UpdateLoggedIn << UpdateMonthly <| ToggleDetail)
+            ]
+            [ text (getParamMessage [toString count, price model total] key model.translations)
+            , expand ExpandDown monthly.visibleDetail
             ]
-        ]
 
 paymentsTable : Model -> LoggedInView -> Monthly -> Html
 paymentsTable model loggedInView monthly =
@@ -65,13 +68,20 @@ paymentsTable model loggedInView monthly =
 paymentLine : Model -> LoggedInView -> Payment -> Html
 paymentLine model loggedInView payment =
   a
-    [ class ("row" ++ (if loggedInView.paymentEdition == Just payment.id then " edition" else ""))
+    [ classList
+        [ ("row", True)
+        , ("edition", loggedInView.paymentEdition == Just payment.id)
+        ]
     , onClick actions.address (UpdateLoggedIn (ToggleEdit payment.id))
     ]
     [ div [ class "cell category" ] [ text (payment.name) ]
     , div
-        [ class ("cell cost" ++ if payment.cost < 0 then " refund" else "") ]
-        [ text (toString payment.cost ++ " " ++ getMessage "MoneySymbol" model.translations) ]
+        [ classList
+            [ ("cell cost", True)
+            , ("refund", payment.cost < 0)
+            ]
+        ]
+        [ text (price model payment.cost) ]
     , div
         [ class "cell delete"
         , onClick serverCommunications.address (SC.DeleteMonthlyPayment payment.id)