142 lines
3.4 KiB
Plaintext
142 lines
3.4 KiB
Plaintext
TASK: Convertire tutti i template HTML esistenti per usare componenti Flowbite (markup + behavior JS) mantenendo logica MVC e HTMX.
|
|
|
|
Non modificare controller, services, repo.
|
|
Modificare solo template e layout.
|
|
|
|
-------------------------------------
|
|
1) LAYOUT GLOBALE
|
|
-------------------------------------
|
|
|
|
Aggiornare /web/templates/layout.html:
|
|
|
|
- Layout container moderno Tailwind
|
|
- Navbar Flowbite responsive con:
|
|
- Logo/AppName a sinistra
|
|
- Link:
|
|
- Public: Login / Signup
|
|
- Private: Dashboard / Users
|
|
- Admin: Admin (solo se role=admin)
|
|
- Dropdown utente con logout
|
|
- Include:
|
|
<link rel="stylesheet" href="/static/css/app.css?v={{.BuildHash}}">
|
|
<script src="/static/vendor/app.js"></script>
|
|
<script src="/static/vendor/flowbite.js"></script>
|
|
|
|
Struttura:
|
|
- Navbar top
|
|
- Container max-w-7xl mx-auto p-6
|
|
- Footer minimale
|
|
|
|
-------------------------------------
|
|
2) PUBLIC TEMPLATES
|
|
-------------------------------------
|
|
|
|
Convertire:
|
|
|
|
/web/templates/public/login.html
|
|
/web/templates/public/signup.html
|
|
/web/templates/public/forgot_password.html
|
|
/web/templates/public/reset_password.html
|
|
|
|
Usare:
|
|
- Card Flowbite per form
|
|
- Input Flowbite style
|
|
- Button primary
|
|
- Alert Flowbite per flash messages
|
|
- Layout centrato verticalmente (flex items-center justify-center min-h-screen)
|
|
|
|
-------------------------------------
|
|
3) PRIVATE USERS
|
|
-------------------------------------
|
|
|
|
/web/templates/private/users/index.html
|
|
|
|
- Header sezione con:
|
|
- Titolo
|
|
- Pulsante "Nuovo Utente" (modal Flowbite)
|
|
- Search input Flowbite
|
|
- Table Flowbite styled (striped, hover)
|
|
- Pagination button Flowbite
|
|
- Modal Flowbite per dettaglio utente
|
|
|
|
Assicurarsi che:
|
|
- fetch/get
|
|
- target DOM update
|
|
- swap HTML manuale
|
|
rimangano funzionanti
|
|
|
|
-------------------------------------
|
|
4) ADMIN
|
|
-------------------------------------
|
|
|
|
/web/templates/admin/dashboard.html
|
|
/web/templates/admin/users.html
|
|
/web/templates/admin/audit_logs.html
|
|
|
|
Usare:
|
|
- Card summary (stats)
|
|
- Table Flowbite
|
|
- Badge per ruoli (admin = red, user = blue)
|
|
- Tabs Flowbite se presenti più sezioni
|
|
|
|
-------------------------------------
|
|
5) FLASH MESSAGES
|
|
-------------------------------------
|
|
|
|
Creare partial:
|
|
- /web/templates/components/flash.html
|
|
|
|
Usare Flowbite alert component:
|
|
- success -> green
|
|
- error -> red
|
|
- warning -> yellow
|
|
|
|
Includere in layout sopra {{embed}}
|
|
|
|
-------------------------------------
|
|
6) MODAL STANDARD
|
|
-------------------------------------
|
|
|
|
Creare partial riusabile:
|
|
/web/templates/components/modal.html
|
|
|
|
Markup Flowbite standard con:
|
|
- id dinamico
|
|
- header con titolo
|
|
- body slot
|
|
- footer slot opzionale
|
|
- data-modal-toggle attributes
|
|
|
|
Usare nelle pagine private.
|
|
|
|
-------------------------------------
|
|
7) ACCESSIBILITÀ
|
|
-------------------------------------
|
|
|
|
- Usare aria attributes corretti come in documentazione Flowbite
|
|
- Non rompere keyboard interaction
|
|
- Mantenere form method e csrf se presente
|
|
|
|
-------------------------------------
|
|
8) RESPONSIVE DESIGN
|
|
-------------------------------------
|
|
|
|
- Navbar collapse mobile
|
|
- Table scrollable mobile
|
|
- Forms full width mobile
|
|
|
|
-------------------------------------
|
|
9) CRITERI DI ACCETTAZIONE
|
|
-------------------------------------
|
|
|
|
- Tutte le pagine hanno layout moderno Flowbite
|
|
- Modals funzionano
|
|
- Dropdown funzionano
|
|
- Navbar responsive
|
|
- HTMX partial update continua a funzionare
|
|
- Nessuna modifica backend richiesta
|
|
- Nessun errore JS in console
|
|
|
|
Scrivere codice pulito, leggibile, con commenti minimi.
|
|
Non eliminare logica Go template esistente.
|