aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Constants.hs27
-rw-r--r--src/server/Design/Global.hs291
-rw-r--r--src/server/Design/Header.hs39
-rw-r--r--src/server/Design/Helper.hs62
-rw-r--r--src/server/Design/LoggedIn.hs29
-rw-r--r--src/server/Design/LoggedIn/Add.hs78
-rw-r--r--src/server/Design/LoggedIn/Expandables.hs37
-rw-r--r--src/server/Design/LoggedIn/Pages.hs39
-rw-r--r--src/server/Design/LoggedIn/Table.hs68
-rw-r--r--src/server/Design/SignIn.hs39
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 01:10:08 +0000