Splitting Global design file into a hierarchy of files

10 files changed, 424 insertions, 285 deletions

diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
new file mode 100644
index 0000000..6c4ab90
--- /dev/null
+++ b/src/server/Design/Constants.hs
@@ -0,0 +1,27 @@
+module Design.Constants where
+
+import Clay
+
+iconFontSize :: Size Abs
+iconFontSize = px 32
+
+radius :: Size Abs
+radius = px 3
+
+blockPadding :: Size Abs
+blockPadding = px 15
+
+blockPercentWidth :: Double
+blockPercentWidth = 90
+
+blockPercentMargin :: Double
+blockPercentMargin = (100 - blockPercentWidth) / 2
+
+blockMarginBottom :: Size Abs
+blockMarginBottom = px 50
+
+rowHeight :: Size Abs
+rowHeight = px 60
+
+inputHeight :: Integer
+inputHeight = 40
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 951bb09..092e66e 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -4,40 +4,17 @@ module Design.Global
   ( globalDesign
   ) where
 
-import Data.Monoid ((<>))
-
 import Clay
-import qualified Clay.Display as D
 
 import Data.Text.Lazy (Text)
 
-import Design.Color as C
-import Design.Media
+import Design.Header
+import Design.SignIn
+import Design.LoggedIn
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
 
-iconFontSize :: Size Abs
-iconFontSize = px 32
-
-radius :: Size Abs
-radius = px 3
-
-blockPadding :: Size Abs
-blockPadding = px 15
-
-blockPercentWidth :: Double
-blockPercentWidth = 90
-
-blockPercentMargin :: Double
-blockPercentMargin = (100 - blockPercentWidth) / 2
-
-blockMarginBottom :: Size Abs
-blockMarginBottom = px 50
-
-rowHeight :: Size Abs
-rowHeight = px 60
-
 global :: Css
 global = do
 
@@ -46,264 +23,8 @@ global = do
     minWidth (px 550)
     fontFamily ["Cantarell"] [sansSerif]
 
-  header ? do
-    let headerHeight = 80
-    let sidePercent = (pct blockPercentMargin)
-
-    h1 ? do
-      fontSize (px 45)
-      textAlign (alignSide sideLeft)
-      backgroundColor C.red
-      color C.white
-      lineHeight (px headerHeight)
-      marginBottom blockMarginBottom
-      paddingLeft sidePercent
-    button # ".signOut" ? do
-      let iconHeight = 50
-      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
-      position absolute
-      top (px sideMargin)
-      right sidePercent
-      height (px iconHeight)
-      lineHeight (px iconHeight)
-      backgroundColor C.red
-      color C.white
-      fontSize iconFontSize
-      hover & transform (scale 1.2 1.2)
-
-  ".loggedIn" ? do
-    let inputHeight = 40
-
-    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)
-
-    ".expandables" ? do
-
-      ".expand" ? do
-        position absolute
-        right blockPadding
-        bottom (px 2)
-
-      ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+  signInDesign
 
-      ".account" ? do
-        expandBlock C.green C.white (px inputHeight)
+  headerDesign
 
