From d61422ddbfbe22967f4e43c60a0395bd50ea7297 Mon Sep 17 00:00:00 2001 From: mathis Date: Wed, 26 Aug 2026 00:41:24 +0200 Subject: [PATCH] =?UTF-8?q?RELEASE=20V.1.2.1=20-=20Voici=20les=20fonctionn?= =?UTF-8?q?alit=C3=A9s=20:?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -> Mode sombre (Extended) -> Prise en charge PWA --- src/App.css | 82 ++++++++++++++++++++ src/components/HoraireModal/HoraireModal.jsx | 12 +-- src/dark-mode.css | 23 ++++++ src/pages/horaires/Horaires.css | 14 ++++ 4 files changed, 125 insertions(+), 6 deletions(-) diff --git a/src/App.css b/src/App.css index 506e4f5..8f4339f 100644 --- a/src/App.css +++ b/src/App.css @@ -1113,3 +1113,85 @@ wcs-textarea::part(textarea) { max-width: none !important; } } + +/* ============================================= + RESPONSIVE MODALS (PWA / TABLETTE / MOBILE) + ============================================= */ +@media (max-width: 900px) { + /* Sur tablette, la modale prend plus de place */ + .modal-content { + max-width: 90vw; + max-height: 90vh; + } + .modal-content.modal-small { + max-width: 60vw; + } +} + +@media (max-width: 600px) { + /* Sur mobile, la modale passe en plein écran (façon app native) */ + .modal-overlay { + padding: 0 !important; + align-items: flex-end; + } + + .modal-content, + .modal-content.modal-small, + .modal-large, + .modal-xlarge { + width: 100vw !important; + max-width: 100vw !important; + height: 100vh !important; + max-height: 100vh !important; + border-radius: 0 !important; + display: flex; + flex-direction: column; + padding-top: env(safe-area-inset-top); + overflow: hidden !important; /* Empêche le conteneur principal de scroller */ + } + + .modal-header { + padding: 16px; + background: #fff; + z-index: 10; + /* Plus besoin de sticky, le layout flex s'en charge */ + } + + .modal-body { + flex: 1; + overflow-y: auto; + padding: 16px; + -webkit-overflow-scrolling: touch; + } + + /* Rendre les onglets collants en dessous du header si présents */ + .gares-modal-tabs { + position: sticky; + top: 0; + background: #fff; + z-index: 5; + } + + .modal-footer { + padding: 16px; + padding-bottom: calc(16px + env(safe-area-inset-bottom)); + background: #fff; + z-index: 10; + flex-direction: column-reverse; /* Boutons de validation en haut, annulation en bas */ + gap: 8px; + border-top: 1px solid #e5e7eb; + display: flex; + } + + .modal-footer wcs-button { + width: 100%; + margin: 0 !important; + } +} + +/* ============================================= + Z-INDEX FIX (Empêche le AppHeader de passer au-dessus des modales) + ============================================= */ +body:has(.modal-overlay) .app-header-shell { + z-index: 1 !important; +} diff --git a/src/components/HoraireModal/HoraireModal.jsx b/src/components/HoraireModal/HoraireModal.jsx index 996a2e3..538bcb0 100644 --- a/src/components/HoraireModal/HoraireModal.jsx +++ b/src/components/HoraireModal/HoraireModal.jsx @@ -386,9 +386,9 @@ const handleSave = async () => { } } - const INP = { width: '100%', padding: '9px 12px', border: '1px solid #d1d5db', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', outline: 'none', fontFamily: 'inherit' }; - const LBL = { display: 'block', fontWeight: 600, fontSize: 13, color: '#374151', marginBottom: 6 }; - const SEC = { fontSize: 13, fontWeight: 700, color: '#374151', textTransform: 'uppercase', letterSpacing: '0.06em', margin: '20px 0 12px', paddingBottom: 6, borderBottom: '1px solid #e5e7eb' }; + const INP = { width: '100%', padding: '9px 12px', border: '1px solid var(--wcs-gray-300, #d1d5db)', borderRadius: 6, fontSize: 14, boxSizing: 'border-box', outline: 'none', fontFamily: 'inherit', background: 'inherit', color: 'inherit' }; + const LBL = { display: 'block', fontWeight: 600, fontSize: 13, color: 'inherit', marginBottom: 6 }; + const SEC = { fontSize: 13, fontWeight: 700, color: 'inherit', textTransform: 'uppercase', letterSpacing: '0.06em', margin: '20px 0 12px', paddingBottom: 6, borderBottom: '1px solid var(--wcs-gray-200, #e5e7eb)' }; const TABS = ['general', 'gares', 'jours', 'materiel', 'substitution']; const TAB_LABELS = { general: 'Général', gares: 'Gares desservies', jours: 'Calendrier de circulation', materiel: 'Matériel roulant', substitution: 'Substitution' }; @@ -795,12 +795,12 @@ const handleSave = async () => {
{['general', 'gares', 'jours', 'materiel', 'substitution'].map(t => ( -
- - +
diff --git a/src/dark-mode.css b/src/dark-mode.css index 6f1b102..eaf0767 100644 --- a/src/dark-mode.css +++ b/src/dark-mode.css @@ -171,6 +171,29 @@ body.dark-mode wcs-tab { color: #e0e0e0 !important; } +/* Modales et Tabs personnalisées en Dark Mode */ +body.dark-mode .horaires-modal-tabs, +body.dark-mode .gares-modal-tabs { + background-color: #1e1e1e !important; + border-bottom-color: #333 !important; +} + +body.dark-mode .horaires-modal-tab-btn, +body.dark-mode .gares-modal-tab { + color: #a0a0a0 !important; +} + +body.dark-mode .horaires-modal-tab-btn.is-active, +body.dark-mode .gares-modal-tab.active { + background-color: #2a2a2a !important; + color: #fff !important; + border-bottom-color: #0284c7 !important; +} + +body.dark-mode .horaires-modal-body { + background: #1e1e1e !important; +} + body.dark-mode .station-type-badge.ville { background: #1e3a8a; color: #bfdbfe; diff --git a/src/pages/horaires/Horaires.css b/src/pages/horaires/Horaires.css index 470257f..5f9d4d0 100644 --- a/src/pages/horaires/Horaires.css +++ b/src/pages/horaires/Horaires.css @@ -501,6 +501,18 @@ background: #eef6ff; padding: 8px 10px 0; flex-shrink: 0; + overflow-x: auto; + white-space: nowrap; + -webkit-overflow-scrolling: touch; +} + +/* Hide scrollbar for a cleaner look */ +.horaires-modal-tabs::-webkit-scrollbar { + display: none; +} +.horaires-modal-tabs { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } .horaires-modal-tabs-alt { @@ -517,6 +529,8 @@ font-weight: 500; border-bottom: 3px solid transparent; transition: all 0.2s ease; + flex-shrink: 0; + white-space: nowrap; } .horaires-modal-tab-btn.is-active {