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
|
|
@ -10,43 +10,6 @@
|
|||
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: 'arial', sans-serif;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -62,6 +25,29 @@
|
|||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
|
||||
// Get the target from the "data-target" attribute
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</html>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -38,17 +38,21 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="hero box">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div class="hero-background">
|
||||
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<section class="tile is-child hero box is-widescreen">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<div class="hero-background">
|
||||
<img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
|
||||
</div>
|
||||
<p class="title">
|
||||
Dungeons and Dragons Monster Generator
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="title">
|
||||
Dungeons and Dragons Monster Generator
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,83 @@
|
|||
{{ define "main" }}
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Monster Form</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
|
||||
<table>
|
||||
<tr>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child card ">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Monster Form</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<form action="/submit" method="post" class="">
|
||||
<div class="field">
|
||||
<td><label for="filename">Filename:</label></td>
|
||||
<td><input type="text" name="filename" required placeholder="Dateiname"
|
||||
class="input input-bordered w-full max-w-xs"><br></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="grid grid-cols-1">
|
||||
<button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table" hx-swap="outerHTML"
|
||||
class="button">Add
|
||||
Monster</button>
|
||||
</div>
|
||||
{{ template "monsterform" . }}
|
||||
<input type="hidden" name="filename" value="{{.Filename}}">
|
||||
<div class="card-actions justify-end">
|
||||
<div class="control"><input type="text" name="filename" required placeholder="Dateiname"
|
||||
class="input input-bordered w-full max-w-xs">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<button type="button" hx-post="/addMonster" hx-trigger="click" hx-target="#monster-table"
|
||||
hx-swap="outerHTML" class="button is-info">Add
|
||||
Monster</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ template "monsterform" . }}
|
||||
<input type="hidden" name="filename" value="{{.Filename}}">
|
||||
<input type="submit" value="Submit" class="button is-primary">
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4 is-centered">Existing Monsters</p>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<colgroup>
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Source</th>
|
||||
<th>Size</th>
|
||||
<th>Type</th>
|
||||
<th>Alignment</th>
|
||||
<th>AC</th>
|
||||
<th>AC Form</th>
|
||||
<th>HP Average</th>
|
||||
<th>HP Formula</th>
|
||||
<th>Speed</th>
|
||||
<th>Str</th>
|
||||
<th>Dex</th>
|
||||
<th>Con</th>
|
||||
<th>Int</th>
|
||||
<th>Wis</th>
|
||||
<th>Cha</th>
|
||||
<th>Save Dex</th>
|
||||
<th>Save Con</th>
|
||||
<th>Savve Wis</th>
|
||||
<th>Perception</th>
|
||||
<th>Stealth</th>
|
||||
<th>Damage Resistance</th>
|
||||
<th>Senses</th>
|
||||
<th>Languages</th>
|
||||
<th>CR</th>
|
||||
<th>Trait Name</th>
|
||||
<th>Trait Entry</th>
|
||||
<th>Action Name</th>
|
||||
<th>Action Entry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{{ template "monsterTable" }}
|
||||
</table>
|
||||
<div class="tile is-parent">
|
||||
<div class="tile is-child card">
|
||||
<div class="card-content">
|
||||
<div class="media-content">
|
||||
<p class="title is-4 is-centered">Existing Monsters</p>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table">
|
||||
<colgroup>
|
||||
<col style="width: 100px;">
|
||||
<col style="width: 100px;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Source</th>
|
||||
<th>Size</th>
|
||||
<th>Type</th>
|
||||
<th>Alignment</th>
|
||||
<th>AC</th>
|
||||
<th>AC Form</th>
|
||||
<th>HP Average</th>
|
||||
<th>HP Formula</th>
|
||||
<th>Speed</th>
|
||||
<th>Str</th>
|
||||
<th>Dex</th>
|
||||
<th>Con</th>
|
||||
<th>Int</th>
|
||||
<th>Wis</th>
|
||||
<th>Cha</th>
|
||||
<th>Save Dex</th>
|
||||
<th>Save Con</th>
|
||||
<th>Savve Wis</th>
|
||||
<th>Perception</th>
|
||||
<th>Stealth</th>
|
||||
<th>Damage Resistance</th>
|
||||
<th>Senses</th>
|
||||
<th>Languages</th>
|
||||
<th>CR</th>
|
||||
<th>Trait Name</th>
|
||||
<th>Trait Entry</th>
|
||||
<th>Action Name</th>
|
||||
<th>Action Entry</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{{ template "monsterTable" }}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -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