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"] {
margin-top: 2px;
display: inline-block;
padding: 0 4px;
background-color: #EEE;

29
public/index.html
View File

@ -113,7 +113,7 @@
<div id="edge-inputs">
<div id="content-visibility">
<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="close">»</span>
</label>
@ -121,14 +121,14 @@
<div class="opt-toggle">
<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>
</label>
</div>
<div class="opt-toggle">
<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 -->
<!-- <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">
<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>
</label>
<br/>
<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>
</label>
</div>
<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" />
<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" />
<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" />
<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 />
<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" />
<label for="select-elevation-basement">-1</label>
<button class="down">🡇</button>
<label for="select-elevation-basement" title="View elevation basement
level" >-1</label>
<button class="down" title="View elevation 1 level below current">🡇</button>
</div>
<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>
<span class="dot"></span>