Splitting Global design file into a hierarchy of files

4 files changed, 222 insertions, 0 deletions

diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
new file mode 100644
index 0000000..6d4de69
--- /dev/null
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -0,0 +1,78 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Add
+  ( addDesign
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+addDesign :: Css
+addDesign =
+
+  form ? 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 40)
+        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
+
+    ".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)
+        paddingLeft (px 15)
+        paddingRight (px 15)
+        ".selected" & do
+          backgroundColor C.blue
+          color C.white
+
+      ".punctual" ? borderRadius radius radius 0 0
+      ".monthly" ? borderRadius 0 0 radius radius
+
+    button # ".add" ? do
+      defaultButton C.red C.white (px inputHeight)
+      paddingLeft (px 15)
+      paddingRight (px 15)
+
+    ".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/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
new file mode 100644
index 0000000..3807da4
--- /dev/null
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -0,0 +1,37 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Expandables
+  ( expandablesDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+expandablesDesign :: Css
+expandablesDesign =
+
+  ".expandables" ? 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)
+
+      ".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" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs
new file mode 100644
index 0000000..c42e9f3
--- /dev/null
+++ b/src/server/Design/LoggedIn/Pages.hs
@@ -0,0 +1,39 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Pages
+  ( pagesDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+pagesDesign :: Css
+pagesDesign =
+
+  ".pages" ? do
+    padding (px 30) (px 30) (px 30) (px 30)
+    textAlign (alignSide (sideCenter))
+    clearFix
+
+    ".page" ? do
+      display inlineBlock
+      border solid (px 2) C.darkGrey
+      color C.darkGrey
+      borderRadius radius radius radius radius
+      marginRight (px 10)
+      let h = 50
+      paddingLeft (px 10)
+      paddingRight (px 10)
+      height (px h)
+      lineHeight (px h)
+      textAlign (alignSide (sideCenter))
+      fontWeight bold
+
+      ":not(.current)" & cursor pointer
+
+      ".current" & do
+        borderColor C.red
+        color C.red
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
new file mode 100644
index 0000000..2876fa1
--- /dev/null
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -0,0 +1,68 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Table
+  ( tableDesign
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import qualified Clay.Display as D
+
+import Design.Color as C
+import Design.Media
+import Design.Constants
+
+tableDesign :: Css
+tableDesign =
+
+  ".table" ? 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 20)
+      cursor pointer
+      lineHeight rowHeight
+      nthChild "odd" & backgroundColor C.lightGrey
+      ".edition" & do
+        backgroundColor C.paymentFocus
+        ".delete" ? visibility visible
+
+    ".cell" ? do
+      display tableCell
+      ".category" & width (pct 40)
+      ".cost" & do
+        width (pct 17)
+        ".refund" & color C.greenSuccess
+      ".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
+        width (pct 3)
+        height rowHeight
+        textAlign (alignSide sideCenter)
+        backgroundColor C.red
+        visibility hidden
+        button ? do
+          width (pct 100)
+          height (pct 100)
+          color C.white