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/client/View/LoggedIn.elm | 4 +- src/client/View/LoggedIn/Account.elm | 2 +- src/client/View/LoggedIn/Monthly.elm | 20 ++---- src/server/Design/Global.hs | 108 ++++++++++++------------------- src/server/Model/Message/Key.hs | 1 - src/server/Model/Message/Translations.hs | 5 -- 6 files changed, 52 insertions(+), 88 deletions(-) (limited to 'src') diff --git a/src/client/View/LoggedIn.elm b/src/client/View/LoggedIn.elm index 20c99d3..96916e0 100644 --- a/src/client/View/LoggedIn.elm +++ b/src/client/View/LoggedIn.elm @@ -22,8 +22,8 @@ renderLoggedIn model loggedInView = [ addPayment model loggedInView , div [ class "expandables" ] - [ monthlyPayments model loggedInView - , account model loggedInView + [ account model loggedInView + , monthlyPayments model loggedInView ] , paymentsTable model loggedInView , paymentsPaging loggedInView diff --git a/src/client/View/LoggedIn/Account.elm b/src/client/View/LoggedIn/Account.elm index e2b8e7e..88f39c3 100644 --- a/src/client/View/LoggedIn/Account.elm +++ b/src/client/View/LoggedIn/Account.elm @@ -39,7 +39,7 @@ account model loggedInView = exceedingPayers : Model -> LoggedInView -> Html exceedingPayers model loggedInView = button - [ class "exceedingPayers" + [ class "header" , onClick actions.address (UpdateLoggedIn << UpdateAccount <| ToggleDetail) ] ( (List.map (exceedingPayer model loggedInView) (getOrderedExceedingPayers loggedInView.account.payers)) diff --git a/src/client/View/LoggedIn/Monthly.elm b/src/client/View/LoggedIn/Monthly.elm index 518724b..9195479 100644 --- a/src/client/View/LoggedIn/Monthly.elm +++ b/src/client/View/LoggedIn/Monthly.elm @@ -42,19 +42,13 @@ monthlyCount model monthly = let count = List.length monthly.payments total = List.sum << List.map .cost <| monthly.payments key = if count > 1 then "PluralMonthlyCount" else "SingularMonthlyCount" - in if count == 0 - then - div - [ class "count" ] - [ text (getMessage "NoMonthlyPayment" model.translations) ] - else - button - [ class "count" - , onClick actions.address (UpdateLoggedIn << UpdateMonthly <| ToggleDetail) - ] - [ text (getParamMessage [toString count, price model total] key model.translations) - , expand ExpandDown monthly.visibleDetail - ] + in button + [ class "header" + , onClick actions.address (UpdateLoggedIn << UpdateMonthly <| ToggleDetail) + ] + [ text (getParamMessage [toString count, price model total] key model.translations) + , expand ExpandDown monthly.visibleDetail + ] paymentsTable : Model -> LoggedInView -> Monthly -> Html paymentsTable model loggedInView monthly = 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) diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs index 4076768..9f16f6b 100644 --- a/src/server/Model/Message/Key.hs +++ b/src/server/Model/Message/Key.hs @@ -53,7 +53,6 @@ data Key = | MoneySymbol | Punctual | Monthly - | NoMonthlyPayment | SingularMonthlyCount | PluralMonthlyCount diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs index fce979a..8c27a2d 100644 --- a/src/server/Model/Message/Translations.hs +++ b/src/server/Model/Message/Translations.hs @@ -220,11 +220,6 @@ m l Monthly = English -> "Monthly" French -> "Mensuel" -m l NoMonthlyPayment = - case l of - English -> "No monthly payment" - French -> "Aucun paiement mensuel" - m l SingularMonthlyCount = T.concat [ case l of -- cgit v1.2.3