ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add titles to edge inputs and fix content visibility toggle margin

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-07-24 15:24:35 -07:00
parent e8257eee37
commit 6775d76e38
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/css/style.css
View File

@ -453,7 +453,6 @@ div#content {
} }
label[for="content-visibility-toggle"] { label[for="content-visibility-toggle"] {
margin-top: 2px;
display: inline-block; display: inline-block;
padding: 0 4px; padding: 0 4px;
background-color: #EEE; background-color: #EEE;

29
public/index.html
View File

@ -113,7 +113,7 @@
<div id="edge-inputs"> <div id="edge-inputs">
<div id="content-visibility"> <div id="content-visibility">
<input type="checkbox" class="visible" id="content-visibility-toggle" /> <input type="checkbox" class="visible" id="content-visibility-toggle" />
<label for="content-visibility-toggle"> <label for="content-visibility-toggle" title="Hide/Show tab">
<span class="open">«</span> <span class="open">«</span>
<span class="close">»</span> <span class="close">»</span>
</label> </label>
@ -121,14 +121,14 @@
<div class="opt-toggle"> <div class="opt-toggle">
<input type="checkbox" id="toggle-grid-vis" checked /> <input type="checkbox" id="toggle-grid-vis" checked />
<label for="toggle-grid-vis"> <label for="toggle-grid-vis" title="Toggle grid visibility">
<span class="off">⬡</span><span class="on">⬢</span> <span class="off">⬡</span><span class="on">⬢</span>
</label> </label>
</div> </div>
<div class="opt-toggle"> <div class="opt-toggle">
<input type="checkbox" id="auto-center-map" /> <input type="checkbox" id="auto-center-map" />
<label for="auto-center-map"> <label for="auto-center-map" title="Auto-center map on selected units">
<!-- These chars have a weird height issue --> <!-- These chars have a weird height issue -->
<!-- <span class="off">⦾</span><span class="on">⦿</span> --> <!-- <span class="off">⦾</span><span class="on">⦿</span> -->
<span class="off">○</span><span class="on">●</span> <span class="off">○</span><span class="on">●</span>
@ -137,33 +137,36 @@
<div id="toggle-firing-arc-vis"> <div id="toggle-firing-arc-vis">
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" /> <input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
<label style="color: red;" for="defender-firing-arc-vis"> <label style="color: red;" for="defender-firing-arc-vis"
title="Hide/show defender's placed firing arcs">
<span class="hidden">▽</span><span class="visible">▼</span> <span class="hidden">▽</span><span class="visible">▼</span>
</label> </label>
<br/> <br/>
<input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" /> <input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
<label style="color: blue;" for="attacker-firing-arc-vis"> <label style="color: blue;" for="attacker-firing-arc-vis"
title="Hide/show attacker's placed firing arcs">
<span class="hidden">▽</span><span class="visible">▼</span> <span class="hidden">▽</span><span class="visible">▼</span>
</label> </label>
</div> </div>
<div class="select-elevation"> <div class="select-elevation">
<button class="up">🡅</button> <button class="up" title="View elevation 1 level above current">🡅</button>
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" /> <input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
<label for="select-elevation-3">3</label> <label for="select-elevation-3" title="View elevation level 3">3</label>
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" /> <input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
<label for="select-elevation-2">2</label> <label for="select-elevation-2" title="View elevation level 2">2</label>
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" /> <input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
<label for="select-elevation-1">1</label> <label for="select-elevation-1" title="View elevation level 1">1</label>
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked /> <input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
<label for="select-elevation-0">0</label> <label for="select-elevation-0" title="View elevation ground level">0</label>
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" /> <input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
<label for="select-elevation-basement">-1</label> <label for="select-elevation-basement" title="View elevation basement
<button class="down">🡇</button> level" >-1</label>
<button class="down" title="View elevation 1 level below current">🡇</button>
</div> </div>
<div id="dice"> <div id="dice">
<button type="button" id="roll-dice">Roll</button> <button type="button" id="roll-dice" title="Roll two six-sided dice">Roll</button>
<div class="die"> <div class="die">
<div> <div>
<span class="dot"></span> <span class="dot"></span>