Using flexbox for the add payment form

6 files changed, 52 insertions, 88 deletions

diff --git a/src/client/View/LoggedIn.elm b/src/client/View/LoggedIn.elm
index 20c99d3..96916e0 100644
--- a/src/client/View/LoggedIn.elm
+++ b/src/client/View/LoggedIn.elm
@@ -22,8 +22,8 @@ renderLoggedIn model loggedInView =
     [ addPayment model loggedInView
     , div
         [ class "expandables" ]
-        [ monthlyPayments model loggedInView
-        , account model loggedInView
+        [ account model loggedInView
+        , monthlyPayments model loggedInView
         ]
     , paymentsTable model loggedInView
     , paymentsPaging loggedInView
diff --git a/src/client/View/LoggedIn/Account.elm b/src/client/View/LoggedIn/Account.elm
index e2b8e7e..88f39c3 100644
--- a/src/client/View/LoggedIn/Account.elm
+++ b/src/client/View/LoggedIn/Account.elm
@@ -39,7 +39,7 @@ account model loggedInView =
 exceedingPayers : Model -> LoggedInView -> Html
 exceedingPayers model loggedInView =
   button
-    [ class "exceedingPayers"
+    [ class "header"
     , onClick actions.address (UpdateLoggedIn << UpdateAccount <| ToggleDetail)
     ]
     (  (List.map (exceedingPayer model loggedInView) (getOrderedExceedingPayers loggedInView.account.payers))
diff --git a/src/client/View/LoggedIn/Monthly.elm b/src/client/View/LoggedIn/Monthly.elm
index 518724b..9195479 100644
--- a/src/client/View/LoggedIn/Monthly.elm
+++ b/src/client/View/LoggedIn/Monthly.elm
@@ -42,19 +42,13 @@ 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  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
-            ]
+  in  button
+        [ class "header"
+        , 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 =
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 10e997d..951bb09 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -29,6 +29,9 @@ blockPadding = px 15
 blockPercentWidth :: Double
 blockPercentWidth = 90
 
+blockPercentMargin :: Double
+blockPercentMargin = (100 - blockPercentWidth) / 2
+
 blockMarginBottom :: Size Abs
 blockMarginBottom = px 50
 
@@ -45,7 +48,7 @@ global = do
 
   header ? do
     let headerHeight = 80
-    let sidePercent = (pct ((100 - blockPercentWidth) / 2))
+    let sidePercent = (pct blockPercentMargin)
 
     h1 ? do
       fontSize (px 45)
@@ -74,15 +77,17 @@ global = do
     form ? do
       centeredWithMargin
       marginBottom blockMarginBottom
-      clearFix
+      display flex
+      "justify-content" -: "center"
 
       ".name" <> ".cost" ? do
         position relative
-        width (pct 49)
+        display flex
+        marginRight (pct blockPercentMargin)
         label ? do
           fontWeight bold
           display inlineBlock
-          width (px 60)
+          width (px 40)
           textAlign (alignSide sideCenter)
           backgroundColor C.darkGrey
           color C.white
@@ -95,30 +100,19 @@ global = do
         input ? do
           defaultInput inputHeight
           borderRadius radius (px 0) (px 0) radius
+          "width" -: "calc(100% - 40px)"
         "input:focus + label" ? backgroundColor C.grey
 
-      ".name" ? do
-        float floatLeft
-        width (pct 40)
-        input ? width (pct 75)
-        label ? width (pct 20)
-        paddingRight (pct 5)
-
-      ".cost" ? do
-        float floatLeft
-        width (pct 25)
-        input ? width (pct 65)
-        label ? width (pct 30)
-        paddingRight (pct 5)
+      ".name" ? minWidth (px 150)
 
       button # ".frequency" ? do
         fontSize (pct 90)
-        float floatLeft
-        width (pct 15)
-        marginRight (pct 5)
+        marginRight (pct blockPercentMargin)
 
         (".punctual" <> ".monthly") ? do
-          defaultButton C.lightGrey C.darkGrey (inputHeight `Prelude.div` 2)
+          defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
+          paddingLeft (px 15)
+          paddingRight (px 15)
           ".selected" & do
             backgroundColor C.blue
             color C.white
@@ -127,9 +121,9 @@ global = do
         ".monthly" ? borderRadius 0 0 radius radius
 
       button # ".add" ? do
-        defaultButton C.red C.white inputHeight
-        float floatLeft
-        width (pct 15)
+        defaultButton C.red C.white (px inputHeight)
+        paddingLeft (px 15)
+        paddingRight (px 15)
 
       ".name.error" <> ".cost.error" ? do
         input ? borderColor C.redError
@@ -143,50 +137,27 @@ global = do
         left (px 0)
 
     ".expandables" ? do
-      centeredWithMargin
-      clearFix
 
       ".expand" ? do
         position absolute
         right blockPadding
         bottom (px 2)
 
-      ".monthlyPayments" ? do
-        marginBottom blockMarginBottom
-
-        largeScreen $ do
-          float floatLeft
-          width (pct 55)
-
-        ".count" ? do
-          defaultButton C.blue C.white inputHeight
-          buttonBlock
-          cursor cursorText
-
-        button # ".count" ? cursor pointer
+      ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
 
       ".account" ? do
-        marginBottom blockMarginBottom
-
-        largeScreen $ do
-          float floatRight
-          width (pct 40)
-
-        ".exceedingPayers" ? do
-          defaultButton C.green C.white inputHeight
-          buttonBlock
+        expandBlock C.green C.white (px inputHeight)
 
-          ".exceedingPayer" ? do
-            lineHeight (px inputHeight)
-            ".userName" ? marginRight (px 10)
+        ".header" |> ".exceedingPayer" ? do
+          lineHeight (px inputHeight)
+          ".userName" ? marginRight (px 10)
 
         ".income" ? do
           backgroundColor C.lightGrey
           lineHeight rowHeight
           padding (px 0) (px 20) (px 0) (px 20)
 
-      ".detail" |> (".count" <> ".exceedingPayers") ?
-        borderRadius radius radius 0 0
+      ".detail" |> ".header" ? borderRadius radius radius 0 0
 
     ".table" ? do
       display D.table
@@ -280,7 +251,7 @@ global = do
         marginBottom (px 10)
 
       button ? do
-        defaultButton C.red C.white inputHeight
+        defaultButton C.red C.white (px inputHeight)
         display block
         width (pct 100)
 
@@ -297,14 +268,14 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Color -> Color -> Integer -> Css
-defaultButton backgroundCol textCol pxHeight = do
+defaultButton :: Color -> Color -> Size Abs -> Css
+defaultButton backgroundCol textCol height = do
   backgroundColor backgroundCol
   color textCol
   borderRadius radius radius radius radius
   verticalAlign middle
   cursor pointer
-  lineHeight (px pxHeight)
+  lineHeight height
   textAlign (alignSide sideCenter)
 
 defaultInput :: Integer -> Css
@@ -322,12 +293,17 @@ centeredWithMargin = do
   marginLeft auto
   marginRight auto
 
-buttonBlock :: Css
-buttonBlock = do
-  width (pct 100)
-  fontSize (px 18)
-  borderRadius radius radius radius radius
-  textAlign (alignSide sideLeft)
-  position relative
-  paddingLeft blockPadding
-  paddingRight blockPadding
+expandBlock :: Color -> Color -> Size Abs -> Css
+expandBlock headerBackground headerColor headerHeight = do
+  marginBottom blockMarginBottom
+  marginLeft (pct blockPercentMargin)
+  marginRight (pct blockPercentMargin)
+  ".header" ? do
+    defaultButton headerBackground headerColor headerHeight
+    width (pct 100)
+    fontSize (px 18)
+    borderRadius radius radius radius radius
+    textAlign (alignSide sideLeft)
+    position relative
+    paddingLeft blockPadding
+    paddingRight (px 55)
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 4076768..9f16f6b 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -53,7 +53,6 @@ data Key =
   | MoneySymbol
   | Punctual
   | Monthly
-  | NoMonthlyPayment
   | SingularMonthlyCount
   | PluralMonthlyCount
 
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index fce979a..8c27a2d 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -220,11 +220,6 @@ m l Monthly =
     English -> "Monthly"
     French  -> "Mensuel"
 
-m l NoMonthlyPayment =
-  case l of
-    English -> "No monthly payment"
-    French  -> "Aucun paiement mensuel"
-
 m l SingularMonthlyCount =
   T.concat
     [ case l of