From 398477cb76fc8346a41afb11fc65d97eb24ba06e Mon Sep 17 00:00:00 2001 From: Joris Guyonvarch Date: Wed, 12 Aug 2015 22:40:21 +0200 Subject: Input and label design glued together --- src/client/View/Payments/Add.elm | 6 ++---- src/server/Design/Color.hs | 3 +++ src/server/Design/Global.hs | 15 ++++++++++----- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm index 3aa44c8..ce4738b 100644 --- a/src/client/View/Payments/Add.elm +++ b/src/client/View/Payments/Add.elm @@ -35,10 +35,9 @@ addPayment model addPayment = onSubmitPrevDefault actions.address (UpdatePayment <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost)) ] [ div - [ class "name" ] + [ class ("name " ++ (if isJust addPayment.nameError then "error" else "")) ] [ input [ id "nameInput" - , class (if isJust addPayment.nameError then "error" else "") , value addPayment.name , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName) ] @@ -53,10 +52,9 @@ addPayment model addPayment = text "" ] , div - [ class "cost" ] + [ class ("cost " ++ (if isJust addPayment.costError then "error" else "")) ] [ input [ id "costInput" - , class (if isJust addPayment.costError then "error" else "") , value addPayment.cost , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost) ] diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs index a9529ab..97ad3d2 100644 --- a/src/server/Design/Color.hs +++ b/src/server/Design/Color.hs @@ -14,6 +14,9 @@ brown = C.brown green :: C.Color green = C.green +darkgrey :: C.Color +darkgrey = C.rgb 150 150 150 + grey :: C.Color grey = C.rgb 200 200 200 diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs index 59e4171..15d3196 100644 --- a/src/server/Design/Global.hs +++ b/src/server/Design/Global.hs @@ -64,14 +64,16 @@ global = do width (pct 49) label ? do display inlineBlock - width (pct 20) + width (px 60) textAlign (alignSide sideCenter) - color C.brown + backgroundColor C.darkgrey + color C.white height (px inputHeight) lineHeight (px inputHeight) fontSize (px 22) verticalAlign middle input ? defaultInput inputHeight + "input:focus + label" ? backgroundColor C.grey ".name" ? do float floatLeft @@ -86,7 +88,10 @@ global = do width (pct 20) height (px inputHeight) - input # ".error" ? borderColor C.red + ".error" ? do + input ? borderColor C.red + label ? backgroundColor C.red + ".errorMessage" ? do position absolute color C.red @@ -156,6 +161,6 @@ defaultInput inputHeight = do height (px inputHeight) padding (px 10) (px 10) (px 10) (px 10) borderRadius (px 0) (px 0) (px 0) (px 0) - border solid (px 1) C.grey - focus & borderColor C.green + border solid (px 1) C.darkgrey + focus & borderColor C.grey verticalAlign middle -- cgit v1.2.3