Helix/simplekolecalc
0
0
Fork 0
forked from wtf-eg/simplekolecalc
Code Pull Requests Activity

replace table for possibly better mobile view

Browse Source
This commit is contained in:
vv01f 2023-03-29 19:00:35 +02:00
parent bf712137e2
commit 6f76920e3f
1 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
kole.html
View File

@ -7,21 +7,27 @@
<!-- <!--
@media only screen { @media only screen {
} }
-->
@media only screen and (max-width: 600px){ @media only screen and (max-width: 600px){
body #wrap { font-size: 2.1em; } body #wrap { font-size: 2.1em; }
input[type='number'],input+label { display: block;}
} }
@media only screen and (min-width: 768px){ @media only screen and (min-width: 768px){
label { display:inline-block;width: 12ex; } label {
body #wrap { font-size: 1.2em; width: 80%; } display:inline-block;
width: 12ex;
}
body #wrap {
font-size: 1.2em;
}
} }
-->
<!-- <!--
body { font-family: sans-serif; } body { font-family: sans-serif; }
--> -->
#wrap { #wrap {
display: inline-block; display: inline-block;
} }
fieldset{ div fieldset{
margin: 0 auto; margin: 0 auto;
max-width: 50ex; max-width: 50ex;
padding: 2ex; padding: 2ex;
@ -29,7 +35,15 @@
legend{ legend{
margin-bottom: 0px; 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[type='number']{text-align:right;}
input[readonly='readonly']{background-color:#eee;} input[readonly='readonly']{background-color:#eee;}
h1{ h1{
@ -45,20 +59,48 @@
<noscript> <noscript>
Dieser Rechner ist auf JavaScript angewiesen! Dieser Rechner ist auf JavaScript angewiesen!
</noscript> </noscript>
<fieldset> <fieldset>
<legend></legend> <legend></legend>
<table> <section class="radiogroup">
<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> <legend>Eingangsgröße</legend>
<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> <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>
<tr><td>Umsatzsteuersatz</td><td><input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%</td></tr> </section>
<tr><td>Umsatzsteuer</td><td><input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;€</td></tr> <section>
<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> <div>
<tr><td>Entropieumlagesatz</td><td><input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%</td></tr> <label for="e">Br<u>u</u>tto</label>
<tr><td>Entropieumlage</td><td><input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;€</td></tr> <input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;€
<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> </div>
<tr><td>&nbsp;</td><td><button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button></td></tr> <div>
</table> <label for="u">Umsatzsteuersatz</label>
</fieldset> <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> <script>
var e=document.getElementById('e'); var e=document.getElementById('e');
var u=document.getElementById('u'); var u=document.getElementById('u');