Ameliore design in income page and stat page

4 files changed, 243 insertions, 0 deletions

diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
new file mode 100644
index 0000000..7613ba3
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -0,0 +1,87 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Add
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+  centeredWithMargin
+  marginBottom blockMarginBottom
+  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 C.darkGrey
+      color C.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 C.grey
+    hover & do
+      input ? borderColor C.grey
+      label ? backgroundColor C.grey
+
+  ".name" ? minWidth (px 150)
+
+  button # ".frequency" ? do
+    fontSize (pct 90)
+    marginRight (pct blockPercentMargin)
+
+    (".punctual" <> ".monthly") ? do
+      defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+      paddingLeft (px 15)
+      paddingRight (px 15)
+      ".selected" & do
+        backgroundColor C.blue
+        color C.white
+
+    hover & (".punctual" <> ".monthly") ?
+      ".selected" & backgroundColor (focusLighten C.blue)
+
+    focus & (".punctual" <> ".monthly") ?
+      ".selected" & backgroundColor (focusLighten C.blue)
+
+    ".punctual" ? borderRadius radius radius 0 0
+    ".monthly" ? borderRadius 0 0 radius radius
+
+  button # ".add" ? do
+    defaultButton C.red C.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 C.redError
+    label ? backgroundColor C.redError
+    "input:focus + label" ? backgroundColor C.redError
+
+  ".errorMessage" ? do
+    position absolute
+    color C.redError
+    top (px (inputHeight + 10))
+    left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
new file mode 100644
index 0000000..5ba5711
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -0,0 +1,27 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Expandables
+  ( design
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+
+  ".expand" ? do
+    position absolute
+    right blockPadding
+    bottom (px 2)
+
+  ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+
+  ".account" ? do
+    expandBlock C.green C.white (px inputHeight)
+    ".userName" ? marginRight (px 10)
+
+  ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
new file mode 100644
index 0000000..932865c
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -0,0 +1,32 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Pages
+  ( design
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+design :: Css
+design = do
+  padding (px 30) (px 30) (px 30) (px 30)
+  textAlign (alignSide (sideCenter))
+  clearFix
+
+  ".page" ? do
+    defaultButton C.white C.darkGrey (px 50) focusDarken
+    display inlineBlock
+    border solid (px 2) C.darkGrey
+    marginRight (px 10)
+    paddingLeft (px 10)
+    paddingRight (px 10)
+    fontWeight bold
+
+    ":not(.current)" & cursor pointer
+
+    ".current" & do
+      borderColor C.red
+      color C.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
new file mode 100644
index 0000000..58ffb33
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -0,0 +1,97 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Table
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import qualified Clay.Display as D
+
+import Design.Color as C
+import Design.Media
+import Design.Constants
+import Design.Helper
+
+design :: Css
+design = do
+  display D.table
+  width (pct 100)
+  textAlign (alignSide (sideCenter))
+  "border-spacing" -: "10 px"
+
+  ".header" <> ".row" ? display tableRow
+  let headerHeight = (px 70)
+
+  ".header" ? do
+    fontWeight bold
+    backgroundColor C.blue
+    color C.white
+    fontSize iconFontSize
+    lineHeight headerHeight
+
+  ".row" ? do
+    fontSize (px 18)
+    lineHeight (px rowHeightPx)
+
+    hover & do
+      let (borderW, triangleW, triangleH) = (4, 6, 8)
+      ".cell:first-child::before" ? do
+        display block
+        content (stringContent "")
+        position absolute
+        top (px 0)
+        left (px 0)
+
+        width (px borderW)
+        height (px rowHeightPx)
+        backgroundColor C.green
+
+      ".cell:first-child::after" ? do
+        display block
+        content (stringContent "")
+        position absolute
+        top (px (rowHeightPx `Prelude.div` 2 - triangleH))
+        left (px borderW)
+
+        width (px 0)
+        height (px 0)
+        borderTop solid (px triangleH) transparent
+        borderBottom solid (px triangleH) transparent
+        borderLeft solid (px triangleW) C.green
+
+    nthChild "odd" & do
+      backgroundColor C.lightGrey
+    ".edition" & do
+      backgroundColor C.paymentFocus
+      ".delete" |> button ? visibility visible
+
+  ".cell" ? do
+    display tableCell
+    position relative
+    ".category" & width (pct 40)
+    ".cost" & do
+      width (pct 17)
+      ".refund" & color C.green
+    ".user" & width (pct 20)
+    ".date" & do
+      width (pct 20)
+      smallScreen $ do
+        ".shortDate" ? display inline
+        ".longDate" ? display none
+      largeScreen $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+    ".delete" & do
+      position relative
+      width (pct 3)
+      textAlign (alignSide sideCenter)
+      button ? do
+        defaultButton C.red C.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