improve usability and styling
change table layout for Form to flexbox using bulma tiles
This commit is contained in:
Patryk Hegenberg
parent
e230c0e10d
commit
4f69762b1f
4 changed files with 374 additions and 215 deletions
|
|
@ -1,101 +1,266 @@
|
|||
{{ define "monsterform" }}
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="name">Monster Name:</label></td>
|
||||
<td><input type="text" name="name" required placeholder="Type here"
|
||||
class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="source">Monster Source:</label></td>
|
||||
<td><input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="size">Size:</label></td>
|
||||
<td><input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="type">Type:</label></td>
|
||||
<td><input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="alignment">Alignment:</label></td>
|
||||
<td><input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="ac">AC:</label></td>
|
||||
<td><input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="acFrom">AC From:</label></td>
|
||||
<td><input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="hpAverage">HP Average:</label></td>
|
||||
<td><input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="hpFormula">HP Formula:</label></td>
|
||||
<td><input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="speed">Speed:</label></td>
|
||||
<td><input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="str">Str:</label></td>
|
||||
<td><input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="dex">Dex:</label></td>
|
||||
<td><input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="con">Con:</label></td>
|
||||
<td><input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="int">Int:</label></td>
|
||||
<td><input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="wis">Wis:</label></td>
|
||||
<td><input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="cha">Cha:</label></td>
|
||||
<td><input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="saveDex">Save Dex:</label></td>
|
||||
<td><input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="saveCon">Save Con:</label></td>
|
||||
<td><input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="saveWis">Save Wis:</label></td>
|
||||
<td><input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="perception">Perception:</label></td>
|
||||
<td><input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="stealth">Stealth:</label></td>
|
||||
<td><input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="damageRes">Damage Resistances:</label></td>
|
||||
<td><input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="senses">Senses:</label></td>
|
||||
<td><input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="languages">Languages:</label></td>
|
||||
<td><input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="cr">CR:</label></td>
|
||||
<td><input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="traitName">Trait Name:</label></td>
|
||||
<td><input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="traitEntry">Trait Entry:</label></td>
|
||||
<td><input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="actionName">Action Name:</label></td>
|
||||
<td><input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
<td><label for="actionEntry">Action Entry:</label></td>
|
||||
<td><input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="name">Monster Name:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="name" required placeholder="Type here" class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="source">Monster Source:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="source" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="size">Size:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="size" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="type">Type:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="type" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-vertical is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="alignment">Alignment:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="alignment" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="ac">AC:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="ac" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="acFrom">AC From:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="hpAverage">HP Average:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="hpFormula">HP Formula:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="speed">Speed:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="speed" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="str">Str:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="str" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="dex">Dex:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="dex" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="con">Con:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="con" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="int">Int:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="int" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="wis">Wis:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="wis" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="cha">Cha:</label>
|
||||
<div class="control">
|
||||
<input type="number" name="cha" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent gap">
|
||||
<div class="tile is-child field">
|
||||
<label for="saveDex">Save Dex:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent gap">
|
||||
<div class="tile is-child field">
|
||||
<label for="saveCon">Save Con:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent gap">
|
||||
<div class="tile is-child field">
|
||||
<label for="saveWis">Save Wis:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="perception">Perception:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="perception" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="stealth">Stealth:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="stealth" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="damageRes">Damage Resistances:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="senses">Senses:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="senses" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="languages">Languages:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="languages" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="cr">CR:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="cr" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="traitName">Trait Name:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="traitName" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="traitEntry">Trait Entry:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="actionName">Action Name:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="actionName" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child field">
|
||||
<label for="actionEntry">Action Entry:</label>
|
||||
<div class="control">
|
||||
<input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue