From e56aaedad92f8585a70277edce8ed8ad065d681c Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 13 Sep 2015 10:27:47 +0200 Subject: Using flexbox for the add payment form --- src/server/Design/Global.hs | 108 +++++++++++++++++--------------------------- 1 file changed, 42 insertions(+), 66 deletions(-) (limited to 'src/server/Design') 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) -- cgit v1.2.3