modified CSS and button layout

This commit is contained in:
Tobias 2022-01-08 13:57:18 +01:00
parent afd39b846f
commit ff3799ab13
2 changed files with 13 additions and 7 deletions

View File

@ -21,18 +21,20 @@
</head> </head>
<body> <body>
<br/>
<div class="container"> <div class="container">
<table class="table table-sm" id="combatants"> <div class="table-responsive">
<table class="table table-sm table-hover " id="combatants">
<thead> <thead>
<tr id="combatants-headrow"> <tr id="combatants-headrow">
<th title="Initiative">Ini</th> <th title="Initiative">Initiative</th>
<th title="Name">Name</th> <th title="Name">Name</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody id="sortable"> <tbody id="sortable">
<tr id="formRow"> <tr class="table-active" id="formRow">
<form name="combForm" id="combForm" onsubmit="return false;"> <form name="combForm" id="combForm" onsubmit="return false;">
<td> <td>
<input type="number" min="0" max="99" class="form-control" id="combIni" placeholder="new combatant's ini" required /> <input type="number" min="0" max="99" class="form-control" id="combIni" placeholder="new combatant's ini" required />
@ -40,14 +42,16 @@
<td> <td>
<input type="text" maxlength="40" class="form-control" id="combName" placeholder="new combatant's name" required /> <input type="text" maxlength="40" class="form-control" id="combName" placeholder="new combatant's name" required />
</td> </td>
<td> <td width="50px">
<button type="button" class="btn btn-primary btn-sm" id="combAddButton" title="Combatant's name …">Add</button> <button type="button" class="btn btn-primary btn-sm" id="combAddButton" title="Add combatant to fight">Add</button>
</td> </td>
<td width="80px"/>
</form> </form>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -138,8 +138,10 @@ console.log("Ini is: " + ini);
'<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>', '<td contenteditable="true" class="ini-editable" title="click to edit">', ini , '</td>',
'<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>', '<td contenteditable="true" class="name-editable" title="click to edit">', $("#combName").val(), '</td>',
'<td>', '<td>',
'<button type="button" class="btn btn-default act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>', '<button type="button" class="btn btn-sm btn-secondary act-button" title="Complete this combatant\'s current phase and reduce ini by 10">-10</button>',
'<button type="button" class="btn btn-default remove-button" title="Remove combatant">Remove</button>', '</td>',
'<td>',
'<button type="button" class="btn btn-sm btn-danger remove-button" title="Remove combatant">Remove</button>',
'</td>', '</td>',
'</tr>'].join("") '</tr>'].join("")
)); ));