Restyle calculator

frontend/Calculator.elm

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

jon/static/entry.js

@@ -11657,26 +11657,41 @@ var $author$project$Calculator$view = F2(
 			[
 				$elm$html$Html$text(' ÷ '),
 				A2(
-				$elm$html$Html$input,
+				$elm$html$Html$div,
 				_List_fromArray(
 					[
-						$elm$html$Html$Attributes$class('formula-input'),
+						$elm$html$Html$Attributes$class('form-input --inline')
-						$elm$html$Html$Attributes$disabled(true),
-						$elm$html$Html$Attributes$value(
-						$elm$core$String$fromFloat(1 + taxGroup.percentage))
 					]),
-				_List_Nil)
+				_List_fromArray(
-			]);
-		var resultPart = _List_fromArray(
 					[
-				$elm$html$Html$text(' = '),
+						A2(
+						$elm$html$Html$label,
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$for('tax')
+							]),
+						_List_fromArray(
+							[
+								$elm$html$Html$text('Steuer')
+							])),
 						A2(
 						$elm$html$Html$input,
 						_List_fromArray(
 							[
-						$elm$html$Html$Attributes$class('formula-input'),
-						$elm$html$Html$Attributes$disabled(true),
 								$elm$html$Html$Attributes$value(
+								$elm$core$String$fromFloat(1 + taxGroup.percentage)),
+								$elm$html$Html$Attributes$id('tax'),
+								$elm$html$Html$Attributes$type_('number'),
+								$elm$html$Html$Attributes$step('0.01'),
+								$elm$html$Html$Attributes$disabled(true)
+							]),
+						_List_Nil)
+					]))
+			]);
+		var resultPart = _List_fromArray(
+			[
+				$elm$html$Html$text(' = '),
+				$elm$html$Html$text(
 				A2(
 					$elm$core$Maybe$withDefault,
 					'?',
@@ -11684,35 +11699,75 @@ var $author$project$Calculator$view = F2(
 						$elm$core$Maybe$map,
 						$elm$core$String$fromFloat,
 						A2($author$project$Calculator$getResult, model, taxGroup))))
-					]),
-				_List_Nil)
 			]);
 		var mainPart = _List_fromArray(
 			[
 				$elm$html$Html$text('('),
 				A2(
-				$elm$html$Html$input,
+				$elm$html$Html$div,
 				_List_fromArray(
 					[
-						$elm$html$Html$Attributes$class('formula-input'),
+						$elm$html$Html$Attributes$class('form-input --inline')
-						$elm$html$Html$Attributes$placeholder('Gebindepreis'),
-						$elm$html$Html$Attributes$value(
-						$author$project$NumberInput$show(model.bundlePrice)),
-						$elm$html$Html$Events$onInput($author$project$Calculator$SetBundlePrice)
 					]),
-				_List_Nil),
+				_List_fromArray(
-				$elm$html$Html$text(' ÷ '),
+					[
+						A2(
+						$elm$html$Html$label,
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$for('bundle-price')
+							]),
+						_List_fromArray(
+							[
+								$elm$html$Html$text('Gebindepreis')
+							])),
+						A2(
+						$elm$html$Html$input,
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$placeholder('Gebindepreis'),
+								$elm$html$Html$Attributes$value(
+								$author$project$NumberInput$show(model.bundlePrice)),
+								$elm$html$Html$Events$onInput($author$project$Calculator$SetBundlePrice),
+								$elm$html$Html$Attributes$id('bundle-price'),
+								$elm$html$Html$Attributes$type_('number'),
+								$elm$html$Html$Attributes$step('0.01')
+							]),
+						_List_Nil)
+					])),
+				$elm$html$Html$text(' ÷ '),
+				A2(
+				$elm$html$Html$div,
+				_List_fromArray(
+					[
+						$elm$html$Html$Attributes$class('form-input --inline')
+					]),
+				_List_fromArray(
+					[
+						A2(
+						$elm$html$Html$label,
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$for('bundle-size')
+							]),
+						_List_fromArray(
+							[
+								$elm$html$Html$text('Gebindegröße')
+							])),
 						A2(
 						$elm$html$Html$input,
 						_List_fromArray(
 							[
-						$elm$html$Html$Attributes$class('formula-input'),
 								$elm$html$Html$Attributes$placeholder('Gebindegröße'),
 								$elm$html$Html$Attributes$value(
 								$author$project$NumberInput$show(model.bundleSize)),
-						$elm$html$Html$Events$onInput($author$project$Calculator$SetBundleSize)
+								$elm$html$Html$Events$onInput($author$project$Calculator$SetBundleSize),
+								$elm$html$Html$Attributes$id('bundle-size'),
+								$elm$html$Html$Attributes$type_('number'),
+								$elm$html$Html$Attributes$step('1')
 							]),
-				_List_Nil),
+						_List_Nil)
+					])),
 				$elm$html$Html$text(') ')
 			]);
 		return A2(

jon/static/jon.css

@@ -63,6 +63,11 @@ th {
 .form-input > select {
   display: block;
 }
-.formula-input {
+.form-input.--inline {
-  width: 10em;
+  display: inline-block;
+}
+.form-input.--inline > input:not([type=radio]),
+.form-input.--inline > select {
+  display: block;
+  width: 8em;
 }