From 56de4dc516975b36d1cbe70da3964d254fa82c65 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 20 May 2021 16:55:01 +0200
Subject: Reduce number input widths

---
 public/main.css  | 9 ++++++++-
 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,
-- 
cgit v1.2.3