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

Uniformisation body : data-page au lieu de classes par page
Deploy HouseHub / deploy (push) Successful in 2s
Details

Browse Source 
- <body data-page="pageName"> uniforme sur toutes les pages
- <main> reçoit la classe module via $mainClass (pas le body)
- home.css : body.pf-home → body[data-page="home"]
- family-calendar.css : .pf-family-calendar .pf-main → .pf-family-calendar.pf-main
- dark-mode.css : mise à jour références body.pf-home

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-12 10:36:17 +02:00
co-authored by Claude Sonnet 4.6
parent 63d71ab7e4
commit 1e43f4bdc1
8 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dark-mode.css
+6 -6
View File
@@ -5,22 +5,22 @@
/* ─── HOME PAGE ─────────────────────────────────────────────────────────────── */ /* ─── HOME PAGE ─────────────────────────────────────────────────────────────── */
/* Le header home.css a plus de spécificité que global.css → on le force ici */ /* Le header home.css a plus de spécificité que global.css → on le force ici */
[data-theme="dark"] body.pf-home .pf-header { [data-theme="dark"] body[data-page="home"] .pf-header {
background: rgba(13,17,23,.92) !important; background: rgba(13,17,23,.92) !important;
border-color: rgba(48,54,61,.6) !important; border-color: rgba(48,54,61,.6) !important;
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
} }
[data-theme="dark"] body.pf-home .pf-module-card { [data-theme="dark"] body[data-page="home"] .pf-module-card {
background: rgba(22,27,34,.92) !important; background: rgba(22,27,34,.92) !important;
border: 1px solid var(--border-light) !important; border: 1px solid var(--border-light) !important;
box-shadow: 0 4px 15px rgba(0,0,0,.4) !important; box-shadow: 0 4px 15px rgba(0,0,0,.4) !important;
} }
[data-theme="dark"] body.pf-home .pf-module-card:hover { [data-theme="dark"] body[data-page="home"] .pf-module-card:hover {
border-color: var(--primary) !important; border-color: var(--primary) !important;
} }
[data-theme="dark"] body.pf-home .pf-card-title { color: var(--text-main); } [data-theme="dark"] body[data-page="home"] .pf-card-title { color: var(--text-main); }
[data-theme="dark"] body.pf-home .pf-card-desc { color: var(--text-muted); } [data-theme="dark"] body[data-page="home"] .pf-card-desc { color: var(--text-muted); }
[data-theme="dark"] body.pf-home .pf-card-cta { color: var(--primary); } [data-theme="dark"] body[data-page="home"] .pf-card-cta { color: var(--primary); }
/* ─── SHARED / GLOBAL PATTERNS ──────────────────────────────────────────────── */ /* ─── SHARED / GLOBAL PATTERNS ──────────────────────────────────────────────── */
[data-theme="dark"] .pf-card { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; } [data-theme="dark"] .pf-card { background: var(--bg-panel) !important; border-color: var(--border-light) !important; color: var(--text-main) !important; }
family-calendar.php
+1 -1
View File
@@ -10,7 +10,7 @@ require_once __DIR__ . '/includes/i18n.php';
$pageTitle = tr('fc_page_title'); $pageTitle = tr('fc_page_title');
$activePage = "family-calendar"; $activePage = "family-calendar";
$bodyClass = "pf-family-calendar"; $mainClass = "pf-family-calendar";
$pageCss = "/modules/family-calendar/family-calendar.css"; $pageCss = "/modules/family-calendar/family-calendar.css";
require __DIR__ . '/header.php'; require __DIR__ . '/header.php';
gift-list.php
+1 -1
View File
@@ -12,7 +12,7 @@ if (session_status() === PHP_SESSION_NONE) { session_start(); }
$year = (int)date('Y'); $year = (int)date('Y');
$pageTitle = tr('gift_page_title'); $pageTitle = tr('gift_page_title');
$activePage = "gift-list"; $activePage = "gift-list";
$bodyClass = "pf-gift-list"; $mainClass = "pf-gift-list";
$pageCss = "/modules/gift-list/gift-list.css"; $pageCss = "/modules/gift-list/gift-list.css";
$children = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim']; $children = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim'];
header.php
+2 -2
View File
@@ -39,7 +39,7 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
} }
</style> </style>
</head> </head>
<body class="<?= htmlspecialchars($bodyClass ?? '') ?>"> <body data-page="<?= htmlspecialchars($activePage ?? '') ?>">
<header class="pf-header"> <header class="pf-header">
<a href="/index.php" class="pf-logo">HouseHub</a> <a href="/index.php" class="pf-logo">HouseHub</a>
@@ -107,7 +107,7 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
</div> </div>
<?php endif; ?> <?php endif; ?>
<main class="pf-main"> <main class="pf-main<?= ($mainClass ?? '') ? ' '.htmlspecialchars($mainClass) : '' ?>">
<script> <script>
/** /**
holidays.php
+1 -1
View File
@@ -17,7 +17,7 @@ $pageTitle = ($tab === 'holiday_detail')
: tr('hdl_title_list'); : tr('hdl_title_list');
$activePage = "holidays"; $activePage = "holidays";
$bodyClass = "pf-holidays"; $mainClass = "pf-holidays";
$pageCss = "/modules/holidays/holidays.css"; $pageCss = "/modules/holidays/holidays.css";
require __DIR__ . '/header.php'; require __DIR__ . '/header.php';
index.php
+2 -2
View File
@@ -11,7 +11,7 @@ require_once __DIR__ . '/includes/i18n.php';
// Configuration de la page // Configuration de la page
$pageTitle = tr('home_title'); $pageTitle = tr('home_title');
$activePage = "home"; $activePage = "home";
$bodyClass = "pf-home"; // Important pour l'image de fond définie dans home.css // background géré par home.css via body[data-page="home"]
$pageCss = "/modules/home/home.css"; $pageCss = "/modules/home/home.css";
require __DIR__ . '/header.php'; require __DIR__ . '/header.php';
@@ -23,7 +23,7 @@ if ($_fid) {
foreach (glob('/uploads/home_bg_' . $_fid . '.*') as $_f) { $_has_custom_bg = true; break; } foreach (glob('/uploads/home_bg_' . $_fid . '.*') as $_f) { $_has_custom_bg = true; break; }
} }
if ($_has_custom_bg): ?> if ($_has_custom_bg): ?>
<style>body.pf-home { background-image: url('/home-bg.php?v=<?= filemtime($_f) ?>'); }</style> <style>body[data-page="home"] { background-image: url('/home-bg.php?v=<?= filemtime($_f) ?>'); }</style>
<?php endif; ?> <?php endif; ?>
<div class="pf-container"> <div class="pf-container">
modules/home/home.css
+14 -14
View File
@@ -1,7 +1,7 @@
/* modules/home/home.css */ /* modules/home/home.css */
/* === 1. CONFIGURATION DU FOND & DU BODY === */ /* === 1. CONFIGURATION DU FOND & DU BODY === */
body.pf-home { body[data-page="home"] {
/* Image de fond desktop */ /* Image de fond desktop */
background-image: url("/modules/home/assets/img/background.jpg"); background-image: url("/modules/home/assets/img/background.jpg");
background-size: cover; background-size: cover;
@@ -14,7 +14,7 @@ body.pf-home {
} }
/* Voile sombre pour garantir la lisibilité du texte blanc */ /* Voile sombre pour garantir la lisibilité du texte blanc */
body.pf-home::before { body[data-page="home"]::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
@@ -23,7 +23,7 @@ body.pf-home::before {
} }
/* === 2. HEADER SPÉCIFIQUE (Translucide) === */ /* === 2. HEADER SPÉCIFIQUE (Translucide) === */
body.pf-home .pf-header { body[data-page="home"] .pf-header {
background: rgba(36, 59, 83, 0.85); /* Ton ancien bleu sombre */ background: rgba(36, 59, 83, 0.85); /* Ton ancien bleu sombre */
backdrop-filter: blur(8px); /* Effet verre dépoli */ backdrop-filter: blur(8px); /* Effet verre dépoli */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -31,33 +31,33 @@ body.pf-home .pf-header {
} }
/* Adaptation des couleurs des liens du header sur fond sombre */ /* Adaptation des couleurs des liens du header sur fond sombre */
body.pf-home .pf-logo { body[data-page="home"] .pf-logo {
color: #ffffff; color: #ffffff;
} }
body.pf-home .pf-burger-btn { body[data-page="home"] .pf-burger-btn {
color: #ffffff; color: #ffffff;
} }
body.pf-home .pf-nav-link { body[data-page="home"] .pf-nav-link {
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
} }
body.pf-home .pf-nav-link:hover { body[data-page="home"] .pf-nav-link:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
color: #ffffff; color: #ffffff;
} }
body.pf-home .pf-nav-link--active { body[data-page="home"] .pf-nav-link--active {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
color: #243b53; /* Texte foncé sur fond blanc */ color: #243b53; /* Texte foncé sur fond blanc */
} }
/* Badge utilisateur */ /* Badge utilisateur */
body.pf-home .pf-user-badge { body[data-page="home"] .pf-user-badge {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
body.pf-home .pf-logout-btn { body[data-page="home"] .pf-logout-btn {
color: #fca5a5; color: #fca5a5;
} /* Rouge clair */ } /* Rouge clair */
body.pf-home .pf-logout-btn:hover { body[data-page="home"] .pf-logout-btn:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-color: #fca5a5; border-color: #fca5a5;
} }
@@ -86,7 +86,7 @@ body.pf-home .pf-logout-btn:hover {
/* === 4. GRILLE DES MODULES === */ /* === 4. GRILLE DES MODULES === */
/* Titre de section "Modules" */ /* Titre de section "Modules" */
body.pf-home .pf-modules-grid { body[data-page="home"] .pf-modules-grid {
/* On ajoute un titre visuel ou on espace simplement */ /* On ajoute un titre visuel ou on espace simplement */
margin-top: 20px; margin-top: 20px;
} }
@@ -115,7 +115,7 @@ body.pf-home .pf-modules-grid {
/* === 5. MOBILE RESPONSIVE === */ /* === 5. MOBILE RESPONSIVE === */
@media (max-width: 768px) { @media (max-width: 768px) {
body.pf-home { body[data-page="home"] {
/* Image spécifique mobile */ /* Image spécifique mobile */
background-image: url("/modules/home/assets/img/background_m.jpg"); background-image: url("/modules/home/assets/img/background_m.jpg");
background-attachment: scroll; /* Fixed bug souvent sur mobile, scroll est mieux */ background-attachment: scroll; /* Fixed bug souvent sur mobile, scroll est mieux */
@@ -133,7 +133,7 @@ body.pf-home .pf-modules-grid {
} }
/* Ajustement header mobile */ /* Ajustement header mobile */
body.pf-home .pf-header { body[data-page="home"] .pf-header {
padding: 0 16px; padding: 0 16px;
} }
} }