-        ".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
-
-    ".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
-
-    ".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
-
-  ".signIn" ? do
-
-    form ? do
-      let inputHeight = 50
-      width (px 500)
-      marginTop (px 100)
-      marginLeft auto
-      marginRight auto
-
-      input ? do
-        defaultInput inputHeight
-        display block
-        width (pct 100)
-        marginBottom (px 10)
-
-      button ? do
-        defaultButton C.red C.white (px inputHeight)
-        display block
-        width (pct 100)
-
-    ".result" ? do
-      marginTop (px 40)
-      textAlign (alignSide sideCenter)
-      ".success" ? color C.greenSuccess
-      ".error" ? color C.redError
-
-clearFix :: Css
-clearFix =
-  after & do
-    content (stringContent "")
-    display D.table
-    clear both
-
-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 height
-  textAlign (alignSide sideCenter)
-
-defaultInput :: Integer -> Css
-defaultInput inputHeight = do
-  height (px inputHeight)
-  padding (px 10) (px 10) (px 10) (px 10)
-  borderRadius radius radius radius radius
-  border solid (px 1) C.darkGrey
-  focus & borderColor C.grey
-  verticalAlign middle
-
-centeredWithMargin :: Css
-centeredWithMargin = do
-  width (pct blockPercentWidth)
-  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
-    width (pct 100)
-    fontSize (px 18)
-    borderRadius radius radius radius radius
-    textAlign (alignSide sideLeft)
-    position relative
-    paddingLeft blockPadding
-    paddingRight (px 55)
+  loggedInDesign
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
new file mode 100644
index 0000000..7b82577
--- /dev/null
+++ b/src/server/Design/Header.hs
@@ -0,0 +1,39 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Header
+  ( headerDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Constants
+
+headerDesign :: Css
+headerDesign =
+
+  header ? do
+    let headerHeight = 80
+    let sidePercent = (pct blockPercentMargin)
+
+    h1 ? do
+      fontSize (px 45)
+      textAlign (alignSide sideLeft)
+      backgroundColor C.red
+      color C.white
+      lineHeight (px headerHeight)
+      marginBottom blockMarginBottom
+      paddingLeft sidePercent
+
+    button # ".signOut" ? do
+      let iconHeight = 50
+      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+      position absolute
+      top (px sideMargin)
+      right sidePercent
+      height (px iconHeight)
+      lineHeight (px iconHeight)
+      backgroundColor C.red
+      color C.white
+      fontSize iconFontSize
+      hover & transform (scale 1.2 1.2)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
new file mode 100644
index 0000000..53839c1
--- /dev/null
+++ b/src/server/Design/Helper.hs
@@ -0,0 +1,62 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Helper
+  ( clearFix
+  , defaultButton
+  , defaultInput
+  , centeredWithMargin
+  , expandBlock
+  ) where
+
+import Clay
+
+import Design.Constants
+import Design.Color as C
+import qualified Clay.Display as D
+
+clearFix :: Css
+clearFix =
+  after & do
+    content (stringContent "")
+    display D.table
+    clear both
+
+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 height
+  textAlign (alignSide sideCenter)
+
+defaultInput :: Integer -> Css
+defaultInput inputHeight = do
+  height (px inputHeight)
+  padding (px 10) (px 10) (px 10) (px 10)
+  borderRadius radius radius radius radius
+  border solid (px 1) C.darkGrey
+  focus & borderColor C.grey
+  verticalAlign middle
+
+centeredWithMargin :: Css
+centeredWithMargin = do
+  width (pct blockPercentWidth)
+  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
+    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/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
new file mode 100644
index 0000000..6bfa034
--- /dev/null
+++ b/src/server/Design/LoggedIn.hs
@@ -0,0 +1,29 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn
+  ( loggedInDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+import Design.Constants
+
+import Design.LoggedIn.Add
+import Design.LoggedIn.Expandables
+import Design.LoggedIn.Table
+import Design.LoggedIn.Pages
+
+loggedInDesign :: Css
+loggedInDesign =
+
+  ".loggedIn" ? do
+
+    addDesign
+
+    expandablesDesign
+
+    tableDesign
+
+    pagesDesign
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
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
new file mode 100644
index 0000000..2350c54
--- /dev/null
+++ b/src/server/Design/SignIn.hs
@@ -0,0 +1,39 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.SignIn
+  ( signInDesign
+  ) where
+
+import Clay
+
+import Design.Color as C
+import Design.Helper
+
+signInDesign :: Css
+signInDesign =
+
+  ".signIn" ? do
+
+    form ? do
+      let inputHeight = 50
+      width (px 500)
+      marginTop (px 100)
+      marginLeft auto
+      marginRight auto
+
+      input ? do
+        defaultInput inputHeight
+        display block
+        width (pct 100)
+        marginBottom (px 10)
+
+      button ? do
+        defaultButton C.red C.white (px inputHeight)
+        display block
+        width (pct 100)
+
+    ".result" ? do
+      marginTop (px 40)
+      textAlign (alignSide sideCenter)
+      ".success" ? color C.greenSuccess
+      ".error" ? color C.redError