Splitting Global design file into a hierarchy of files

1 files changed, 6 insertions, 285 deletions

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