From 6f76920e3fa1ee5beda02369d7b511e6db3be659 Mon Sep 17 00:00:00 2001
From: vv01f <vv01f@users.noreply.github.com>
Date: Wed, 29 Mar 2023 19:00:35 +0200
Subject: [PATCH] replace table for possibly better mobile view

---
 kole.html | 80 ++++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 61 insertions(+), 19 deletions(-)

diff --git a/kole.html b/kole.html
index 90866ad..31dc57c 100644
--- a/kole.html
+++ b/kole.html
@@ -7,21 +7,27 @@
 <!--
 	@media only screen {
 	}
+-->
 	@media only screen and (max-width: 600px){
 		body #wrap { font-size: 2.1em; }
+		input[type='number'],input+label { display: block;}
 	}
 	@media only screen and (min-width: 768px){
-		label { display:inline-block;width: 12ex; }
-		body #wrap { font-size: 1.2em; width: 80%; }
+		label {
+			display:inline-block;
+			width: 12ex;
+		}
+		body #wrap {
+			font-size: 1.2em;
+		}
 	}
--->
 <!--
 	body { font-family: sans-serif; }
 -->
 	#wrap {
 		display: inline-block;
 	}
-	fieldset{
+	div fieldset{
 		margin: 0 auto;
 		max-width: 50ex;
 		padding: 2ex;
@@ -29,7 +35,15 @@
 	legend{
 		margin-bottom: 0px;
 	}
-	label{ width: auto !important; }
+	.radiogroup > legend{
+		min-width: 20ex;
+		display: inline-block;
+		float: left;
+	}
+	.radiogroup > label{
+		display: inline;
+	}
+	label{ min-width: 20ex; }
 	input[type='number']{text-align:right;}
 	input[readonly='readonly']{background-color:#eee;}
 	h1{
@@ -45,20 +59,48 @@
 	<noscript>
 		Dieser Rechner ist auf JavaScript angewiesen!
 	</noscript>
-	<fieldset>
-		<legend></legend>
-	<table>
-		<tr><td>Eingangsgröße:</td><td><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label></td></tr>
-		<tr><td>Br<u>u</u>tto</td><td><input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;€</td></tr>
-		<tr><td>Umsatzsteuersatz</td><td><input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%</td></tr>
-		<tr><td>Umsatzsteuer</td><td><input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;€</td></tr>
-		<tr><td>N<u>e</u>tto</td><td><input accesskey="e" type="number" step="0.01" id="n" value="0.00"/>&thinsp;€</td></tr>
-		<tr><td>Entropieumlagesatz</td><td><input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%</td></tr>
-		<tr><td>Entropieumlage</td><td><input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;€</td></tr>
-		<tr><td>K<u>o</u>Le</td><td><input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;€</td></tr>
-		<tr><td>&nbsp;</td><td><button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button></td></tr>
-	</table>
-	</fieldset>
+<fieldset>
+	<legend></legend>
+	<section class="radiogroup">
+		<legend>Eingangsgröße</legend>
+		<input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label>
+	</section>
+	<section>
+		<div>
+		<label for="e">Br<u>u</u>tto</label>
+		<input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;€
+		</div>
+		<div>
+		<label for="u">Umsatzsteuersatz</label>
+		<input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%
+		</div>
+		<div>
+		<label for="us">Umsatzsteuer</label>
+		<input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;€
+		</div>
+		<div>
+		<label for="n">N<u>e</u>tto</label>
+		<input accesskey="e" type="number" step="0.01" id="n" value="0.00"/>&thinsp;€
+		</div>
+		<div>
+		<label for="z">Entropieumlagesatz</label>
+		<input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%
+		</div>
+		<div>
+		<label for="eu">Entropieumlage</label>
+		<input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;€
+		</div>
+		<div>
+		<label for="k">K<u>o</u>Le</label>
+		<input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;€
+		</div>
+	</section>
+	<section>
+		<button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button>
+	</section>
+
+</fieldset>
+
 	<script>
 		var e=document.getElementById('e');
 		var u=document.getElementById('u');