- added background image to navbar

- emlarged navbar buttons
- changed some of the icons
This commit is contained in:
Tobias 2023-02-08 21:57:50 +01:00
parent a142740330
commit 938f32cb8c
11 changed files with 21 additions and 35 deletions

View File

@ -5,6 +5,18 @@
display: table-row;
}
header.navbar {
background-image: url("../img/horizon.png");
}
span.navbar-brand {
position: absolute;
right: 110px;
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}
input:invalid {
border: 2px solid red;
}
@ -63,7 +75,3 @@ input:invalid {
.damage-monitor button.active {
filter: brightness(91%);
}
/*$light: steelblue;
@import "bootstrap";
*/

BIN
img/act.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 795 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 981 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 411 B

BIN
img/damage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 565 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 735 B

BIN
img/horizon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/newround.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 846 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 646 B

View File

@ -24,14 +24,13 @@
<body>
<div class="container">
<header class="navbar navbar-expand bg-success bg-opacity-25">
<header class="navbar navbar-expand">
<span class="navbar-brand text-bold ps-4">SR2 Initiative Tracker</span>
<nav class="container-fluid justify-content-end" aria-label="Main navigation">
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="addCombatantButton" title="Add combatant"><img src="img/add.png" /></button>
<button type="submit" class="btn btn-light btn-rounded mx-1 p-1" id="newRoundButton" data-bs-toggle="modal" data-bs-target="#confirmModal" title="Start new round"><img src="img/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="#confirmModal" title="Start new round"><img src="img/newround.png" /></button>
</nav>
</header>
</br>
<div class="table-responsive overflow-visible">
<table class="table table-sm" id="combatantsTable">
<thead>

View File

@ -9,9 +9,9 @@ const COMBATANT_TABLE_ROW = [
'<td class="text-end">\n',
'<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values"><img src="img/edit.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/check.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/act.png" /></button>\n',
'<div class="damage-dropdown">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="img/explosion.png" /></button>\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="img/damage.png" /></button>\n',
'</div>\n',
'</div>\n',
'</td>\n',
@ -398,27 +398,7 @@ function addCombatant (e) {
$tr.find(".combatantDice").text($("#combatantModalDice").val().trim());
$tr.find(".combatantRea").text($("#combatantModalRea").val().trim());
//TODO: retrieve initial damage levels
// construct jQuery object for table row
/* let $tr = $($.parseHTML( [
'<tr class="combatantRow align-middle" data-true-ini="', ini, '">\n', //TODO: add data-damage-* attributes with initial damage levels
'<td class="combatantName" title="Combatant\'s name">', name, '</td>\n',
'<td class="combatantIni text-center" title="Effective initiative (w/ wound penalties)">', effectiveIni, '</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',
'<td class="text-end">\n',
'<div class="btn-group">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 edit-button" title="Edit combatant\'s values"><img src="img/edit.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/check.png" /></button>\n',
'<div class="damage-dropdown">\n',
'<button type="button" class="btn btn-light btn-rounded mx-1 p-1 damage-button" title="Take damage"><img src="img/explosion.png" /></button>\n',
DAMAGE_MONITOR_HTML + "\n",
'</div>\n',
'</div>\n',
'</td>\n',
'</tr>'].join("")
));*/
//TODO: retrieve initial damage levels
//TODO: mark initial damage levels with active class -> what? don't know what this means
// add handler to table cells (click to edit)
@ -525,17 +505,17 @@ function startNewRound (e) {
// add test combatant for testing purposes (duh)
function addTestCombatant() {
// Eclipse
$("#addCombatantButton").click();
$("#combatantModalName").val("Goon1");
$("#combatantModalDice").val(2);
$("#combatantModalName").val("Eclipse");
$("#combatantModalDice").val(3);
$("#combatantModalRea").val(6);
$("#combatantModalIni").val(12);
// $("#combatantModalIni").val(12);
setTimeout(function(){
$("#combatantModalAddOkButton").click();
},500);
}
/*
* Initialize document
*/
@ -570,5 +550,4 @@ $(document).ready(function(){
});
addTestCombatant();
});