Use the search to view either punctual or monthly payments

11 files changed, 158 insertions, 239 deletions

diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
new file mode 100644
index 0000000..f0b8009
--- /dev/null
+++ b/src/server/Design/Dialog.hs
@@ -0,0 +1,13 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Dialog
+  ( design
+  ) where
+
+import Clay
+
+design :: Css
+design = do
+
+  ".paymentDialog" ? do
+    ".radioGroup" ? ".title" ? display none
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 4bd1ad6..c2537f1 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -66,14 +66,18 @@ design = do
       color Color.silver
       marginBottom (em 0.8)
 
-    ".radioElems" ? do
+    ".radioInputs" ? do
       display flex
-      "justify-content" -: "space-around"
-
-      label ? do
-        marginBottom (px 5)
-        display block
-        cursor pointer
-        input ? do
-          margin (px 0) (px 8) (px (-1)) (px 0)
-          cursor pointer
+      "justify-content" -: "center"
+
+      ".radioInput:not(:last-child)::after" ? do
+        content (stringContent "/")
+        marginLeft (px 10)
+        marginRight (px 10)
+
+      input ? display none
+      label ? cursor pointer
+
+      "input:checked + label" ? do
+        color Color.chestnutRose
+        fontWeight bold
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 7d4a1bb..149769c 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Design.Header as Header
 import qualified Design.SignIn as SignIn
 import qualified Design.LoggedIn as LoggedIn
 import qualified Design.Form as Form
+import qualified Design.Dialog as Dialog
 
 import Design.Animation.Keyframes
 
@@ -28,6 +29,7 @@ global = do
   header ? Header.design
   ".signIn" ? SignIn.design
   ".loggedIn" ? LoggedIn.design
+  ".dialog" ? Dialog.design
   Form.design
 
   allKeyframes
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index deb0aab..c8b3070 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,10 +3,9 @@
 module Design.Helper
   ( clearFix
   , defaultButton
-  , iconButton
   , defaultInput
+  , iconButton
   , centeredWithMargin
-  , expandBlock
   , verticalCentering
   ) where
 
@@ -69,21 +68,6 @@ centeredWithMargin = do
   marginLeft auto
   marginRight auto
 
-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 focusLighten
-    width (pct 100)
-    fontSize (px 18)
-    borderRadius radius radius radius radius
-    textAlign (alignSide sideLeft)
-    position relative
-    paddingLeft blockPadding
-    paddingRight (px 55)
-
 verticalCentering :: Css
 verticalCentering = do
   position absolute
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 63ff413..5a3297a 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -8,15 +8,15 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import qualified Design.LoggedIn.Home as HomeDesign
-import qualified Design.LoggedIn.Income as IncomeDesign
-import qualified Design.LoggedIn.Stat as StatDesign
+import qualified Design.LoggedIn.Home as Home
+import qualified Design.LoggedIn.Income as Income
+import qualified Design.LoggedIn.Stat as Stat
 
 design :: Css
 design = do
-  ".home" ? HomeDesign.design
-  ".income" ? IncomeDesign.design
-  ".stat" ? StatDesign.design
+  ".home" ? Home.design
+  ".income" ? Income.design
+  ".stat" ? Stat.design
 
   (".income" <> ".stat") ? do
     "margin" -: "0 2vw"
diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs
index 47bfc84..7845434 100644
--- a/src/server/Design/LoggedIn/Home.hs
+++ b/src/server/Design/LoggedIn/Home.hs
@@ -6,16 +6,12 @@ module Design.LoggedIn.Home
 
 import Clay
 
-import qualified Design.LoggedIn.Home.Add as Add
-import qualified Design.LoggedIn.Home.Monthly as Monthly
-import qualified Design.LoggedIn.Home.Search as Search
+import qualified Design.LoggedIn.Home.Header as Header
 import qualified Design.LoggedIn.Home.Table as Table
 import qualified Design.LoggedIn.Home.Pages as Pages
 
 design :: Css
 design = do
