diff --git a/modules/family-calendar/family-calendar.css b/modules/family-calendar/family-calendar.css index 0e05bfb..047e153 100644 --- a/modules/family-calendar/family-calendar.css +++ b/modules/family-calendar/family-calendar.css @@ -17,11 +17,11 @@ --c-selected: #bfdbfe; /* NOUVELLES COULEURS (Neutres) */ - --bg-alex: #f0fdfa; /* Teal très pâle */ - --text-alex: #0f766e; /* Teal foncé */ + --bg-alex: #f0fdfa; + --text-alex: #0f766e; - --bg-laia: #fffbeb; /* Jaune/Ambre très pâle */ - --text-laia: #b45309; /* Ambre foncé */ + --bg-laia: #fffbeb; + --text-laia: #b45309; } *, @@ -77,7 +77,7 @@ .pf-btn-icon-text { background: white; border: 1px solid var(--border-color); - border-radius: 20px; /* Pill */ + border-radius: 20px; padding: 8px 16px; display: inline-flex; align-items: center; @@ -100,7 +100,6 @@ } /* --- 3. PLANNING HEBDO --- */ - .fc-week-header { display: flex; align-items: center; @@ -134,9 +133,12 @@ letter-spacing: -0.02em; } +/* WRAPPER OPTIMISÉ POUR LE SCROLL */ #planningTable-wrapper { max-height: 80vh; - overflow: auto; + overflow-x: auto; + overflow-y: auto; + -webkit-overflow-scrolling: touch; /* Scroll fluide sur iOS */ border: 1px solid var(--border-color); border-radius: 12px; background: white; @@ -144,8 +146,26 @@ position: relative; } +/* Scrollbar personnalisée pour qu'elle soit toujours visible */ +#planningTable-wrapper::-webkit-scrollbar { + height: 8px; + width: 8px; +} +#planningTable-wrapper::-webkit-scrollbar-track { + background: #f1f5f9; + border-radius: 4px; +} +#planningTable-wrapper::-webkit-scrollbar-thumb { + background: #cbd5e1; + border-radius: 4px; +} +#planningTable-wrapper::-webkit-scrollbar-thumb:hover { + background: #94a3b8; +} + #planningTable { width: 100%; + min-width: 1000px; border-collapse: separate; border-spacing: 0; table-layout: fixed; @@ -241,7 +261,6 @@ font-size: 12px; line-height: 1; } - .fc-day--avis::after { content: ""; position: absolute; @@ -281,15 +300,15 @@ border-right: 2px solid var(--border-color) !important; } .col-day { - width: 40px; + width: auto !important; border-right: 2px solid var(--border-color) !important; } -.col-total { - width: 30px; -} +.col-total, .col-alex-sub, .col-laia-sub { - width: 35px; + width: 32px !important; + min-width: 32px !important; + max-width: 32px !important; } .rotated-text span { @@ -300,7 +319,7 @@ color: var(--text-muted); } -/* --- 4. CALENDRIER MENSUEL (MODERNISÉ) --- */ +/* --- 4. CALENDRIER MENSUEL --- */ .fc-month-calendar-wrapper { background: white; border: 1px solid var(--border-color); @@ -319,7 +338,6 @@ gap: 16px; } -/* Navigation Flèches */ .fc-nav-controls { display: flex; align-items: center; @@ -347,7 +365,6 @@ transform: translateY(-1px); } -/* Titre Mois */ #fc-current-month-year { margin: 0; font-size: 1.25rem; @@ -359,7 +376,6 @@ letter-spacing: -0.02em; } -/* Boutons Vue (Segmented) */ .fc-view-controls { display: inline-flex; background: #e2e8f0; @@ -389,13 +405,14 @@ font-weight: 700; } -/* Table Mensuelle */ .fc-month-calendar { width: 100%; display: block; + overflow-x: auto; } .fc-month-table { width: 100%; + min-width: 500px; border-collapse: collapse; table-layout: fixed; } @@ -419,12 +436,12 @@ background: #fcfcfc; } -/* Grilles Vues */ .fc-two-months-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; + overflow-x: auto; } .fc-year-container { display: grid; @@ -457,7 +474,6 @@ gap: 24px; align-items: start; } - .pf-card { background: white; border: 1px solid var(--border-color); @@ -466,15 +482,12 @@ overflow: hidden; } -/* Légende Badge Style */ - .pf-legend-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; } - .pf-legend-item { display: inline-flex; align-items: center; @@ -497,7 +510,6 @@ line-height: 1; } -/* Couleurs & Contenus Légende */ .fc-legend-school-holiday { background: var(--c-school-holiday); } @@ -510,31 +522,25 @@ .fc-legend-extra-off-carole { background: var(--c-extra-off); } - -/* Légende : Emojis */ .fc-legend-centre { background: white; } .fc-legend-centre::after { content: "🏫"; } - .fc-legend-pep-sick { background: white; } .fc-legend-pep-sick::after { content: "🤒"; } - -/* Légende : Icone SVG Avis */ .fc-legend-avis { background: white url("/modules/family-calendar/assets/img/avis.svg") no-repeat center center; background-size: contain; - border: none; /* Pas de bordure pour le SVG propre */ + border: none; } -/* Récapitulatif Vertical */ .fc-summary-vertical { display: flex; flex-direction: column; @@ -560,53 +566,32 @@ font-weight: 700; color: var(--text-main); } -.fc-summary-sub { - font-size: 0.75rem; - color: #94a3b8; - margin-left: 8px; - font-style: italic; -} -/* --- CONTROLES RÉCAPITULATIF --- */ - -/* On transforme le titre de la card en Flexbox pour y mettre les boutons */ .fc-summary-header { display: flex; justify-content: space-between; align-items: center; - padding: 8px 16px; /* Un peu plus compact verticalement */ + padding: 8px 16px; } - .fc-summary-controls { display: flex; gap: 8px; } - .fc-summ-select { background: white; border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 8px; - font-size: 0.75rem; /* Petit texte */ + font-size: 0.75rem; color: var(--text-main); cursor: pointer; outline: none; height: 24px; } - .fc-summ-select:hover { border-color: var(--primary); } -/* Ajustement mobile pour les sélecteurs */ -@media (max-width: 768px) { - .fc-summary-header { - flex-direction: column; - align-items: flex-start; - gap: 8px; - } -} - /* --- 6. MODALE VACANCES --- */ .fc-modal-overlay { position: fixed; @@ -669,7 +654,6 @@ overflow-y: auto; } -/* Table Modale */ .fc-holidays-table { width: 100%; border-collapse: collapse; @@ -713,7 +697,7 @@ } } -/* --- MENU CONTEXTUEL COMPACT ET UNIFORMISÉ (DNA Holidays) --- */ +/* --- MENU CONTEXTUEL COMPACT --- */ .fc-selection-menu { position: absolute; z-index: 9999; @@ -724,8 +708,8 @@ 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border-radius: 16px; - padding: 10px 12px; /* Base compact */ - min-width: 220px; /* Base compact */ + padding: 10px 12px; + min-width: 220px; display: none; animation: menuPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: top center; @@ -743,7 +727,7 @@ } .fc-menu-section { - padding: 6px 0; /* Compact */ + padding: 6px 0; border-bottom: 1px dashed #cbd5e1; } .fc-menu-section:first-child { @@ -753,45 +737,39 @@ border: none; padding-bottom: 0; } - .fc-menu-header { - /* Compact header */ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 4px; + margin-bottom: 6px; } - .fc-menu-section strong { display: block; - font-size: 0.7rem; /* Base compact */ + font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #64748b; - margin-bottom: 0 !important; /* Retire l'ancienne marge */ + margin-bottom: 0 !important; } - .fc-menu-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 4px; /* Base compact */ + gap: 4px; } - .fc-menu-btn { background: white; border: 1px solid #e2e8f0; color: #1e293b; - padding: 6px 8px; /* Base compact */ + padding: 6px 8px; border-radius: 8px; - font-size: 0.8rem; /* Base compact */ + font-size: 0.8rem; font-weight: 600; cursor: pointer; width: 100%; transition: all 0.2s ease; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } - .fc-menu-btn:hover { background: #f8fafc; border-color: #3b82f6; @@ -799,8 +777,6 @@ transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.15); } - -/* Style des icônes de suppression unifiées */ .fc-menu-clear-icon { background: transparent; border: none; @@ -813,120 +789,56 @@ border-radius: 6px; transition: all 0.2s ease; } - .fc-menu-clear-icon svg { width: 14px; height: 14px; } - .fc-menu-clear-icon:hover { background: #fef2f2; color: #dc2626; } -/* --- TABLEAU DES CONGÉS ENFANTS --- */ .fc-menu-leaves-table table { width: 100%; - border-spacing: 2px; /* Base compact */ + border-spacing: 2px; border-collapse: separate; } .fc-menu-leaves-table th { - font-size: 0.7rem; /* Base compact */ + font-size: 0.7rem; font-weight: 700; color: #64748b; - padding-bottom: 2px; /* Base compact */ + padding-bottom: 2px; text-align: center; } .fc-menu-leaves-table td { padding: 0; } - -/* Aligner le nom et l'icône sur une ligne (Inline) */ .fc-th-inline { display: flex; - flex-direction: row; /* Alignement horizontal */ + flex-direction: row; align-items: center; justify-content: center; - gap: 4px; /* Petit espace entre le nom et la poubelle */ -} - -/* --- VERSION MOBILE COMPACTE --- */ -@media (max-width: 768px) { - .fc-selection-menu { - position: fixed !important; - top: auto !important; - bottom: 0 !important; - left: 0 !important; - width: 100% !important; - border-radius: 24px 24px 0 0; - border: none; - border-top: 1px solid rgba(226, 232, 240, 0.8); - box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); - padding: 12px 16px; /* Compact mobile */ - padding-bottom: calc( - 12px + env(safe-area-inset-bottom) - ); /* Compact mobile */ - max-height: 85vh; - overflow-y: auto; - animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; - transform-origin: bottom center; - } - - .fc-selection-menu::before { - content: ""; - display: block; - width: 40px; - height: 5px; - background: #cbd5e1; - border-radius: 10px; - margin: 0 auto 10px auto; /* Compact mobile */ - } - - @keyframes slideUpSheet { - from { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - .fc-menu-btn { - padding: 8px; /* Compact mobile */ - font-size: 0.85rem; /* Compact mobile */ - } + gap: 4px; } /* --- SUPERPOSITION : GARDE/CONGÉS + VACANCES SCOLAIRES --- */ - -/* 1. OFF CAROLE + VACANCES - On force le fond orange/pêche, et on met la barre violette en bas */ .fc-day--off-carole.fc-day--school-holiday { background: var(--c-off-carole) !important; box-shadow: inset 0 -8px 0 0 var(--c-school-holiday) !important; } - -/* 2. EXTRA OFF CAROLE + VACANCES - On force le fond rouge clair, et on met la barre violette en bas */ .fc-day--extra-off-carole.fc-day--school-holiday { background: var(--c-extra-off) !important; box-shadow: inset 0 -8px 0 0 var(--c-school-holiday) !important; } - -/* 3. CENTRE / AVIS + VACANCES - Comme ce sont juste des icônes sur fond normal, on se contente d'ajouter la barre violette */ .fc-day--centre.fc-day--school-holiday, .fc-day--avis.fc-day--school-holiday { box-shadow: inset 0 -8px 0 0 var(--c-school-holiday) !important; } /* ========================================================= - 8. OPTIMISATIONS MOBILES ET ERGONOMIE + 8. FIXATION DES COLONNES (STICKY) POUR SCROLL FLUIDE ========================================================= */ -/* 1. On force une largeur stricte pour éviter le décalage de la 2ème colonne */ .col-month { box-sizing: border-box !important; width: 54px !important; @@ -934,7 +846,6 @@ max-width: 54px !important; } -/* 2. Fixation horizontale pour les cellules (Valeurs) */ #planningTable tbody td.col-sticky-mois { position: -webkit-sticky !important; position: sticky !important; @@ -946,19 +857,18 @@ #planningTable tbody td.col-sticky-sem { position: -webkit-sticky !important; position: sticky !important; - left: 54px !important; /* Exactement la largeur de la colonne Mois */ + left: 54px !important; z-index: 14 !important; background: white !important; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); + box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1); /* Ombre renforcée pour montrer le scroll */ } -/* 3. Fixation 2D (Haut + Gauche) ultra prioritaire pour les En-têtes */ #planningTable thead tr th.col-sticky-mois { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; left: 0 !important; - z-index: 30 !important; /* Le plus haut niveau possible */ + z-index: 30 !important; background: var(--bg-header) !important; } @@ -967,13 +877,48 @@ position: sticky !important; top: 0 !important; left: 54px !important; - z-index: 29 !important; /* Sous Mois, mais au dessus du reste */ + z-index: 29 !important; background: var(--bg-header) !important; - box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); + box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.1); /* Ombre renforcée */ } -/* --- B. MENU BOTTOM SHEET (Mobile Uniquement) --- */ +/* ========================================================= + 9. OPTIMISATIONS MOBILES STRICTES (max-width: 768px) + ========================================================= */ + @media (max-width: 768px) { + /* Plein écran (Full Bleed) pour le tableau sur mobile */ + .pf-family-calendar .pf-container { + padding: 0 !important; /* Retire le padding de la page */ + } + + #planningTable-wrapper { + border-radius: 0; + border-left: none; + border-right: none; + margin-bottom: 0; + } + + /* Ajustements des panneaux du bas */ + .fc-bottom-grid { + grid-template-columns: 1fr; + } + + .fc-two-months-container { + grid-template-columns: 1fr; + } + + .fc-year-container { + grid-template-columns: 1fr; + } + + .fc-summary-header { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } + + /* Modale Bottom Sheet */ .fc-selection-menu { position: fixed !important; top: auto !important; @@ -996,95 +941,37 @@ } } + .fc-selection-menu::before { + content: ""; + display: block; + width: 40px; + height: 5px; + background: #cbd5e1; + border-radius: 10px; + margin: 0 auto 10px auto; + } + .fc-menu-btn { padding: 10px; font-size: 0.95rem; font-weight: 600; } -} -/* --- C. RÉDUCTION DES ICÔNES SUR MOBILE (Nouveau) --- */ -@media (max-width: 768px) { - /* Icône Centre (Emoji) */ + /* Réduction des icônes pour gagner de la place */ .fc-day--centre::after { font-size: 9px !important; top: 1px !important; right: 1px !important; } - - /* Icône Avis (SVG) */ .fc-day--avis::after { width: 10px !important; height: 10px !important; top: 1px !important; right: 1px !important; } - - /* Icône Pep Malade (Emoji) */ .fc-pep-sick-emoji { font-size: 9px !important; bottom: 1px !important; right: 1px !important; } } - -/* --- ALIGNEMENT DES EN-TÊTES DU MENU --- */ -.fc-menu-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 6px; -} - -.fc-menu-header strong { - margin-bottom: 0 !important; /* Retire l'ancienne marge du bas */ -} - -/* Style de l'icône Poubelle */ -.fc-menu-clear-icon { - background: transparent; - border: none; - color: #94a3b8; /* Gris discret par défaut */ - cursor: pointer; - padding: 4px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 6px; - transition: all 0.2s ease; -} - -.fc-menu-clear-icon svg { - width: 14px; - height: 14px; -} - -/* Survol de la poubelle : devient rouge clair */ -.fc-menu-clear-icon:hover { - background: #fef2f2; - color: #dc2626; -} - -.fc-th-stack { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; - padding-bottom: 4px; -} - -.fc-menu-btn-mini-clear { - background: #f1f5f9; - border: 1px solid #cbd5e1; - border-radius: 4px; - font-size: 10px; - padding: 2px 4px; - cursor: pointer; - transition: all 0.2s; -} - -.fc-menu-btn-mini-clear:hover { - background: #fee2e2; - border-color: #fca5a5; - transform: scale(1.1); -}