eclipse/sr2ini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

- buttons use icons now

Browse Source 
- added footer with icon attribution
This commit is contained in:
Tobias 2023-02-04 13:08:53 +01:00
parent 208738531a
commit e99c2e031d
3 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/custom.css
View File

@ -6,15 +6,9 @@ input:invalid {
border: 2px solid red;
}
.header-align-center {
text-align: center;
}
table.diceandrea {
padding: 0;
margin: 0;
}
td.combatantDice, td.combatantRea {
width: 45%;
width: 35%;
}
button:disabled {
}

26
index.html
View File

@ -24,22 +24,24 @@
<body>
<div class="container">
<header class="navbar navbar-expand bg-light">
<span class="navbar-brand">Shadowrun 2 Initiative Tracker</span>
<header class="navbar navbar-expand bg-warning">
<span class="navbar-brand ps-4">Shadowrun 2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
<button type="submit" class="btn btn-outline-secondary" id="addCombatantButton" title="Add combatant">Add Combatant</button>
<button type="submit" class="btn btn-outline-secondary" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round">New Round</button>
<div class="btn-group">
<button type="submit" class="btn btn-light btn-rounded" id="addCombatantButton" title="Add combatant"><img src="png/001-add.png" /></button>&nbsp;
<button type="submit" class="btn btn-light btn-rounded" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="png/009-refresh.png" /></button>
</div>
</nav>
</header>
</br>
<div class="table-responsive">
<table class="table table-sm" id="combatantsTable">
<thead>
<tr>
<th class="col-sm-5" title="Name">Name</th>
<th class="col-sm-2 header-align-center" title="Initiative">Initiative</th>
<th class="col-sm-2 header-align-center" title="Initiative Dice and Reaction">Ini Dice & REA</th>
<th class="col-sm-3 header-align-center" title="Available Actions">Actions</th>
<th class="col-sm-5 text-start" title="Name">Name</th>
<th class="col-sm-2 text-center" title="Initiative">Initiative</th>
<th class="col-sm-2 text-center" title="Initiative Dice and Reaction">Ini Dice & REA</th>
<th class="col-sm-3 text-center" title="Available Actions">Actions</th>
</tr>
</thead>
<tbody class="align-middle">
@ -99,6 +101,12 @@
</div>
</div>
<div class="container">
<footer class="footer fixed-bottom bg-light py-1 my-1">
<hr />
<p class="text-center text-muted">Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></p>
</footer>
</div>
</body>
</html>

14
js/sr2ini.js
View File

@ -215,20 +215,20 @@ function addCombatant (e) {
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
'<td>\n',
'<div>\n',
'<table class="table table-sm table-borderless diceandrea">\n',
'<table class="table table-sm table-borderless m-0 p-0">\n',
'<tr>\n',
'<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</td>\n',
'<td class="text-center">D+</td>\n',
'<td class="text-center"><img src="png/002-dice.png" />+</td>\n',
'<td class="combatantRea text-start" title="Reaction">', rea, '</td>\n',
'</tr>\n',
'</table>\n',
'</div>\n',
'</td>\n',
'<td>\n',
'<div class="btn-group d-flex">\n',
'<button type="button" class="btn btn-primary btn-rounded w-50 edit-button" title="Edit combatant\'s values">Edit</button>&nbsp;\n',
'<button type="button" class="btn btn-warning btn-rounded w-50 act-button" title="Act and reduce ini by 10">-10</button>&nbsp;\n',
'<button type="button" class="btn btn-danger btn-rounded w-50 remove-button" title="Remove combatant">X</button>\n',
'<td class="text-center">\n',
'<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded edit-button" title="Edit combatant\'s values"><img src="png/005-edit-button.png" /></button>&nbsp;\n',
'<button type="button" class="btn btn-light btn-rounded act-button" title="Act and reduce ini by 10"><img src="png/004-shooting.png" /></button>&nbsp;\n',
'<button type="button" class="btn btn-light btn-rounded remove-button" title="Remove combatant"><img src="png/003-dead-body.png" /></button>\n',
'</div>\n',
'</td>\n',
'</tr>'].join("")