perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

css

Browse Source
This commit is contained in:
FeFeClochette
2026-02-20 16:45:57 +01:00
parent 5ae38e1e4b
commit 730c2a363e
1 changed files with 60 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/family-calendar/family-calendar.css
+60 -20
View File
@@ -824,55 +824,71 @@
8. OPTIMISATIONS MOBILES ET ERGONOMIE (AJOUTS)
========================================================= */
/* --- A. COLONNES MOIS ET SEMAINE FIGÉES (Sticky Left) --- */
/* =========================================================
8. OPTIMISATIONS MOBILES ET ERGONOMIE
========================================================= */
/* 1. Les cellules du corps (td) : Fixées uniquement à gauche */
.col-sticky-mois {
/* --- A. COLONNES MOIS ET SEMAINE FIGÉES (Double Axe Blindé) --- */
/* 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;
min-width: 54px !important;
max-width: 54px !important;
}
/* 2. Fixation horizontale pour les cellules (Valeurs) */
#planningTable tbody td.col-sticky-mois {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 15 !important;
background: white;
background: white !important;
}
.col-sticky-sem {
#planningTable tbody td.col-sticky-sem {
position: -webkit-sticky !important;
position: sticky !important;
left: 52px !important; /* 50px de largeur + 2px de bordure */
z-index: 14 !important; /* Légèrement en dessous du mois en cas de chevauchement */
background: white;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05); /* Ombre pour marquer la fin de la zone figée */
left: 54px !important; /* Exactement la largeur de la colonne Mois */
z-index: 14 !important;
background: white !important;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}
/* 2. Les En-têtes (th) : Fixés en Haut ET à Gauche (Priorité absolue) */
#planningTable thead th.col-sticky-mois {
/* 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, passe au-dessus de TOUT */
z-index: 30 !important; /* Le plus haut niveau possible */
background: var(--bg-header) !important;
}
#planningTable thead th.col-sticky-sem {
#planningTable thead tr th.col-sticky-sem {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
left: 52px !important;
z-index: 29 !important; /* Reste sous la colonne Mois, mais au-dessus du reste du tableau */
left: 54px !important;
z-index: 29 !important; /* Sous Mois, mais au dessus du reste */
background: var(--bg-header) !important;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
}
/* --- B. MENU BOTTOM SHEET (Mobile Uniquement) --- */
@media (max-width: 768px) {
.fc-selection-menu {
position: fixed !important; /* Fixé à l'écran, pas au tableau */
position: fixed !important;
top: auto !important;
left: 0 !important;
bottom: 0 !important;
width: 100% !important;
border-radius: 24px 24px 0 0; /* Bords arrondis en haut */
border-radius: 24px 24px 0 0;
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
padding: 24px 20px;
/* Padding dynamique pour les iPhone (encoche du bas) */
padding-bottom: env(safe-area-inset-bottom, 24px);
transform: translateY(100%); /* Caché en bas par défaut */
transform: translateY(100%);
animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
max-height: 85vh;
overflow-y: auto;
@@ -884,7 +900,6 @@
}
}
/* Optionnel : On grossit un peu les boutons pour les gros doigts */
.fc-menu-btn,
.fc-menu-danger {
padding: 10px;
@@ -892,3 +907,28 @@
font-weight: 600;
}
}
/* --- C. RÉDUCTION DES ICÔNES SUR MOBILE (Nouveau) --- */
@media (max-width: 768px) {
/* Icône Centre (Emoji) */
.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;
}
}