aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Global.hs97
1 files changed, 57 insertions, 40 deletions
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 7d2b7b6..10e997d 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -26,9 +26,15 @@ radius = px 3
blockPadding :: Size Abs
blockPadding = px 15
+blockPercentWidth :: Double
+blockPercentWidth = 90
+
blockMarginBottom :: Size Abs
blockMarginBottom = px 50
+rowHeight :: Size Abs
+rowHeight = px 60
+
global :: Css
global = do
@@ -38,24 +44,27 @@ global = do
fontFamily ["Cantarell"] [sansSerif]
header ? do
- let headerHeight = 150
+ let headerHeight = 80
+ let sidePercent = (pct ((100 - blockPercentWidth) / 2))
h1 ? do
fontSize (px 45)
- textAlign (alignSide sideCenter)
- color C.red
+ 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) + 5
+ let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
position absolute
top (px sideMargin)
- right (pct 2)
+ right sidePercent
height (px iconHeight)
lineHeight (px iconHeight)
- backgroundColor C.white
- color C.red
+ backgroundColor C.red
+ color C.white
fontSize iconFontSize
hover & transform (scale 1.2 1.2)
@@ -137,6 +146,11 @@ global = do
centeredWithMargin
clearFix
+ ".expand" ? do
+ position absolute
+ right blockPadding
+ bottom (px 2)
+
".monthlyPayments" ? do
marginBottom blockMarginBottom
@@ -144,40 +158,35 @@ global = do
float floatLeft
width (pct 55)
- button # ".count" ? do
- width (pct 100)
- fontSize (px 18)
+ ".count" ? do
defaultButton C.blue C.white inputHeight
- borderRadius radius radius radius radius
- textAlign (alignSide sideLeft)
- position relative
- paddingLeft blockPadding
- paddingRight blockPadding
-
- ".expand" ? do
- float floatRight
- marginTop (px (-2))
-
- ".detail" &
- button # ".count" ?
- borderRadius radius radius 0 0
-
- ".exceedingPayers" ? do
- backgroundColor C.green
- color C.white
- fontSize (px 18)
- borderRadius radius radius radius radius
+ buttonBlock
+ cursor cursorText
+
+ button # ".count" ? cursor pointer
+
+ ".account" ? do
marginBottom blockMarginBottom
- paddingLeft blockPadding
- paddingRight blockPadding
largeScreen $ do
float floatRight
width (pct 40)
- ".exceedingPayer" ? do
- lineHeight (px inputHeight)
- ".userName" ? marginRight (px 10)
+ ".exceedingPayers" ? do
+ defaultButton C.green C.white inputHeight
+ buttonBlock
+
+ ".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
".table" ? do
display D.table
@@ -187,11 +196,10 @@ global = do
".header" <> ".row" ? display tableRow
let headerHeight = (px 70)
- let rowHeight = (px 60)
".header" ? do
fontWeight bold
- backgroundColor C.red
+ backgroundColor C.blue
color C.white
fontSize iconFontSize
lineHeight headerHeight
@@ -261,7 +269,7 @@ global = do
form ? do
let inputHeight = 50
width (px 500)
- marginTop (px 50)
+ marginTop (px 100)
marginLeft auto
marginRight auto
@@ -296,7 +304,6 @@ defaultButton backgroundCol textCol pxHeight = do
borderRadius radius radius radius radius
verticalAlign middle
cursor pointer
- height (px pxHeight)
lineHeight (px pxHeight)
textAlign (alignSide sideCenter)
@@ -311,6 +318,16 @@ defaultInput inputHeight = do
centeredWithMargin :: Css
centeredWithMargin = do
- width (pct 90)
+ width (pct blockPercentWidth)
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