- changed icons

- modified layout for use on small screens
This commit is contained in:
Tobias 2023-02-05 12:26:01 +01:00
parent 22b3fa7d1e
commit bb319d6bdc
19 changed files with 32 additions and 43 deletions

View File

@ -2,16 +2,16 @@
display: none; display: none;
} }
#dummy-row:only-child { #dummy-row:only-child {
display: block; display: table-row;
} }
input:invalid { input:invalid {
border: 2px solid red; border: 2px solid red;
} }
td.combatantDice, td.combatantRea { /*td.combatantDice, td.combatantRea {
width: 35%; width: 35%;
} }
button:disabled { button:disabled {
} } */

BIN
img/001-refresh.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 646 B

BIN
img/002-dead-body.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 750 B

BIN
img/003-shooting.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 580 B

BIN
img/004-edit-button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 575 B

BIN
img/005-add.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

BIN
img/006-dice.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 712 B

View File

@ -25,10 +25,10 @@
<body> <body>
<div class="container"> <div class="container">
<header class="navbar navbar-expand bg-success bg-opacity-25"> <header class="navbar navbar-expand bg-success bg-opacity-25">
<span class="navbar-brand text-bold ps-4">Shadowrun 2 Initiative Tracker</span> <span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation"> <nav class="container-fluid justify-content-end" aria-label="Main navigation">
<button type="submit" class="btn btn-light btn-rounded mx-1" id="addCombatantButton" title="Add combatant"><img src="png/001-add.png" /></button> <button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="addCombatantButton" title="Add combatant"><img src="img/005-add.png" /></button>
<button type="submit" class="btn btn-light btn-rounded mx-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="png/009-refresh.png" /></button> <button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#newRoundModal" title="Begin new round"><img src="img/001-refresh.png" /></button>
</nav> </nav>
</header> </header>
</br> </br>
@ -36,24 +36,24 @@
<table class="table table-sm" id="combatantsTable"> <table class="table table-sm" id="combatantsTable">
<thead> <thead>
<tr> <tr>
<th class="col-sm-5 text-start" title="Name">Name</th> <th class="col-4 text-start" title="Name">Name</th>
<th class="col-sm-2 text-center" title="Initiative">Initiative</th> <th class="col-2 text-center" title="Initiative">Ini</th>
<th class="col-sm-2 text-center" title="Initiative Dice and Reaction">Ini Dice & REA</th> <th class="col-2 text-center" title="Initiative Dice and Reaction"><img src="img/006-dice.png" />+R</th>
<th class="col-sm-3 text-center" title="Available Actions">Actions</th> <th class="col-4 text-center" title="Actions">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody class="align-middle"> <tbody>
<tr id="dummy-row"> <!-- <tr id="dummy-row" colspan="100%">
<td class="col-sm text-muted" colspan="4">No combatants yet …</td> <td class="col-sm text-muted">No combatants yet …</td>
</tr> </tr>
</tbody> --> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="modal fade" id="newRoundModal" tabindex="-2"> <div class="modal fade" id="newRoundModal" tabindex="-2">
<div class="modal-dialog"> <div class="modal-dialog modal-sm">
<div class="modal-content modal-sm"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Start New Round</h5> <h5 class="modal-title">Start New Round</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@ -70,33 +70,32 @@
</div> </div>
<div class="modal fade" id="combatantModal" tabindex="-1"> <div class="modal fade" id="combatantModal" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog modal-sm">
<div class="modal-content modal-sm"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title">Add New Combatant</h5> <h5 class="modal-title">Add New Combatant</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;"> <form id="combatantForm" name="combatantModalForm" class="was-validated" onsubmit="return false;">
<div class="form-outline mb-4"> <div class="my-2">
<input type="text" maxlength="40" class="form-control" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required /> <input type="text" maxlength="40" class="form-control form-control-sm" id="combatantModalName" form="combatantModalForm" id="newCombName" placeholder="Name" required />
</div> </div>
<div class="form-outline mb-4"> <div class="my-2">
<div class="input-group"> <div class="input-group">
<input type="number" min="1" max="5" class="form-control" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" /> <input type="number" min="1" max="5" class="form-control form-control-sm" id="combatantModalDice" form="combatantModalForm" placeholder="Dice" />
<span class="input-group-text">D+</span> <span class="input-group-text">D+</span>
<input type="number" min="1" max="25" class="form-control" id="combatantModalRea" form="combatantModalForm" placeholder="REA" /> <input type="number" min="1" max="25" class="form-control form-control-sm" id="combatantModalRea" form="combatantModalForm" placeholder="REA" />
</div> </div>
<div class="form-outline mb-4"> <div class="my-2">
</div> <input type="number" min="0" max="55" class="form-control form-control-sm" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
<input type="number" min="0" max="55" class="form-control" id="combatantModalIni" form="combatantModalForm" placeholder="Ini" />
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-secondary" id="combatantModalCancelButton" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK (add)</button> <button type="submit" class="btn btn-primary" id="combatantModalAddOkButton">OK</button>
<button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK (edit)</button> <button type="submit" class="btn btn-primary" id="combatantModalEditOkButton" style="display: none">OK</button>
</div> </div>
</div> </div>
</div> </div>

View File

@ -224,25 +224,15 @@ function addCombatant (e) {
// construct jQuery object for table row // construct jQuery object for table row
let $tr = $($.parseHTML( [ let $tr = $($.parseHTML( [
'<tr class="combatantRow">\n', '<tr class="combatantRow align-middle">\n',
'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n', '<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
'<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n', '<td class="combatantIni text-center" title="Initiative">', ini, '</td>\n',
'<td>\n', '<td class="text-center combatantDiceAndRea" title="Iniative dice and reaction"><span class="combatantDice">', dice, '</span>D+<span class="combatantRea">', rea, '</span></td>\n',
'<div>\n',
'<table class="table table-sm table-borderless m-0 p-0 combatantDiceAndRea">\n',
'<tr>\n',
'<td class="combatantDice text-end" title="Number of initiative dice">', dice, '</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 class="text-end">\n', '<td class="text-end">\n',
'<div class="btn-group">\n', '<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 edit-button" title="Edit combatant\'s values"><img src="png/005-edit-button.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values"><img src="img/004-edit-button.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 act-button" title="Act and reduce ini by 10"><img src="png/004-shooting.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 act-button" title="Act and reduce ini by 10"><img src="img/003-shooting.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 remove-button" title="Remove combatant"><img src="png/003-dead-body.png" /></button>\n', '<button type="button" class="btn btn-light btn-rounded mx-1 p-1 remove-button" title="Remove combatant"><img src="img/002-dead-body.png" /></button>\n',
'</div>\n', '</div>\n',
'</td>\n', '</td>\n',
'</tr>'].join("") '</tr>'].join("")

Binary file not shown.

Before

Width:  |  Height:  |  Size: 796 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 924 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1021 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 831 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 750 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 806 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 929 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 938 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB