feat: enhance documentation and UI for FullscreenButton and dev.sh commands
This commit is contained in:
@@ -30,7 +30,7 @@ Applicazione web ottimizzata per **tablet in orizzontale** che gestisce i varchi
|
||||
|
||||
```
|
||||
VotoFocolari/
|
||||
├── dev.sh # Script di sviluppo (install, dev, server, ...)
|
||||
├── dev.sh # Script di sviluppo (install, dev, server, check, ...)
|
||||
├── README.md
|
||||
├── ai-prompts/ # Documentazione sviluppo
|
||||
│ ├── 00-welcome-agent.md # Questo file
|
||||
@@ -51,7 +51,7 @@ VotoFocolari/
|
||||
└── src/
|
||||
├── App.tsx # State machine principale
|
||||
├── hooks/ # useRFIDScanner
|
||||
├── components/ # UI components
|
||||
├── components/ # UI components (Logo, UserCard, FullscreenButton, ...)
|
||||
├── screens/ # Schermate
|
||||
├── services/ # API client
|
||||
└── types/ # TypeScript types
|
||||
@@ -95,6 +95,9 @@ VotoFocolari/
|
||||
# Frontend: http://localhost:5173
|
||||
# Backend: http://localhost:8000
|
||||
|
||||
# Type-check TypeScript (senza build)
|
||||
./dev.sh check
|
||||
|
||||
# Produzione locale
|
||||
./dev.sh server
|
||||
# App completa: http://localhost:8000
|
||||
|
||||
@@ -69,21 +69,23 @@ Ottimizzata per tablet in orizzontale.
|
||||
- [x] `Input.tsx` - campo input styled + **toggle password visibility**
|
||||
- [x] `Modal.tsx` - modale base
|
||||
- [x] `RFIDStatus.tsx` - indicatore stato scanner
|
||||
- [x] `UserCard.tsx` - card utente con foto e ruolo
|
||||
- [x] `UserCard.tsx` - card utente con foto e ruolo (compatta per tablet)
|
||||
- [x] `CountdownTimer.tsx` - timer con progress bar
|
||||
- [x] `WelcomeCarousel.tsx` - carosello messaggi multilingua con **animazione smooth sliding**
|
||||
- [x] `NumLockBanner.tsx` - avviso NumLock per desktop
|
||||
- [x] `FullscreenButton.tsx` - toggle schermo intero (Fullscreen API)
|
||||
|
||||
### 7. Schermate (`screens/`)
|
||||
|
||||
- [x] `LoadingScreen.tsx` - caricamento iniziale + ping automatico
|
||||
- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner
|
||||
- [x] `ValidatorLoginScreen.tsx` - attesa badge + password + NumLockBanner + **FullscreenButton**
|
||||
- [x] `ActiveGateScreen.tsx` - varco attivo:
|
||||
- [x] Card utente (layout largo per tablet)
|
||||
- [x] **Schermata "badge non trovato"** con countdown barra visiva (30s)
|
||||
- [x] **Pulsante "Annulla" nella schermata badge non trovato**
|
||||
- [x] **Badge diverso durante errore "non trovato" → ricarica nuovo utente/errore**
|
||||
- [x] **Notifica badge validatore ignorato**
|
||||
- [x] **Pulsante FullscreenButton nell'header**
|
||||
- [x] NumLockBanner
|
||||
- [x] `SuccessModal.tsx` - conferma ingresso con carosello:
|
||||
- [x] **Carosello fullwidth** (nessun troncamento testo)
|
||||
@@ -260,6 +262,21 @@ npm run test:e2e:headed # Test con browser visibile
|
||||
npm run test:e2e:report # Mostra report HTML
|
||||
```
|
||||
|
||||
### 12. Ottimizzazione Tablet (1080x560)
|
||||
|
||||
- [x] Layout `h-screen` con `overflow-hidden` (no scroll) su tutte le schermate
|
||||
- [x] Header compatti: padding `p-3`, Logo `size="sm"`, testo ridotto
|
||||
- [x] Footer compatti: padding `p-2`, testo `text-xs`
|
||||
- [x] Card utente ridotta: foto `h-24/w-24` → `h-28/w-28`, testo `text-2xl/3xl`
|
||||
- [x] Spaziature e padding ridotti in tutti i box (meno `mb-`, `py-`, `p-`)
|
||||
- [x] Icone ridotte (da `w-24/h-24` a `w-16/h-16` ecc.)
|
||||
- [x] **Pulsante Fullscreen** nell'header di tutte le schermate (Fullscreen API)
|
||||
|
||||
### 13. Comandi Dev
|
||||
|
||||
- [x] `./dev.sh check` — Type-check TypeScript standalone (`tsc --noEmit`)
|
||||
- [x] `npm run check` — Script npm corrispondente
|
||||
|
||||
---
|
||||
|
||||
## ✅ FRONTEND COMPLETATO
|
||||
|
||||
@@ -28,18 +28,18 @@ export function FullscreenButton() {
|
||||
return (
|
||||
<button
|
||||
onClick={toggleFullscreen}
|
||||
className="p-2 rounded-lg text-gray-500 hover:text-focolare-blue hover:bg-focolare-blue/10 transition-colors"
|
||||
className="w-9 h-9 flex items-center justify-center rounded-lg text-gray-500 hover:text-focolare-blue hover:bg-focolare-blue/10 transition-colors"
|
||||
title={isFullscreen ? 'Esci da schermo intero' : 'Schermo intero'}
|
||||
>
|
||||
{isFullscreen ? (
|
||||
// Exit fullscreen icon
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round"
|
||||
d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
|
||||
</svg>
|
||||
) : (
|
||||
// Enter fullscreen icon
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round"
|
||||
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"/>
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user