aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Global.hs108
1 files changed, 42 insertions, 66 deletions
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 10e997d..951bb09 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -29,6 +29,9 @@ blockPadding = px 15
blockPercentWidth :: Double
blockPercentWidth = 90
+blockPercentMargin :: Double
+blockPercentMargin = (100 - blockPercentWidth) / 2
+
blockMarginBottom :: Size Abs
blockMarginBottom = px 50
@@ -45,7 +48,7 @@ global = do
header ? do
let headerHeight = 80
- let sidePercent = (pct ((100 - blockPercentWidth) / 2))
+ let sidePercent = (pct blockPercentMargin)
h1 ? do
fontSize (px 45)
@@ -74,15 +77,17 @@ global = do
form ? do
centeredWithMargin
marginBottom blockMarginBottom
- clearFix
+ display flex
+ "justify-content" -: "center"
".name" <> ".cost" ? do
position relative
- width (pct 49)
+ display flex
+ marginRight (pct blockPercentMargin)
label ? do
fontWeight bold
display inlineBlock
- width (px 60)
+ width (px 40)
textAlign (alignSide sideCenter)
backgroundColor C.darkGrey
color C.white
@@ -95,30 +100,19 @@ global = do
input ? do
defaultInput inputHeight
borderRadius radius (px 0) (px 0) radius
+ "width" -: "calc(100% - 40px)"
"input:focus + label" ? backgroundColor C.grey
- ".name" ? do
- float floatLeft
- width (pct 40)
- input ? width (pct 75)
- label ? width (pct 20)
- paddingRight (pct 5)
-
- ".cost" ? do
- float floatLeft
- width (pct 25)
- input ? width (pct 65)
- label ? width (pct 30)
- paddingRight (pct 5)
+ ".name" ? minWidth (px 150)
button # ".frequency" ? do
fontSize (pct 90)
- float floatLeft
- width (pct 15)
- marginRight (pct 5)
+ marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
- defaultButton C.lightGrey C.darkGrey (inputHeight `Prelude.div` 2)
+ defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
+ paddingLeft (px 15)
+ paddingRight (px 15)
".selected" & do
backgroundColor C.blue
color C.white
@@ -127,9 +121,9 @@ global = do
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
- defaultButton C.red C.white inputHeight
- float floatLeft
- width (pct 15)
+ defaultButton C.red C.white (px inputHeight)
+ paddingLeft (px 15)
+ paddingRight (px 15)
".name.error" <> ".cost.error" ? do
input ? borderColor C.redError
@@ -143,50 +137,27 @@ global = do
left (px 0)
".expandables" ? do
- centeredWithMargin
- clearFix
".expand" ? do
position absolute
right blockPadding
bottom (px 2)
- ".monthlyPayments" ? do
- marginBottom blockMarginBottom
-
- largeScreen $ do
- float floatLeft
- width (pct 55)
-
- ".count" ? do
- defaultButton C.blue C.white inputHeight
- buttonBlock
- cursor cursorText
-
- button # ".count" ? cursor pointer
+ ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
".account" ? do
- marginBottom blockMarginBottom
-
- largeScreen $ do
- float floatRight
- width (pct 40)
-
- ".exceedingPayers" ? do
- defaultButton C.green C.white inputHeight
- buttonBlock
+ expandBlock C.green C.white (px inputHeight)
- ".exceedingPayer" ? do
- lineHeight (px inputHeight)
- ".userName" ? marginRight (px 10)
+ ".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" |> (".count" <> ".exceedingPayers") ?
- borderRadius radius radius 0 0
+ ".detail" |> ".header" ? borderRadius radius radius 0 0
".table" ? do
display D.table
@@ -280,7 +251,7 @@ global = do
marginBottom (px 10)
button ? do
- defaultButton C.red C.white inputHeight
+ defaultButton C.red C.white (px inputHeight)
display block
width (pct 100)
@@ -297,14 +268,14 @@ clearFix =
display D.table
clear both
-defaultButton :: Color -> Color -> Integer -> Css
-defaultButton backgroundCol textCol pxHeight = do
+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 (px pxHeight)
+ lineHeight height
textAlign (alignSide sideCenter)
defaultInput :: Integer -> Css
@@ -322,12 +293,17 @@ centeredWithMargin = do
marginLeft auto
marginRight auto
-buttonBlock :: Css
-buttonBlock = do
- width (pct 100)
- fontSize (px 18)
- borderRadius radius radius radius radius
- textAlign (alignSide sideLeft)
- position relative
- paddingLeft blockPadding
- paddingRight blockPadding
+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)