-  form # ".addPayment" ? Add.design
-  ".monthly" ? Monthly.design
-  ".search" ? Search.design
+  ".header" ? Header.design
   ".table" ? Table.design
   ".pages" ? Pages.design
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
deleted file mode 100644
index ce64077..0000000
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ /dev/null
@@ -1,87 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Add
-  ( design
-  ) where
-
-import Data.Monoid ((<>))
-
-import Clay
-
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
-
-design :: Css
-design = do
-  centeredWithMargin
-  display flex
-  "justify-content" -: "center"
-
-  ".name" <> ".cost" ? do
-    position relative
-    display flex
-    marginRight (pct blockPercentMargin)
-    label ? do
-      fontWeight bold
-      display inlineBlock
-      width (px 50)
-      textAlign (alignSide sideCenter)
-      backgroundColor Color.dustyGray
-      color Color.white
-      height (px inputHeight)
-      lineHeight (px inputHeight)
-      fontSize (px 22)
-      verticalAlign middle
-      cursor cursorText
-      borderRadius (px 0) radius radius (px 0)
-    input ? do
-      defaultInput inputHeight
-      borderRadius radius (px 0) (px 0) radius
-      "width" -: "calc(100% - 40px)"
-    input # focus |+ label ?
-      backgroundColor Color.silver
-    hover & do
-      input ? borderColor Color.silver
-      label ? backgroundColor Color.silver
-
-  ".name" ? minWidth (px 150)
-
-  button # ".frequency" ? do
-    fontSize (pct 90)
-    marginRight (pct blockPercentMargin)
-
-    (".punctual" <> ".monthly") ? do
-      defaultButton Color.wildSand Color.dustyGray (px $ inputHeight `Prelude.div` 2) focusLighten
-      paddingLeft (px 15)
-      paddingRight (px 15)
-      ".selected" & do
-        backgroundColor Color.gothic
-        color Color.white
-
-    hover & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten Color.gothic)
-
-    focus & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten Color.gothic)
-
-    ".punctual" ? borderRadius radius radius 0 0
-    ".monthly" ? borderRadius 0 0 radius radius
-
-  button # ".add" ? do
-    defaultButton Color.chestnutRose Color.white (px inputHeight) focusLighten
-    paddingLeft (px 15)
-    paddingRight (px 15)
-    i ? marginLeft (px 10)
-    ".waitingServer" & ("cursor" -: "not-allowed")
-
-  ".name.error" <> ".cost.error" ? do
-    input ? borderColor Color.chestnutRose
-    label ? backgroundColor Color.chestnutRose
-    "input:focus + label" ? backgroundColor Color.chestnutRose
-
-  ".errorMessage" ? do
-    position absolute
-    color Color.chestnutRose
-    top (px (inputHeight + 10))
-    left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs
new file mode 100644
index 0000000..9008a95
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Header.hs
@@ -0,0 +1,56 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Header
+  ( design
+  ) where
+
+import Clay
+
+import Design.Constants
+
+import qualified Design.Helper as Helper
+import qualified Design.Color as Color
+import qualified Design.Constants as Constants
+
+design :: Css
+design = do
+  marginBottom blockMarginBottom
+  marginLeft (pct blockPercentMargin)
+  marginRight (pct blockPercentMargin)
+
+  ".exceedingPayers" ? do
+    backgroundColor Color.mossGreen
+    padding (px 10) (px 10) (px 10) (px 10)
+    borderRadius (px 5) (px 5) (px 5) (px 5)
+    color Color.white
+    marginBottom (em 1)
+
+    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+    ".userName" ? marginRight (px 5)
+
+  ".searchLine" ? do
+    marginBottom (em 1)
+    form ? do
+      display inlineBlock
+
+      ".textInput" ? do
+        display inlineBlock
+        marginRight (px 30)
+        marginBottom (px 0)
+
+      ".radioGroup" ? do
+        display inlineBlock
+        marginBottom (px 0)
+        ".title" ? display none
+
+    ".addPayment" ? do
+      Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten
+      float floatRight
+
+  ".infos" ? do
+    lineHeight (px Constants.inputHeight)
+
+    ".partition" ? do
+      color Color.dustyGray
+      marginLeft (px 15)
diff --git a/src/server/Design/LoggedIn/Home/Monthly.hs b/src/server/Design/LoggedIn/Home/Monthly.hs
deleted file mode 100644
index 5e976ef..0000000
--- a/src/server/Design/LoggedIn/Home/Monthly.hs
+++ /dev/null
@@ -1,23 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Monthly
-  ( design
-  ) where
-
-import Clay
-
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
-
-design :: Css
-design = do
-
-  expandBlock Color.gothic Color.white (px inputHeight)
-
-  ".expand" ? do
-    position absolute
-    right blockPadding
-    bottom (px 0)
-
-  ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Search.hs b/src/server/Design/LoggedIn/Home/Search.hs
deleted file mode 100644
index 726b4cf..0000000
--- a/src/server/Design/LoggedIn/Home/Search.hs
+++ /dev/null
@@ -1,31 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Search
-  ( design
-  ) where
-
-import Clay
-
-import Design.Constants
-
-import qualified Design.Helper as Helper
-import qualified Design.Color as Color
-import qualified Design.Constants as Constants
-
-design :: Css
-design = do
-  marginBottom blockMarginBottom
-  marginLeft (pct blockPercentMargin)
-  marginRight (pct blockPercentMargin)
-
-  ".textInput" ? do
-    display inlineBlock
-    marginRight (px 30)
-    marginBottom (px 0)
-
-  ".stat" ? do
-    lineHeight (pct 100)
-
-  ".addPayment" ? do
-    Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-    float floatRight
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 538bc6d..a229132 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -16,70 +16,75 @@ import Design.Helper
 
 design :: Css
 design = do
