moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: properly use fields, add tooltip as helptext
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse Source
This commit is contained in:
moanos [he/him]
2025-04-15 22:53:57 +02:00
parent e17cfb384c
commit 7ae4debfeb
4 changed files with 417 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
public/index.html
View File

@@ -62,48 +62,45 @@
<h2 class="title is-4"><label data-i18n="cage-measurements"
for="form-cage-measurements">Käfigmaße</label></h2>
<form>
<label for="num-rats-width" class="label" data-i18n="width-cm">Breite (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-width" placeholder="100 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="num-rats-width" class="label" data-i18n="width-cm">Breite (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-width" placeholder="100 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler-horizontal"></i>
</span>
</p>
</p>
</div>
<label for="num-rats-depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-depth" placeholder="50 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="num-rats-depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-depth" placeholder="50 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler"></i>
</span>
</p>
</p>
</div>
<label for="num-rats-height" class="label" data-i18n="height-cm">Höhe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-height" placeholder="120 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="num-rats-height" class="label" data-i18n="height-cm">Höhe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="num-rats-height" placeholder="120 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler-vertical"></i>
</span>
</p>
</p>
</div>
<div class="field">
<label for="num-rats-numFullFloors" class="label" data-i18n="full-floors">
Vollebenen
</label>
<input class="control" type="number" id="num-rats-numFullFloors" value="3" step="1">
<p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des
Käfigbodens.</p>
<div class="columns">
<div class="column">
<label for="num-rats-numFullFloors" class="label"
data-i18n="full-floors">Vollebenen</label>
<span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
stroke="currentColor">
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="number" id="num-rats-numFullFloors" value="3" step="1">
</div>
</div>
</form>
</div>
@@ -154,53 +151,56 @@
for="form-cage-measurements">Käfigmaße</label></h2>
<form id="form-cage-measurements" class="form-measurements">
<label for="width" class="label" data-i18n="width-cm">Breite (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="width" placeholder="100 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="width" class="label" data-i18n="width-cm">Breite (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="width" placeholder="100 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler-horizontal"></i>
</span>
</p>
</p>
</div>
<label for="depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="depth" placeholder="50 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="depth" placeholder="50 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler"></i>
</span>
</p>
</p>
</div>
<label for="height" class="label" data-i18n="height-cm">Höhe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="height" placeholder="120 cm">
<span class="icon is-small is-left">
<div class="field">
<label for="height" class="label" data-i18n="height-cm">Höhe (cm)</label>
<p class="control has-icons-left">
<input class="input" type="number" id="height" placeholder="120 cm">
<span class="icon is-small is-left">
<i class="fas fa-ruler-vertical"></i>
</span>
</p>
</p>
</div>
<div class="columns">
<div class="column">
<label for="numFullFloors" class="label"
data-i18n="full-floors">Vollebenen</label>
<span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
<svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
stroke="currentColor">
<path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="number" id="numFullFloors" value="3" step="1">
<div class="field">
<label for="numFullFloors" class="label"
data-i18n="full-floors">Vollebenen</label>
<input class="control" type="number" id="numFullFloors" value="3" step="1">
<p class="help">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive
des Käfigbodens.</p>
</div>
</div>
<div class="column">
<label for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl an
Ratten</label>
<input type="range" min="3" max="15" value="4" class="slider" id="numRats">
<div class="field">
<label class="label" for="numRats" id="labelNumRats" data-i18n="number-of-rats">Anzahl
an
Ratten</label>
<input type="range" min="3" max="15" value="4" class="control slider" id="numRats">
</div>
</div>
</div>
</form>