styling and formatting for dancer page (incomplete)
This commit is contained in:
parent
07b13d357c
commit
0d537963ab
2 changed files with 49 additions and 34 deletions
|
@ -2,7 +2,8 @@
|
||||||
|
|
||||||
@(dancer: Dancer)
|
@(dancer: Dancer)
|
||||||
|
|
||||||
<tr>
|
<tr class="bg-white even:bg-neutral-50 border-b">
|
||||||
<td>@dancer.name</td>
|
<td class="text-center px-6 py-3">@dancer.name</td>
|
||||||
<td>@dancer.stage_name</td>
|
<td class="text-center px-6 py-3">@dancer.stage_name</td>
|
||||||
|
<td></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
@ -11,8 +11,24 @@
|
||||||
@:return_to_main_html()
|
@:return_to_main_html()
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form hx-post="/api/dancers" hx-target="next #dancer_list" hx-swap="afterbegin" hx-on::after-request=" if(event.detail.successful) this.reset()">
|
<h1 class="text-4xl underline text-center pt-4 pb-6">
|
||||||
<div class="flex w-3/5">
|
Dancers
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<table class="m-auto table-auto w-4/5">
|
||||||
|
<thead class="text-xs text-gray-700 bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3">Name</th>
|
||||||
|
<th scope="col" class="px-6 py-3">Stage Name</th>
|
||||||
|
<th></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody id="dancer_list">
|
||||||
|
<tr hx-target="this" class="bg-white even:bg-neutral-50 border-b">
|
||||||
|
<form hx-post="/api/dancers" hx-swap="afterend"
|
||||||
|
hx-on::after-request=" if(event.detail.successful) this.reset()">
|
||||||
|
<td>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="text" id="name" name="name"
|
<input type="text" id="name" name="name"
|
||||||
class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
||||||
|
@ -22,6 +38,8 @@
|
||||||
Name
|
Name
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<input type="text" id="stage_name" name="stage_name"
|
<input type="text" id="stage_name" name="stage_name"
|
||||||
class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
class="block px-2.5 pb-2.5 pt-4 w-full text-sm text-gray-900 bg-transparent rounded-lg border-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
||||||
|
@ -31,19 +49,15 @@
|
||||||
Stage Name
|
Stage Name
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit"
|
</td>
|
||||||
class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5">+</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<table>
|
<td class="w-10 h-full">
|
||||||
<thead>
|
<button type="submit"
|
||||||
<tr>
|
class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm w-full h-full">+</button>
|
||||||
<th>Name</th>
|
</td>
|
||||||
<th>Stage Name</th>
|
|
||||||
|
</form>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
|
||||||
<tbody id="dancer_list">
|
|
||||||
@for dancer in dancers.into_iter() {
|
@for dancer in dancers.into_iter() {
|
||||||
|
|
||||||
@:dancer_html(dancer)
|
@:dancer_html(dancer)
|
||||||
|
|
Loading…
Reference in a new issue