diff options
| author | Joris | 2021-05-20 16:55:01 +0200 |
|---|---|---|
| committer | Joris | 2021-05-20 16:55:01 +0200 |
| commit | 56de4dc516975b36d1cbe70da3964d254fa82c65 (patch) | |
| tree | 73e0eeae0fe4a164cb82d9def9be9ada828bfe8f | |
| parent | 82e688161e2975696edf43bd9a3a78f39d7d55d0 (diff) | |
| download | tabata-56de4dc516975b36d1cbe70da3964d254fa82c65.tar.gz tabata-56de4dc516975b36d1cbe70da3964d254fa82c65.tar.bz2 tabata-56de4dc516975b36d1cbe70da3964d254fa82c65.zip | |
Reduce number input widths
| -rw-r--r-- | public/main.css | 9 | ||||
| -rw-r--r-- | src/view/form.ts | 8 |
2 files changed, 12 insertions, 5 deletions
diff --git a/public/main.css b/public/main.css index 45fbd8b..a2451a0 100644 --- a/public/main.css +++ b/public/main.css @@ -119,6 +119,14 @@ body { padding-bottom: 0.3rem; } +.g-Form__NumberInput { + width: 5rem; +} + +.g-Form__TabataInput { + width: 10rem; +} + .g-Form__Duration { text-align: center; font-size: 1.5rem; @@ -246,7 +254,6 @@ h1 { .g-Input { display: block; font-size: inherit; - width: 10rem; padding: 0.3rem; border: 0.1rem solid var(--color-input-border); } diff --git a/src/view/form.ts b/src/view/form.ts index a5e7253..8670463 100644 --- a/src/view/form.ts +++ b/src/view/form.ts @@ -26,7 +26,7 @@ export function view(config: Config.Config, showPage: (route: Router.Route) => v h('h1', { className: 'g-Form__Title' }, 'Tabatas'), h('div', { className: 'g-Form__Line' }, - numberInput('Preparation', 0, config.prepare, n => { config.prepare = n; wd()}), + numberInput('Prep', 0, config.prepare, n => { config.prepare = n; wd()}), operator('+'), numberInput('Cycles', 1, config.cycles, n => { config.cycles = n; wd()}), operator('× ('), @@ -85,7 +85,7 @@ function tabatasSection( tabatas, h('input', { type: 'button', - value: 'Add', + value: 'Add tabata', className: 'g-Button', onclick: (e: Event) => { let index = counter++ @@ -120,7 +120,7 @@ function tabataInput( ): TabataInput { const textInput = h('input', { value: init, - className: 'g-Input', + className: 'g-Input g-Form__TabataInput', required: 'required', oninput: (e: Event) => { if (e.target !== null) { @@ -163,7 +163,7 @@ function numberInput( }, labelValue, h('input', - { className: 'g-Input', + { className: 'g-Input g-Form__NumberInput', type: 'number', required: 'required', min, |