Restyle calculator

frontend/Calculator.elm

@@ -53,38 +53,50 @@ view model taxGroup =
   let
     mainPart =
       [ text "("
-      , input
-        [ class "formula-input", placeholder "Gebindepreis"
-        , value <| NumberInput.show model.bundlePrice
-        , onInput SetBundlePrice
+      , div [ class "form-input --inline" ]
+        [ label [ for "bundle-price" ] [ text "Gebindepreis" ]
+        , input
+          [ placeholder "Gebindepreis"
+          , value <| NumberInput.show model.bundlePrice
+          , onInput SetBundlePrice
+          , id "bundle-price"
+          , type_ "number"
+          , step "0.01"
+          ]
+          []
         ]
-        []
       , text " ÷ "
-      , input
-        [ class "formula-input", placeholder "Gebindegröße"
-        , value <| NumberInput.show model.bundleSize
-        , onInput SetBundleSize
+      , div [ class "form-input --inline" ]
+        [ label [ for "bundle-size" ] [ text "Gebindegröße" ]
+        , input
+          [ placeholder "Gebindegröße"
+          , value <| NumberInput.show model.bundleSize
+          , onInput SetBundleSize
+          , id "bundle-size"
+          , type_ "number"
+          , step "1"
+          ]
+          []
         ]
-        []
       , text ") "
       ]
     taxPart =
       [ text " ÷ "
-      , input
-        [ class "formula-input"
-        , disabled True
-        , value <| String.fromFloat <| 1 + taxGroup.percentage
+      , div [ class "form-input --inline" ]
+        [ label [ for "tax" ] [ text "Steuer" ]
+        , input
+          [ value <| String.fromFloat <| 1 + taxGroup.percentage
+          , id "tax"
+          , type_ "number"
+          , step "0.01"
+          , disabled True
+          ]
+          []
         ]
-        []
       ]
     resultPart =
       [ text " = "
-      , input
-        [ class "formula-input"
-        , disabled True
-        , value <| Maybe.withDefault "?" <| Maybe.map String.fromFloat <| getResult model taxGroup
-        ]
-        []
+      , text <| Maybe.withDefault "?" <| Maybe.map String.fromFloat <| getResult model taxGroup
       ]
   in
     fieldset []