layout

src/components/Checkbox.tsx

@@ -19,9 +19,10 @@ const Checkbox = (
 
   return (
     <div className="checkbox-wrapper">
-      <label>
+      <label htmlFor={id}>{label}</label>
         <input 
             id={id}
+            name={id}
             type="checkbox" 
             checked={isChecked} 
             onChange=
@@ -34,8 +35,6 @@ const Checkbox = (
             }
             {...props}
         />
-        <span>{label}</span>
-      </label>
     </div>
   );
 };

src/components/Qr.css

@@ -57,7 +57,6 @@ img
     flex-direction: row-reverse;
 }
 
-
 .spinBtn
 {
     display: flex;
@@ -71,6 +70,7 @@ img
     border-style: solid;
     border-width: 1px;
 }
+
 .blockRepeat
 {
     display: flex;
@@ -93,7 +93,7 @@ img
 
 .list-container
 {
-    margin-top:40px;
+    margin-top: 10px;
 }
 
 .list-item
@@ -110,6 +110,17 @@ img
     margin-bottom: 20px;
 }
 
+input
+{
+    width: 50px;
+}
+
+label
+{
+    margin-right: 10px;
+    margin-left: 15px;
+}
+
 @media print 
 {
     .qrSettings

src/components/Qr.tsx

@@ -35,28 +35,28 @@ export default function Qr()
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
 
-    const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
+    // const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
-    {
+    // {
-        event.preventDefault();
+    //     event.preventDefault();
-        if(fontSize < 200)
+    //     if(fontSize < 200)
-        {
+    //     {
-            setFontSize(fontSize + 1);
+    //         setFontSize(fontSize + 1);
-        }
+    //     }
 
-        console.log("\nincrementFontSize " + fontSize);
+    //     console.log("\nincrementFontSize " + fontSize);
-        return;
+    //     return;
-    });
+    // });
 
-    const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>  
+    // const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>  
-    {
+    // {
-        event.preventDefault();
+    //     event.preventDefault();
-        if(fontSize > 1)
+    //     if(fontSize > 1)
-        {
+    //     {
-            setFontSize(fontSize -1);
+    //         setFontSize(fontSize -1);
-        }
+    //     }
-        console.log("\ndecrementFontSize " + fontSize);
+    //     console.log("\ndecrementFontSize " + fontSize);
-        return;
+    //     return;
-    });
+    // });
 
     function setBitField(val: number, checked: boolean, bit: number) : number
     {
@@ -210,11 +210,17 @@ export default function Qr()
     }
     const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) => 
     {
-        setWidth(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
+        setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
     }
 
-    const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => {
+    const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => 
-        setHeight(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
+    {
+        setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
+    }
+
+    const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) => 
+    {
+        setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
     }
 
     if(user && dog.success === undefined)
@@ -247,22 +253,24 @@ export default function Qr()
                 <div className='qrSettings'>
                     <div>
                         <div>Anhänger</div>
-                        <div>Breite [cm]</div>
+                        <label htmlFor='width'>Breite [mm] </label>
-                        <input type='number' id='width' name='width' onChange={onChangeWidth} value={width}/>
+                        <input type='number' id='width' name='width' 
-                        <div>Höhe [cm]</div>
+                        min="1" max="100"
-                        <input type='number' id='height' name='height'onChange={onChangeHeight} value={height}/>
+                        onChange={onChangeWidth} value={width*10}/>
+                        <label htmlFor='height'>Höhe [mm] </label>
+                        <input type='number' id='height' name='height' 
+                        min="1" max="100"
+                        onChange={onChangeHeight} value={height*10}/>
                     </div>
                     <div>
-                        <div>Schriftgröße</div>
+                        <label htmlFor='fontSize'>Schriftgröße </label>
-                        <div className='spinBtn'> 
+                        <input type='number' id='fontSize' name='fontSize' 
-                            <button onClick={decrementFontSize}>-</button>
+                        min="1" max="200"
-                            <div>{fontSize}</div>
+                        onChange={onChangeFontSize} value={fontSize} />
-                            <button onClick={incrementFontSize}>+</button>
-                        </div>
                     </div>
                     <div>
                     <div>Sichtbare Elemente</div>
-                    <Checkbox 
+                        <Checkbox 
                             id='name' 
                             label={'Name'} 
                             checked={(visibleItem & 0b100) > 0}