From 9e6e6e391c2f4ced077d0c2f33953f3322729bc3 Mon Sep 17 00:00:00 2001 From: Paul Brinkmeier Date: Sun, 20 Aug 2023 20:24:16 +0200 Subject: [PATCH] Restyle calculator --- frontend/Calculator.elm | 54 ++++++++++------- jon/static/entry.js | 125 +++++++++++++++++++++++++++++----------- jon/static/jon.css | 9 ++- 3 files changed, 130 insertions(+), 58 deletions(-) diff --git a/frontend/Calculator.elm b/frontend/Calculator.elm index 3231ee8..4d6bcbd 100644 --- a/frontend/Calculator.elm +++ b/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 [] diff --git a/jon/static/entry.js b/jon/static/entry.js index 815a6ab..82b8e40 100644 --- a/jon/static/entry.js +++ b/jon/static/entry.js @@ -11657,62 +11657,117 @@ 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$disabled(true), - $elm$html$Html$Attributes$value( - $elm$core$String$fromFloat(1 + taxGroup.percentage)) + $elm$html$Html$Attributes$class('form-input --inline') ]), - _List_Nil) + _List_fromArray( + [ + 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$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$html$Html$input, - _List_fromArray( - [ - $elm$html$Html$Attributes$class('formula-input'), - $elm$html$Html$Attributes$disabled(true), - $elm$html$Html$Attributes$value( - A2( - $elm$core$Maybe$withDefault, - '?', - A2( - $elm$core$Maybe$map, - $elm$core$String$fromFloat, - A2($author$project$Calculator$getResult, model, taxGroup)))) - ]), - _List_Nil) + $elm$core$Maybe$withDefault, + '?', + A2( + $elm$core$Maybe$map, + $elm$core$String$fromFloat, + A2($author$project$Calculator$getResult, model, taxGroup)))) ]); 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$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$class('form-input --inline') ]), - _List_Nil), + _List_fromArray( + [ + 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$input, + $elm$html$Html$div, _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$Attributes$class('form-input --inline') ]), - _List_Nil), + _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$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$Attributes$id('bundle-size'), + $elm$html$Html$Attributes$type_('number'), + $elm$html$Html$Attributes$step('1') + ]), + _List_Nil) + ])), $elm$html$Html$text(') ') ]); return A2( diff --git a/jon/static/jon.css b/jon/static/jon.css index 386c1fd..0085d72 100644 --- a/jon/static/jon.css +++ b/jon/static/jon.css @@ -63,6 +63,11 @@ th { .form-input > select { display: block; } -.formula-input { - width: 10em; +.form-input.--inline { + display: inline-block; +} +.form-input.--inline > input:not([type=radio]), +.form-input.--inline > select { + display: block; + width: 8em; }