aboutsummaryrefslogtreecommitdiff
path: root/src/server
diff options
context:
space:
mode:
Diffstat (limited to 'src/server')
-rw-r--r--src/server/Design/Color.hs5
-rw-r--r--src/server/Design/Constants.hs10
-rw-r--r--src/server/Design/Global.hs2
-rw-r--r--src/server/Design/Header.hs3
-rw-r--r--src/server/Design/Helper.hs20
-rw-r--r--src/server/Design/LoggedIn/Add.hs13
-rw-r--r--src/server/Design/LoggedIn/Expandables.hs9
-rw-r--r--src/server/Design/LoggedIn/Pages.hs7
-rw-r--r--src/server/Design/LoggedIn/Table.hs52
-rw-r--r--src/server/Design/SignIn.hs4
-rw-r--r--src/server/Model/Message/Translations.hs4
11 files changed, 86 insertions, 43 deletions
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index adbe50f..126a231 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,9 +5,6 @@ import qualified Clay.Color as C
white :: C.Color
white = C.white
-greenSuccess :: C.Color
-greenSuccess = C.green
-
redError :: C.Color
redError = C.red
@@ -15,7 +12,7 @@ red :: C.Color
red = C.rgb 207 92 86
green :: C.Color
-green = C.rgb 169 220 175
+green = C.rgb 159 210 165
blue :: C.Color
blue = C.rgb 108 162 164
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 6c4ab90..94df14b 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -20,8 +20,14 @@ blockPercentMargin = (100 - blockPercentWidth) / 2
blockMarginBottom :: Size Abs
blockMarginBottom = px 50
-rowHeight :: Size Abs
-rowHeight = px 60
+rowHeightPx :: Integer
+rowHeightPx = 60
inputHeight :: Integer
inputHeight = 40
+
+focusLighten :: Color -> Color
+focusLighten color = color +. 20
+
+focusDarken :: Color -> Color
+focusDarken color = color -. 20
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 9f5a4fc..c41d06f 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -24,6 +24,8 @@ global = do
minWidth (px 550)
fontFamily ["Cantarell"] [sansSerif]
+ a ? cursor pointer
+
allKeyframes
signInDesign
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 5ef3fb0..a45a7b2 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -6,8 +6,6 @@ module Design.Header
import Clay
-import Data.Monoid ((<>))
-
import Design.Color as C
import Design.Constants
@@ -39,3 +37,4 @@ headerDesign =
color C.white
fontSize iconFontSize
hover & i ? transform (scale 1.2 1.2)
+ focus & i ? transform (scale 1.2 1.2)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 40218f8..f4c19fa 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -27,19 +27,22 @@ clearFix =
display D.table
clear both
-defaultButton :: Color -> Color -> Size Abs -> Css
-defaultButton backgroundCol textCol h = do
+defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
+defaultButton backgroundCol textCol h focusOp = do
backgroundColor backgroundCol
color textCol
borderRadius radius radius radius radius
verticalAlign middle
cursor pointer
lineHeight h
+ height h
textAlign (alignSide sideCenter)
+ hover & backgroundColor (focusOp backgroundCol)
+ focus & backgroundColor (focusOp backgroundCol)
-iconButton :: Color -> Color -> Size Abs -> Css
-iconButton backgroundCol textCol h = do
- defaultButton backgroundCol textCol h
+iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
+iconButton backgroundCol textCol h focusOp = do
+ defaultButton backgroundCol textCol h focusOp
i <> span ? do
height h
lineHeight h
@@ -49,11 +52,10 @@ iconButton backgroundCol textCol h = do
i ? do
marginLeft (px 15)
marginRight (px 20)
- hover & i ? transform (scale 1.2 1.2)
defaultInput :: Integer -> Css
-defaultInput inputHeight = do
- height (px inputHeight)
+defaultInput h = do
+ height (px h)
padding (px 10) (px 10) (px 10) (px 10)
borderRadius radius radius radius radius
border solid (px 1) C.darkGrey
@@ -72,7 +74,7 @@ expandBlock headerBackground headerColor headerHeight = do
marginLeft (pct blockPercentMargin)
marginRight (pct blockPercentMargin)
".header" ? do
- defaultButton headerBackground headerColor headerHeight
+ defaultButton headerBackground headerColor headerHeight focusLighten
width (pct 100)
fontSize (px 18)
borderRadius radius radius radius radius
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
index 3bdfb65..ef0603c 100644
--- a/src/server/Design/LoggedIn/Add.hs
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -43,6 +43,9 @@ addDesign =
borderRadius radius (px 0) (px 0) radius
"width" -: "calc(100% - 40px)"
"input:focus + label" ? backgroundColor C.grey
+ hover & do
+ input ? borderColor C.grey
+ label ? backgroundColor C.grey
".name" ? minWidth (px 150)
@@ -51,18 +54,24 @@ addDesign =
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
- defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
+ defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
backgroundColor C.blue
color C.white
+ hover & (".punctual" <> ".monthly") ?
+ ".selected" & backgroundColor (focusLighten C.blue)
+
+ focus & (".punctual" <> ".monthly") ?
+ ".selected" & backgroundColor (focusLighten C.blue)
+
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
- defaultButton C.red C.white (px inputHeight)
+ defaultButton C.red C.white (px inputHeight) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
i ? marginLeft (px 10)
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
index 66a9b06..8ef42cd 100644
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -22,7 +22,8 @@ expandablesDesign =
right blockPadding
bottom (px 2)
- ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+ ".monthlyPayments" ? do
+ expandBlock C.blue C.white (px inputHeight)
".account" ? do
expandBlock C.green C.white (px inputHeight)
@@ -35,7 +36,7 @@ expandablesDesign =
backgroundColor C.lightGrey
padding (px 0) (px 20) (px 0) (px 20)
position relative
- lineHeight rowHeight
+ lineHeight (px rowHeightPx)
input ? do
defaultInput inputHeight
@@ -50,10 +51,10 @@ expandablesDesign =
marginTop (px (-5))
".validateIncomeEdition" <> ".editIncomeEdition" ?
- defaultButton C.red C.white (px inputHeight)
+ defaultButton C.red C.white (px inputHeight) focusLighten
".undoIncomeEdition" ?
- defaultButton C.blue C.white (px inputHeight)
+ defaultButton C.blue C.white (px inputHeight) focusLighten
".error" ? do
color C.redError
diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs
index c42e9f3..f7946b8 100644
--- a/src/server/Design/LoggedIn/Pages.hs
+++ b/src/server/Design/LoggedIn/Pages.hs
@@ -19,17 +19,12 @@ pagesDesign =
clearFix
".page" ? do
+ defaultButton C.white C.darkGrey (px 50) focusDarken
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
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
index 2876fa1..d9fc318 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -12,6 +12,7 @@ import qualified Clay.Display as D
import Design.Color as C
import Design.Media
import Design.Constants
+import Design.Helper
tableDesign :: Css
tableDesign =
@@ -33,20 +34,48 @@ tableDesign =
lineHeight headerHeight
".row" ? do
- fontSize (px 20)
- cursor pointer
- lineHeight rowHeight
- nthChild "odd" & backgroundColor C.lightGrey
+ fontSize (px 18)
+ lineHeight (px rowHeightPx)
+
+ hover & do
+ let (borderW, triangleW, triangleH) = (4, 6, 8)
+ ".cell:first-child::before" ? do
+ display block
+ content (stringContent "")
+ position absolute
+ top (px 0)
+ left (px 0)
+
+ width (px borderW)
+ height (px rowHeightPx)
+ backgroundColor C.green
+
+ ".cell:first-child::after" ? do
+ display block
+ content (stringContent "")
+ position absolute
+ top (px (rowHeightPx `Prelude.div` 2 - triangleH))
+ left (px borderW)
+
+ width (px 0)
+ height (px 0)
+ borderTop solid (px triangleH) transparent
+ borderBottom solid (px triangleH) transparent
+ borderLeft solid (px triangleW) C.green
+
+ nthChild "odd" & do
+ backgroundColor C.lightGrey
".edition" & do
backgroundColor C.paymentFocus
- ".delete" ? visibility visible
+ ".delete" |> button ? visibility visible
".cell" ? do
display tableCell
+ position relative
".category" & width (pct 40)
".cost" & do
width (pct 17)
- ".refund" & color C.greenSuccess
+ ".refund" & color C.green
".user" & width (pct 20)
".date" & do
width (pct 20)
@@ -57,12 +86,13 @@ tableDesign =
".shortDate" ? display none
".longDate" ? display inline
".delete" & do
+ position relative
width (pct 3)
- height rowHeight
textAlign (alignSide sideCenter)
- backgroundColor C.red
- visibility hidden
button ? do
+ defaultButton C.red C.white (px rowHeightPx) focusLighten
+ position absolute
+ top (px 0)
+ right (px 0)
width (pct 100)
- height (pct 100)
- color C.white
+ visibility hidden
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index a90832e..a565ee4 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -8,6 +8,7 @@ import Clay
import Design.Color as C
import Design.Helper
+import Design.Constants
signInDesign :: Css
signInDesign =
@@ -17,9 +18,10 @@ signInDesign =
button ? do
display block
margin (em 5) auto (em 2) auto
- iconButton C.blue C.white (em 2.5)
+ iconButton C.blue C.white (em 2.5) focusLighten
fontSize (em 1.5)
position relative
+ ".waitingServer" & ("cursor" -: "not-allowed")
".error" ? do
textAlign (alignSide sideCenter)
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 2212e1a..7ca6483 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -191,8 +191,8 @@ m l PluralMonthlyCount =
m l Income =
T.concat
[ case l of
- English -> "You have a monthly net income of {1}"
- French -> "Votre revenu mensuel net est de {1}"
+ English -> "Monthly net income: {1}"
+ French -> "Revenu mensuel net : {1}"
]
m l NoIncome =
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 05:27:28 +0000