3ae3963c5b
Move list partials outside the section element on bags, gear, and brews pages so they become separate flex children of <main>, matching the pattern used by roasters, roasts, cafes, and cups. Add mt-6 to each partial's outer div for consistent spacing. Standardise brew and gear list partials to match the canonical structure: empty-state conditional with dashed amber border, <section> wrapper for the table, and data-star-scope attribute on the outer div. Update CLAUDE.md to document page template and list partial structure requirements, preventing future drift.
96 lines
3.4 KiB
HTML
96 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Brewlog · Gear{% endblock %}
|
|
{% block content %}
|
|
<section data-signals:_show-form="false" data-signals:_is-submitting="false">
|
|
<header class="flex flex-wrap items-start justify-between gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-semibold">Gear</h1>
|
|
<p class="max-w-2xl text-sm text-stone-600">Track your brewing equipment.</p>
|
|
</div>
|
|
{% if is_authenticated %}
|
|
<button
|
|
type="button"
|
|
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
|
|
data-class:hidden="$_showForm"
|
|
data-on:click="$_showForm = true"
|
|
aria-label="Add new gear"
|
|
>
|
|
<span aria-hidden="true">+</span>
|
|
</button>
|
|
{% endif %}
|
|
</header>
|
|
|
|
{% if is_authenticated %}
|
|
<div
|
|
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
|
|
data-show="$_showForm"
|
|
style="display: none"
|
|
>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-amber-700">New Gear</h2>
|
|
<p class="mt-1 text-sm text-stone-600">
|
|
Add brewing equipment to your collection.
|
|
</p>
|
|
</div>
|
|
<form
|
|
method="post"
|
|
action="/api/v1/gear"
|
|
class="mt-4 flex flex-col gap-4"
|
|
data-on:submit="$_isSubmitting = true; @post('/api/v1/gear?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#gear-list', mode: 'replace'}})"
|
|
data-ref="_form"
|
|
data-on:datastar-fetch="evt.detail.type === 'finished' && $_isSubmitting && ($_showForm = false, $_form && $_form.reset(), $_isSubmitting = false)"
|
|
>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Category *</span>
|
|
<select name="category" required class="input-field">
|
|
<option value="">Select a category</option>
|
|
<option value="grinder">Grinder</option>
|
|
<option value="brewer">Brewer</option>
|
|
<option value="filter_paper">Filter Paper</option>
|
|
</select>
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Make *</span>
|
|
<input
|
|
type="text"
|
|
name="make"
|
|
required
|
|
class="input-field"
|
|
placeholder="Baratza"
|
|
/>
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Model *</span>
|
|
<input
|
|
type="text"
|
|
name="model"
|
|
required
|
|
class="input-field"
|
|
placeholder="Encore"
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
class="rounded-md px-4 py-2 text-sm font-medium text-stone-600 hover:bg-stone-200/50"
|
|
data-on:click="$_showForm = false"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-amber-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2"
|
|
>
|
|
Save Gear
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</section>
|
|
|
|
{% include "partials/gear_list.html" %} {% endblock %}
|