git/ddServer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 5 Packages Wiki Activity Actions

improve usability and styling

Browse source 
change table layout for Form to flexbox using bulma tiles
This commit is contained in:
Patryk Hegenberg 2023-12-05 19:58:13 +01:00
parent e230c0e10d
commit 4f69762b1f
4 changed files with 374 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

142
templates/main.html
View file

@ -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 }}