-  display D.table
-  width (pct 100)
-  textAlign (alignSide (sideCenter))
+  ".noPayment" ? do
+    margin (em 2) (em 2) (em 2) (em 2)
+    textAlign (alignSide sideCenter)
 
-  ".header" <> ".row" ? display tableRow
-  let headerHeight = (px 70)
+  ".lines" ? do
+    display D.table
+    width (pct 100)
+    textAlign (alignSide (sideCenter))
 
-  ".header" ? do
-    fontWeight bold
-    backgroundColor Color.gothic
-    color Color.white
-    fontSize iconFontSize
-    height headerHeight
+    ".header" <> ".row" ? display tableRow
+    let headerHeight = (px 70)
 
-  ".row" ? do
-    fontSize (px 18)
-    height (px rowHeightPx)
-    ".cell:first-child::before" ? do
-      display block
-      content (stringContent "")
-      position absolute
-      top (px 0)
-      left (px 0)
-      width (px 0)
+    ".header" ? do
+      fontWeight bold
+      backgroundColor Color.gothic
+      color Color.white
+      fontSize (px 18)
+      height headerHeight
+
+    ".row" ? do
+      fontSize (px 18)
       height (px rowHeightPx)
-      backgroundColor Color.mossGreen
-      transition "width" (sec 0.3) ease (sec 0)
-      opacity (0.8)
+      ".cell:first-child::before" ? do
+        display block
+        content (stringContent "")
+        position absolute
+        top (px 0)
+        left (px 0)
+        width (px 0)
+        height (px rowHeightPx)
+        backgroundColor Color.mossGreen
+        transition "width" (sec 0.3) ease (sec 0)
+        opacity (0.8)
 
-    hover & do
-      ".cell:first-child::before" ? width (px 5)
+      hover & do
+        ".cell:first-child::before" ? width (px 5)
 
-    nthChild "odd" & do
-      backgroundColor Color.wildSand
-    ".edition" & do
-      backgroundColor Color.negroni
-      ".delete" |> button ? visibility visible
+      nthChild "odd" & do
+        backgroundColor Color.wildSand
+      ".edition" & do
+        backgroundColor Color.negroni
+        ".delete" |> button ? visibility visible
 
-  ".cell" ? do
-    display tableCell
-    position relative
-    verticalAlign middle
-    ".category" & width (pct 40)
-    ".cost" & do
-      width (pct 17)
-      ".refund" & color Color.mossGreen
-    ".user" & width (pct 20)
-    ".date" & do
-      width (pct 20)
-      Media.mobileTablet $ do
-        ".shortDate" ? display inline
-        ".longDate" ? display none
-      Media.desktop $ do
-        ".shortDate" ? display none
-        ".longDate" ? display inline
-    ".delete" & do
+    ".cell" ? do
+      display tableCell
       position relative
-      width (pct 3)
-      textAlign (alignSide sideCenter)
-      button ? do
-        defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten
-        borderRadius (px 0) (px 0) (px 0) (px 0)
-        position absolute
-        top (px 0)
-        right (px 0)
-        width (pct 100)
-        visibility hidden
+      verticalAlign middle
+      ".category" & width (pct 40)
+      ".cost" & do
+        width (pct 17)
+        ".refund" & color Color.mossGreen
+      ".user" & width (pct 20)
+      ".date" & do
+        width (pct 20)
+        Media.mobileTablet $ do
+          ".shortDate" ? display inline
+          ".longDate" ? display none
+        Media.desktop $ do
+          ".shortDate" ? display none
+          ".longDate" ? display inline
+      ".delete" & do
+        position relative
+        width (pct 3)
+        textAlign (alignSide sideCenter)
+        button ? do
+          defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten
+          borderRadius (px 0) (px 0) (px 0) (px 0)
+          position absolute
+          top (px 0)
+          right (px 0)
+          width (pct 100)
+          visibility hidden