# Datepicker bulma-calendar — gabarit compact et alignement filtres (VIIZIA → Neoloop) Ce document décrit **comment VIIZIA** a adapté **bulma-calendar 6.x** (champ factice + panneau) pour qu’il soit **plus compact**, **aligné visuellement** avec les autres champs de filtre, et pour que **l’icône calendrier** ne masque plus le début de la **première date** en mode plage. L’objectif est de **reproduire les mêmes principes sur Neoloop** (ou tout autre écran utilisant le même composant). --- ## 1. Contexte technique | Élément | Détail | |--------|--------| | Bibliothèque | **bulma-calendar** **6.1.18** | | Usage VIIZIA | Liste admin **Transactions** et **tableau de bord** — barre période : onglets (**7j** …) sur la **première ligne** ; **« Période précise »** (plage **Du – Au**) sur la **ligne du dessous** ; champs reliés au formulaire via `form="transaction-list-filters-form"` | | CSS lib | `bulma-calendar.min.css` (CDN jsDelivr) | | JS lib | `bulma-calendar.min.js` | | Init VIIZIA | `public/js/transaction-filters-datepicker.js` — `bulmaCalendar.attach('#txn-date-range', opts)` | | Marquup | `templates/_partials/period_calendar_fields.html.twig` (via `period_tabs` ; `period_calendar_inline` dans `transaction_filters`) | | Surcharges CSS | `public/css/viz-calendar-compact.css` | Référence courte dans le dépôt : [bulma-extensions.md](bulma-extensions.md). --- ## 2. Point critique : ordre de chargement des CSS Les règles par défaut de bulma-calendar utilisent notamment **`font-size: 1rem`** sur le champ factice et des tailles généreuses sur le panneau. Les surcharges **doivent être chargées après** `bulma-calendar.min.css`, sinon elles ne gagnent pas en cascade (sauf `!important` ou spécificité très élevée inutile). **Pattern VIIZIA** : même ordre sur `templates/admin/transaction/index.html.twig` et `templates/default/home.html.twig` lorsque le TDB charge le calendrier. Sur **Neoloop**, reproduire le même ordre : une feuille dédiée type `calendar-compact-overrides.css` (ou équivalent) **juste après** la CSS du datepicker. --- ## 3. DOM utile (bulma-calendar 6.x) Après `attach`, le script enveloppe l’input ciblé. La racine porte en général **le même `id`** que l’input d’origine (ex. `#txn-date-range`). Structure utile pour le style : - **Champ affiché (dummy)** - `.datetimepicker-dummy` — conteneur flex, hauteur souvent **`2.5rem`** en défaut lib - `.datetimepicker-dummy-wrapper` — zone cliquable, **pseudo-élément `::before`** = icône calendrier (mask SVG inline dans la CSS du package) - `.datetimepicker-dummy-input` — un ou deux champs `readonly` (plage) - **Panneau** - `.datetimepicker` — popup (souvent `max-width: 320px` en défaut) - En-tête : `.datetimepicker-header`, `.datetimepicker-selection-day`, etc. - Grille : `.datepicker-nav`, `.datepicker-body`, `.datepicker-days`, `.datepicker-date` - Pied : `.datetimepicker-footer` (`a` / `button` selon version) **Référence défaut icône (extrait utile de la lib)** : `.datetimepicker-dummy-wrapper:before` — position **`absolute`**, **`width` / `height` : ~`1.25rem`**, **`top`** / **`left`** en rem, **`mask`** + **`-webkit-mask`** sur un SVG calendar (inchangés par nos overrides : on ne recopie pas les data-URL). --- ## 4. Objectifs UX / UI des adaptations 1. **Dummy** même « hauteur / densité » que les filtres VOIZIA (ex. **`34px`** de haut, **`12px`** de typo), pas le `2.5rem` + `1rem` par défaut. 2. **Panneau** légèrement réduit (largeur max, en-tête, grille, pied) pour meilleure intégration mobile / desktop. 3. **Icône `::before`** plus petite et **réservation d’espace à gauche** dans le wrapper pour que le **premier jour** du 1ᵉ champ plage ne soit pas recouvert. 4. **Mobile** : largeur utile pour le groupe date + **`max-width`** du popup en `min(..., 100vw - marge)` pour éviter débordement horizontal. --- ## 5. Surcharges détaillées (reproductibles sur Neoloop) Ci-dessous les **réglages VIIZIA** tels que dans `public/css/viz-calendar-compact.css`. Sur Neoloop, **substituer** les sélecteurs `#transaction-list-filters-form`, `#txn-date-range`, `.viz-filters-zone`, `.viz-filter-group--date-range` par **l’equivalent du formulaire / wrapper / groupe** où vit le picker (ou généraliser avec une classe dédiée, ex. `.nl-cal-compact` posée sur le wrapper parent). ### 5.1 Champ factice (dummy) — alignement filtres | Cible | Rôle | Valeurs indicatives VIIZIA | |-------|------|----------------------------| | `.datetimepicker-dummy-wrapper` (sous le groupe date) | Typo, hauteur mini, coins | `font-size: 12px`, `line-height: 1.25`, `min-height: 34px`, `border-radius: 7px` (aligné sur les inputs filtres VOIZIA) | | même + **padding gauche** | Réserver la colonne icône + texte | `padding: 0 10px 0 1.875rem` (pas seulement `0 10px`) | | `.datetimepicker-dummy-input` | Texte des champs Du/Au | `font-size: 12px`, **`text-indent: 0`** (le décalage vient du padding du wrapper ; éviter de cumuler avec l’indent bulma **`1rem`**) | | `.datetimepicker-dummy` | Hauteur forte par défaut | `height: 34px`, `min-height: 34px` (remplace le **`2.5rem`** environ de la lib) | ### 5.2 Icône `::before` / `:before` (calendrier mask) Réduire la boîte de l’icône et la centrer verticalement dans la ligne **`34px`**. À appliquer sur **`.datetimepicker-dummy-wrapper::before`** et **`.datetimepicker-dummy-wrapper:before`** (les deux pour les moteurs / habitudes de préfixage) : | Propriété | Défaut lib (ordre de grandeur) | VIIZIA | |-----------|--------------------------------|--------| | `width` / `height` | ~`1.25rem` | `0.8125rem` | | `top` | ~`.65rem` | `50%` + **`transform: translateY(-50%)`** | | `left` | ~`.75rem` | `0.5625rem` | Ne pas réécrire `content`, `mask` ni `-webkit-mask` : elles restent héritées de la feuille bulma-calendar. ### 5.3 Panneau `.datetimepicker` (compact) Exemples de leviers (ajuster au design Neoloop) : - **Conteneur** : `max-width: 288px`, `font-size: 0.875rem` - **En-tête** : padding et `font-size` réduits ; **jour** `.datetimepicker-selection-day` environ **`1.35rem`** au lieu du **`2rem`** de la lib - **Navigation** `.datepicker-nav` : padding et `font-size` un peu réduits - **Grille** : `.datepicker-body .datepicker-days` en **`0.8125rem`** ; `.datepicker-date` **`padding: 0.2rem`** (avec `!important` si nécessaire pour passer après la lib) - **Pied** : `a` et `button` en **`font-size: 0.8125rem`** et padding vertical légèrement réduit ### 5.4 Media query mobile (≤ 768px) - **Popup** : `max-width: min(288px, calc(100vw - 2rem))` pour rester dans le viewport - **Racine `#txn-date-range` (VIIZIA)** : `flex: 1 1 auto`, `min-width: 0`, `max-width: 100%` pour flex parents - **Groupe ligne date** + **dummy** + **wrapper** : flex / `width: 100%` / `min-width: 0` comme dans `viz-calendar-compact.css` pour éviter débordement en barre de filtres Sur Neoloop, réutiliser la même logique en ciblant l’élément racine après `attach` (même **`id`** que l’input initial si la lib conserve ce comportement). --- ## 6. Options JS alignées Neoloop / VIIZIA Les options passées à `bulmaCalendar.attach` (VIIZIA) sont documentées dans `transaction-filters-datepicker.js` : - `type: 'date'`, `isRange: true`, `dateFormat: 'dd/MM/yyyy'`, `lang: 'fr'`, **`color: 'dark'`**, **`displayMode: 'default'`**, `allowSameDayRange: true` - Labels : `cancelLabel`, `validateLabel`, `todayLabel`, `clearLabel` Les surcharges CSS **ne dépendent pas** de ces options sauf **`isRange`** (deux lignes `.datetimepicker-dummy-input`), ce qui rend le dummy plus sensible au **padding** et à l’**icône** : les règles §5.1–5.2 restent pertinentes. --- ## 7. Checklist de portage Neoloop - [ ] Même **version** bulma-calendar (ou vérifier le DOM / classes si version différente). - [ ] **CSS surcharge après** la CSS officielle du datepicker. - [ ] Remplacer les **sélecteurs** VIIZIA par le **formulaire réel** (ou classe stable sur un ancêtre commun). - [ ] Aligner **hauteur dummy** et **font-size** sur les inputs / selects du même bandeau. - [ ] Appliquer **réduction icône** + **`padding-left`** sur `datetimepicker-dummy-wrapper` + **`text-indent: 0`** sur les inputs dummy. - [ ] Ajuster **`max-width`** du panneau + règles **mobile** si barre de filtres en flex. - [ ] Vérifier en **thème sombre** si Neoloop surcharge les couleurs du picker (ajustements optionnels hors scope de ce doc). --- ## 8. Fichiers de référence dans VIIZIA | Fichier | Rôle | |---------|------| | `public/css/viz-calendar-compact.css` | Toutes les règles compact + icône + mobile | | `templates/admin/transaction/index.html.twig` et `templates/default/home.html.twig` | Ordre des `` (bulma-calendar puis compact) | | `templates/_partials/period_calendar_fields.html.twig` | Input `#txn-date-range`, `data-cal-start` / `data-cal-end`, attribut `form` | | `public/js/transaction-filters-datepicker.js` | `bulmaCalendar.attach`, logique formulaire / plage | | Référence historique Neoloop (commentaire JS) | `neoloop-plateforme/include/engine/javascript/script_date_picker.php` | --- ## 9. Évolution Toute modification visuelle du datepicker côté VIIZIA devrait idéalement être **reportée ici** et **dupliquée ou partagée** avec Neoloop pour garder une expérience homogène entre les deux applicatifs.