Using flexbox for the add payment form

1 files changed, 42 insertions, 66 deletions

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)