Julien Martin
a57993a90f
Layout mobile complètement repensé avec séparation desktop/mobile : **Layout Desktop (_buildDesktopFields) :** - Champs par paires horizontales (Row avec Expanded) - Code Postal + Ville avec ratio flex 2:5 - Espacement 32px entre lignes - Taille police : 22px labels, 20px input **Layout Mobile (_buildMobileFields) :** - Tous les champs empilés verticalement (Column pure) - Chaque champ prend toute la largeur - Espacement 12px entre champs (compact) - Taille police : 15px labels, 14px input - Hauteur champs réduite : 45px **Nouveau widget CustomNavigationButton :** - Widget réutilisable pour boutons navigation - Enum NavigationButtonStyle (green/purple) - Utilise assets images comme fond - Bouton "Précédent" : fond lavande, texte violet foncé - Bouton "Suivant" : fond vert, texte vert foncé **Boutons mobile :** - Positionnés sous la carte (dans le scroll) - Aligned avec les marges de la carte (5% de chaque côté) - Prennent toute la largeur avec Expanded - Écart de 16px entre les deux - Utilisation de CustomNavigationButton **Optimisations mobile :** - Padding carte réduit : 20px vertical (vs 40px initial) - Toggles compacts (Switch scale 0.85) - Titre : 18px (vs 24px desktop) - Étape : 13px (vs 16px desktop) Référence: #78 Co-authored-by: Cursor <cursoragent@cursor.com>
P'titsPas
Plateforme de gestion de la garde d'enfants pour les collectivités locales.
Workflow de développement
Le projet suit un workflow simple :
develop: branche principale de développementmain: branche des versions stables
Processus de release
- Développement sur la branche
develop - Tests et validation
- Merge vers
mainavec tag de version - Mise à jour du CHANGELOG.md
Charte graphique
- Nom : P'titsPas
- Couleurs principales :
- Bleu : #2B6CB0 (inspiré du logo)
- Blanc : #FFFFFF
- Gris clair : #F7FAFC
- Typographie :
- Titres : Google Fonts "Comfortaa"
- Corps : Google Fonts "Roboto"
Prérequis
Backend
- Node.js (version 18 ou supérieure)
- PostgreSQL (version 15 ou supérieure)
- npm (version 9 ou supérieure)
Frontend
- Flutter SDK (version 3.0 ou supérieure)
- Dart SDK (version 3.0 ou supérieure)
- Chrome (pour le développement web)
Installation
- Cloner le dépôt :
git clone [URL_DU_REPO]
cd ptitspas
git checkout develop
- Installer le backend :
cd backend
npm install
- Installer le frontend :
cd ../frontend
flutter pub get
- Configurer la base de données :
# Créer la base de données
createdb ptitspas
# Configurer les variables d'environnement
cp .env.example .env
# Éditer le fichier .env avec vos paramètres de base de données
Démarrage
- Démarrer le backend :
cd backend
npm run dev
- Démarrer le frontend :
cd frontend
flutter run -d chrome
Accès aux services
- Frontend : http://localhost:8080
- Backend API : http://localhost:3000
- Base de données PostgreSQL : localhost:5432
Structure du projet
ptitspas/
├── backend/ # API Node.js/Express
│ ├── src/ # Code source
│ ├── prisma/ # Configuration de la base de données
│ └── tests/ # Tests
├── frontend/ # Application Flutter
│ ├── lib/ # Code source
│ ├── assets/ # Images, polices, etc.
│ └── test/ # Tests
├── CHANGELOG.md # Historique des versions
└── README.md # Documentation
Développement
Backend
- Langage : TypeScript
- Framework : Express
- Base de données : PostgreSQL avec Prisma
- API : REST avec OpenAPI 3
Frontend
- Framework : Flutter
- État : Provider
- Navigation : Go Router
- UI : Material Design avec thème personnalisé
Tests
# Backend
cd backend
npm test
# Frontend
cd frontend
flutter test
Licence
Propriétaire - Tous droits réservés