aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Dialog.hs13
-rw-r--r--src/server/Design/Form.hs24
-rw-r--r--src/server/Design/Global.hs2
-rw-r--r--src/server/Design/Helper.hs18
-rw-r--r--src/server/Design/LoggedIn.hs12
-rw-r--r--src/server/Design/LoggedIn/Home.hs8
-rw-r--r--src/server/Design/LoggedIn/Home/Add.hs87
-rw-r--r--src/server/Design/LoggedIn/Home/Header.hs56
-rw-r--r--src/server/Design/LoggedIn/Home/Monthly.hs23
-rw-r--r--src/server/Design/LoggedIn/Home/Search.hs31
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs123
11 files changed, 158 insertions, 239 deletions
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
new file mode 100644
index 0000000..f0b8009
--- /dev/null
+++ b/src/server/Design/Dialog.hs
@@ -0,0 +1,13 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Dialog
+ ( design
+ ) where
+
+import Clay
+
+design :: Css
+design = do
+
+ ".paymentDialog" ? do
+ ".radioGroup" ? ".title" ? display none
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 4bd1ad6..c2537f1 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -66,14 +66,18 @@ design = do
color Color.silver
marginBottom (em 0.8)
- ".radioElems" ? do
+ ".radioInputs" ? do
display flex
- "justify-content" -: "space-around"
-
- label ? do
- marginBottom (px 5)
- display block
- cursor pointer
- input ? do
- margin (px 0) (px 8) (px (-1)) (px 0)
- cursor pointer
+ "justify-content" -: "center"
+
+ ".radioInput:not(:last-child)::after" ? do
+ content (stringContent "/")
+ marginLeft (px 10)
+ marginRight (px 10)
+
+ input ? display none
+ label ? cursor pointer
+
+ "input:checked + label" ? do
+ color Color.chestnutRose
+ fontWeight bold
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 7d4a1bb..149769c 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Design.Header as Header
import qualified Design.SignIn as SignIn
import qualified Design.LoggedIn as LoggedIn
import qualified Design.Form as Form
+import qualified Design.Dialog as Dialog
import Design.Animation.Keyframes
@@ -28,6 +29,7 @@ global = do
header ? Header.design
".signIn" ? SignIn.design
".loggedIn" ? LoggedIn.design
+ ".dialog" ? Dialog.design
Form.design
allKeyframes
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index deb0aab..c8b3070 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,10 +3,9 @@
module Design.Helper
( clearFix
, defaultButton
- , iconButton
, defaultInput
+ , iconButton
, centeredWithMargin
- , expandBlock
, verticalCentering
) where
@@ -69,21 +68,6 @@ centeredWithMargin = do
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 focusLighten
- width (pct 100)
- fontSize (px 18)
- borderRadius radius radius radius radius
- textAlign (alignSide sideLeft)
- position relative
- paddingLeft blockPadding
- paddingRight (px 55)
-
verticalCentering :: Css
verticalCentering = do
position absolute
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 63ff413..5a3297a 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -8,15 +8,15 @@ import Data.Monoid ((<>))
import Clay
-import qualified Design.LoggedIn.Home as HomeDesign
-import qualified Design.LoggedIn.Income as IncomeDesign
-import qualified Design.LoggedIn.Stat as StatDesign
+import qualified Design.LoggedIn.Home as Home
+import qualified Design.LoggedIn.Income as Income
+import qualified Design.LoggedIn.Stat as Stat
design :: Css
design = do
- ".home" ? HomeDesign.design
- ".income" ? IncomeDesign.design
- ".stat" ? StatDesign.design
+ ".home" ? Home.design
+ ".income" ? Income.design
+ ".stat" ? Stat.design
(".income" <> ".stat") ? do
"margin" -: "0 2vw"
diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs
index 47bfc84..7845434 100644
--- a/src/server/Design/LoggedIn/Home.hs
+++ b/src/server/Design/LoggedIn/Home.hs
@@ -6,16 +6,12 @@ module Design.LoggedIn.Home
import Clay
-import qualified Design.LoggedIn.Home.Add as Add
-import qualified Design.LoggedIn.Home.Monthly as Monthly
-import qualified Design.LoggedIn.Home.Search as Search
+import qualified Design.LoggedIn.Home.Header as Header
import qualified Design.LoggedIn.Home.Table as Table
import qualified Design.LoggedIn.Home.Pages as Pages
design :: Css
design = do
- form # ".addPayment" ? Add.design
- ".monthly" ? Monthly.design
- ".search" ? Search.design
+ ".header" ? Header.design
".table" ? Table.design
".pages" ? Pages.design
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
deleted file mode 100644
index ce64077..0000000
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ /dev/null
@@ -1,87 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Add
- ( design
- ) where
-
-import Data.Monoid ((<>))
-
-import Clay
-
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
-
-design :: Css
-design = do
- centeredWithMargin
- 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 Color.dustyGray
- color Color.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 Color.silver
- hover & do
- input ? borderColor Color.silver
- label ? backgroundColor Color.silver
-
- ".name" ? minWidth (px 150)
-
- button # ".frequency" ? do
- fontSize (pct 90)
- marginRight (pct blockPercentMargin)
-
- (".punctual" <> ".monthly") ? do
- defaultButton Color.wildSand Color.dustyGray (px $ inputHeight `Prelude.div` 2) focusLighten
- paddingLeft (px 15)
- paddingRight (px 15)
- ".selected" & do
- backgroundColor Color.gothic
- color Color.white
-
- hover & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten Color.gothic)
-
- focus & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten Color.gothic)
-
- ".punctual" ? borderRadius radius radius 0 0
- ".monthly" ? borderRadius 0 0 radius radius
-
- button # ".add" ? do
- defaultButton Color.chestnutRose Color.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 Color.chestnutRose
- label ? backgroundColor Color.chestnutRose
- "input:focus + label" ? backgroundColor Color.chestnutRose
-
- ".errorMessage" ? do
- position absolute
- color Color.chestnutRose
- top (px (inputHeight + 10))
- left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs
new file mode 100644
index 0000000..9008a95
--- /dev/null
+++ b/src/server/Design/LoggedIn/Home/Header.hs
@@ -0,0 +1,56 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Home.Header
+ ( design
+ ) where
+
+import Clay
+
+import Design.Constants
+
+import qualified Design.Helper as Helper
+import qualified Design.Color as Color
+import qualified Design.Constants as Constants
+
+design :: Css
+design = do
+ marginBottom blockMarginBottom
+ marginLeft (pct blockPercentMargin)
+ marginRight (pct blockPercentMargin)
+
+ ".exceedingPayers" ? do
+ backgroundColor Color.mossGreen
+ padding (px 10) (px 10) (px 10) (px 10)
+ borderRadius (px 5) (px 5) (px 5) (px 5)
+ color Color.white
+ marginBottom (em 1)
+
+ ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+ ".userName" ? marginRight (px 5)
+
+ ".searchLine" ? do
+ marginBottom (em 1)
+ form ? do
+ display inlineBlock
+
+ ".textInput" ? do
+ display inlineBlock
+ marginRight (px 30)
+ marginBottom (px 0)
+
+ ".radioGroup" ? do
+ display inlineBlock
+ marginBottom (px 0)
+ ".title" ? display none
+
+ ".addPayment" ? do
+ Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten
+ float floatRight
+
+ ".infos" ? do
+ lineHeight (px Constants.inputHeight)
+
+ ".partition" ? do
+ color Color.dustyGray
+ marginLeft (px 15)
diff --git a/src/server/Design/LoggedIn/Home/Monthly.hs b/src/server/Design/LoggedIn/Home/Monthly.hs
deleted file mode 100644
index 5e976ef..0000000
--- a/src/server/Design/LoggedIn/Home/Monthly.hs
+++ /dev/null
@@ -1,23 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Monthly
- ( design
- ) where
-
-import Clay
-
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
-
-design :: Css
-design = do
-
- expandBlock Color.gothic Color.white (px inputHeight)
-
- ".expand" ? do
- position absolute
- right blockPadding
- bottom (px 0)
-
- ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Search.hs b/src/server/Design/LoggedIn/Home/Search.hs
deleted file mode 100644
index 726b4cf..0000000
--- a/src/server/Design/LoggedIn/Home/Search.hs
+++ /dev/null
@@ -1,31 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Search
- ( design
- ) where
-
-import Clay
-
-import Design.Constants
-
-import qualified Design.Helper as Helper
-import qualified Design.Color as Color
-import qualified Design.Constants as Constants
-
-design :: Css
-design = do
- marginBottom blockMarginBottom
- marginLeft (pct blockPercentMargin)
- marginRight (pct blockPercentMargin)
-
- ".textInput" ? do
- display inlineBlock
- marginRight (px 30)
- marginBottom (px 0)
-
- ".stat" ? do
- lineHeight (pct 100)
-
- ".addPayment" ? do
- Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
- float floatRight
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 538bc6d..a229132 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -16,70 +16,75 @@ import Design.Helper
design :: Css
design = do
- display D.table
- width (pct 100)
- textAlign (alignSide (sideCenter))
+ ".noPayment" ? do
+ margin (em 2) (em 2) (em 2) (em 2)
+ textAlign (alignSide sideCenter)
- ".header" <> ".row" ? display tableRow
- let headerHeight = (px 70)
+ ".lines" ? do
+ display D.table
+ width (pct 100)
+ textAlign (alignSide (sideCenter))
- ".header" ? do
- fontWeight bold
- backgroundColor Color.gothic
- color Color.white
- fontSize iconFontSize
- height headerHeight
+ ".header" <> ".row" ? display tableRow
+ let headerHeight = (px 70)
- ".row" ? do
- fontSize (px 18)
- height (px rowHeightPx)
- ".cell:first-child::before" ? do
- display block
- content (stringContent "")
- position absolute
- top (px 0)
- left (px 0)
- width (px 0)
+ ".header" ? do
+ fontWeight bold
+ backgroundColor Color.gothic
+ color Color.white
+ fontSize (px 18)
+ height headerHeight
+
+ ".row" ? do
+ fontSize (px 18)
height (px rowHeightPx)
- backgroundColor Color.mossGreen
- transition "width" (sec 0.3) ease (sec 0)
- opacity (0.8)
+ ".cell:first-child::before" ? do
+ display block
+ content (stringContent "")
+ position absolute
+ top (px 0)
+ left (px 0)
+ width (px 0)
+ height (px rowHeightPx)
+ backgroundColor Color.mossGreen
+ transition "width" (sec 0.3) ease (sec 0)
+ opacity (0.8)
- hover & do
- ".cell:first-child::before" ? width (px 5)
+ hover & do
+ ".cell:first-child::before" ? width (px 5)
- nthChild "odd" & do
- backgroundColor Color.wildSand
- ".edition" & do
- backgroundColor Color.negroni
- ".delete" |> button ? visibility visible
+ nthChild "odd" & do
+ backgroundColor Color.wildSand
+ ".edition" & do
+ backgroundColor Color.negroni
+ ".delete" |> button ? visibility visible
- ".cell" ? do
- display tableCell
- position relative
- verticalAlign middle
- ".category" & width (pct 40)
- ".cost" & do
- width (pct 17)
- ".refund" & color Color.mossGreen
- ".user" & width (pct 20)
- ".date" & do
- width (pct 20)
- Media.mobileTablet $ do
- ".shortDate" ? display inline
- ".longDate" ? display none
- Media.desktop $ do
- ".shortDate" ? display none
- ".longDate" ? display inline
- ".delete" & do
+ ".cell" ? do
+ display tableCell
position relative
- width (pct 3)
- textAlign (alignSide sideCenter)
- button ? do
- defaultButton Color.chestnutRose Color.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
+ verticalAlign middle
+ ".category" & width (pct 40)
+ ".cost" & do
+ width (pct 17)
+ ".refund" & color Color.mossGreen
+ ".user" & width (pct 20)
+ ".date" & do
+ width (pct 20)
+ Media.mobileTablet $ do
+ ".shortDate" ? display inline
+ ".longDate" ? display none
+ Media.desktop $ do
+ ".shortDate" ? display none
+ ".longDate" ? display inline
+ ".delete" & do
+ position relative
+ width (pct 3)
+ textAlign (alignSide sideCenter)
+ button ? do
+ defaultButton Color.chestnutRose Color.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