christmas
This commit is contained in:
+236
-134
@@ -1,163 +1,174 @@
|
|||||||
<?php
|
<?php
|
||||||
|
// christmas-list.php
|
||||||
|
|
||||||
// Protection : nécessite d'être connecté
|
// Protection : nécessite d'être connecté
|
||||||
require __DIR__ . '/includes/auth.php';
|
require __DIR__ . '/includes/auth.php';
|
||||||
require_login();
|
require_login('/login.php');
|
||||||
|
|
||||||
|
|
||||||
// Connexion DB
|
// Connexion DB
|
||||||
require __DIR__ . '/includes/db.php';
|
require __DIR__ . '/includes/db.php';
|
||||||
|
|
||||||
// Config page
|
// Config page
|
||||||
$pageTitle = "PachaFamily - Christmas list";
|
$pageTitle = "PachaFamily - Llista de regals";
|
||||||
$activePage = "christmas-list";
|
$activePage = "christmas-list";
|
||||||
$bodyClass = "pf-christmas-list";
|
$bodyClass = "pf-christmas-list";
|
||||||
$pageCss = "/modules/christmas-list/christmas-list.css";
|
$pageCss = "/modules/christmas-list/christmas-list.css";
|
||||||
|
|
||||||
require __DIR__ . '/header.php';
|
require __DIR__ . '/header.php';
|
||||||
|
|
||||||
// Constantes
|
// Constantes “théoriques” pour la grille
|
||||||
$year = (int)date('Y');
|
$year = (int)date('Y');
|
||||||
$adults = ['Laia', 'Laura', 'Avi Iaia'];
|
$adults = ['Laia', 'Laura', 'Avi Iaia'];
|
||||||
$children = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim'];
|
$children = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim'];
|
||||||
|
|
||||||
$occasions = [
|
// IMPORTANT : aligner les codes avec ta BDD (enum('TIO','NOEL','ROIS'))
|
||||||
'TIO' => 'Tió',
|
$allOccasionLabels = [
|
||||||
'NADAL' => 'Nadal',
|
'TIO' => 'Tió',
|
||||||
'REIS' => 'Reis',
|
'NOEL' => 'Nadal',
|
||||||
|
'ROIS' => 'Reis',
|
||||||
];
|
];
|
||||||
|
|
||||||
// Récup données
|
// Récup toutes les données pour l’année
|
||||||
$stmt = $pdo->prepare("
|
$stmt = $pdo->prepare("
|
||||||
SELECT *
|
SELECT *
|
||||||
FROM pf_christmas_gifts
|
FROM pf_christmas_gifts
|
||||||
WHERE year = :year
|
WHERE year = :year
|
||||||
|
ORDER BY adult_name, child_name, occasion, created_at
|
||||||
");
|
");
|
||||||
$stmt->execute(['year' => $year]);
|
$stmt->execute(['year' => $year]);
|
||||||
$gifts = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
$gifts = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
// Indexer par [adult][child][occasion]
|
// Si aucune donnée, on évite les notices plus bas
|
||||||
$byAdult = [];
|
if (!$gifts) {
|
||||||
|
$gifts = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1) Indexer par [occasion][child][adult] pour l'affichage par fête
|
||||||
|
$byOccasion = []; // [occasion][child][adult][] = gifts
|
||||||
foreach ($gifts as $gift) {
|
foreach ($gifts as $gift) {
|
||||||
$a = $gift['adult_name'];
|
|
||||||
$c = $gift['child_name'];
|
|
||||||
$o = $gift['occasion'];
|
$o = $gift['occasion'];
|
||||||
$byAdult[$a][$c][$o][] = $gift;
|
$c = $gift['child_name'];
|
||||||
|
$a = $gift['adult_name'];
|
||||||
|
$byOccasion[$o][$c][$a][] = $gift;
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="pf-container">
|
<div class="pf-container">
|
||||||
<h1>Christmas list <?= htmlspecialchars($year) ?></h1>
|
<h1>Llista de regals <?= htmlspecialchars($year) ?></h1>
|
||||||
<p>Visió sintètica dels regals per adult, infant i festa. Afegeix nous regals amb el botó “+”.</p>
|
|
||||||
|
|
||||||
|
<!-- =============================================================== -->
|
||||||
|
<!-- VUE TABLEAU PAR FÊTE : mini-tableaux par enfant (totaux en tête) -->
|
||||||
|
<!-- =============================================================== -->
|
||||||
<section class="pf-section pf-section--panel">
|
<section class="pf-section pf-section--panel">
|
||||||
<div class="cl-grid-wrapper">
|
<h2>Vista per festa</h2>
|
||||||
<table class="pf-table cl-grid-table">
|
|
||||||
<thead>
|
|
||||||
<!-- Ligne 1 : cellule vide + noms des enfants (colspan=3) -->
|
|
||||||
<tr>
|
|
||||||
<th></th>
|
|
||||||
<?php foreach ($children as $child): ?>
|
|
||||||
<th colspan="<?= count($occasions) ?>" class="cl-child-header">
|
|
||||||
<?= htmlspecialchars($child) ?>
|
|
||||||
</th>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<!-- Ligne 2 : Adult + Tió / Nadal / Reis pour chaque enfant -->
|
<?php if (empty($gifts)): ?>
|
||||||
<tr>
|
<p>No hi ha cap regal registrat per a <?= htmlspecialchars($year) ?>.</p>
|
||||||
<th class="cl-header-adult">Adult</th>
|
|
||||||
<?php foreach ($children as $child): ?>
|
|
||||||
<?php foreach ($occasions as $occCode => $occLabel): ?>
|
|
||||||
<th class="cl-header-occ"><?= htmlspecialchars($occLabel) ?></th>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
|
||||||
<?php foreach ($adults as $adult): ?>
|
|
||||||
<tr>
|
|
||||||
<!-- Colonne adulte -->
|
|
||||||
<td class="cl-adult-cell"><?= htmlspecialchars($adult) ?></td>
|
|
||||||
|
|
||||||
<!-- Colonnes (enfant x fête) -->
|
|
||||||
<?php foreach ($children as $child): ?>
|
|
||||||
<?php foreach ($occasions as $occCode => $occLabel): ?>
|
|
||||||
<?php
|
|
||||||
$cellGifts = $byAdult[$adult][$child][$occCode] ?? [];
|
|
||||||
$total = array_sum(array_column($cellGifts, 'amount'));
|
|
||||||
|
|
||||||
// Id unique pour cette cellule (pour cibler le menu en JS)
|
|
||||||
$cellId = 'cell_' . md5($adult . '_' . $child . '_' . $occCode);
|
|
||||||
?>
|
|
||||||
<td class="cl-gift-cell" data-cell-id="<?= $cellId ?>">
|
|
||||||
<div class="cl-gift-cell-content">
|
|
||||||
<?php if (!empty($cellGifts)): ?>
|
|
||||||
<ul class="cl-gift-list">
|
|
||||||
<?php foreach ($cellGifts as $gift): ?>
|
|
||||||
<li>
|
|
||||||
<?= htmlspecialchars($gift['gift_description']) ?>
|
|
||||||
<?php if ($gift['amount'] > 0): ?>
|
|
||||||
<span class="cl-gift-amount">
|
|
||||||
(<?= number_format($gift['amount'], 0, ',', ' ') ?> €)
|
|
||||||
</span>
|
|
||||||
<?php endif; ?>
|
|
||||||
</li>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
|
||||||
<?php else: ?>
|
|
||||||
<span class="cl-empty">– Cap regal</span>
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="cl-total-and-add">
|
<?php foreach ($allOccasionLabels as $occCode => $occLabel): ?>
|
||||||
<div class="cl-gift-total">
|
<div class="cl-occasion-block">
|
||||||
<?php if ($total > 0): ?>
|
<h3 class="cl-occasion-title"><?= htmlspecialchars($occLabel) ?></h3>
|
||||||
Total: <?= number_format($total, 0, ',', ' ') ?> €
|
|
||||||
<?php else: ?>
|
|
||||||
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="button"
|
<div class="cl-occasion-children-tables">
|
||||||
class="cl-add-btn"
|
<?php
|
||||||
data-target="<?= $cellId ?>">
|
// Afficher tous les enfants (même vides) pour garder l'ordre fixe
|
||||||
+
|
$childrenForOccasion = $children;
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Menu d'ajout caché au départ -->
|
foreach ($childrenForOccasion as $childName):
|
||||||
<div class="cl-add-menu" id="<?= $cellId ?>">
|
// Prépare les listes par adulte pour cet enfant et cette fête
|
||||||
<form method="post" action="/modules/christmas-list/save-gift.php" class="cl-gift-form">
|
$lists = [];
|
||||||
<input type="hidden" name="year" value="<?= $year ?>">
|
$totals = [];
|
||||||
<input type="hidden" name="adult_name" value="<?= htmlspecialchars($adult) ?>">
|
foreach ($adults as $adultName) {
|
||||||
<input type="hidden" name="child_name" value="<?= htmlspecialchars($child) ?>">
|
$lists[$adultName] = $byOccasion[$occCode][$childName][$adultName] ?? [];
|
||||||
<input type="hidden" name="occasion" value="<?= htmlspecialchars($occCode) ?>">
|
$totals[$adultName] = array_sum(array_map(
|
||||||
|
fn($g) => (float)$g['amount'],
|
||||||
|
$lists[$adultName]
|
||||||
|
));
|
||||||
|
}
|
||||||
|
// Nombre de lignes: max des tailles de listes Laia/Laura/Avi Iaia
|
||||||
|
$maxRowsChild = max(array_map('count', $lists));
|
||||||
|
?>
|
||||||
|
<table class="cl-child-table child-<?= strtolower($childName) ?>">
|
||||||
|
<colgroup>
|
||||||
|
<col class="cl-col" />
|
||||||
|
<col class="cl-col" />
|
||||||
|
<col class="cl-col" />
|
||||||
|
</colgroup>
|
||||||
|
|
||||||
<input type="text" name="gift_description" placeholder="Regal..." required>
|
<caption>
|
||||||
|
<?= htmlspecialchars($childName) ?>
|
||||||
<div class="cl-gift-form-row">
|
<button
|
||||||
<input type="url" name="product_link" placeholder="Enllaç">
|
type="button"
|
||||||
<input type="number" name="amount" placeholder="€" step="0.01" min="0">
|
class="cl-child-add-btn"
|
||||||
</div>
|
title="Afegeix un regal"
|
||||||
|
data-year="<?= $year ?>"
|
||||||
<div class="cl-gift-form-actions">
|
data-child="<?= htmlspecialchars($childName) ?>"
|
||||||
<button type="button" class="cl-cancel-btn" data-target="<?= $cellId ?>">Cancel·lar</button>
|
data-occasion="<?= htmlspecialchars($occCode) ?>"
|
||||||
<button type="submit" class="cl-ok-btn">OK</button>
|
>+</button>
|
||||||
</div>
|
</caption>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<?php foreach ($adults as $adultName): ?>
|
||||||
|
<th>
|
||||||
|
<div class="cl-th-inner">
|
||||||
|
<span class="cl-th-label"><?= htmlspecialchars($adultName) ?></span>
|
||||||
|
<span class="cl-summary-adult-total">
|
||||||
|
<?= number_format($totals[$adultName], 0, ',', ' ') ?> €
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
<?php endforeach; ?>
|
</tr>
|
||||||
</tr>
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<?php if ($maxRowsChild === 0): ?>
|
||||||
|
<tr>
|
||||||
|
<td><span class="cl-empty">—</span></td>
|
||||||
|
<td><span class="cl-empty">—</span></td>
|
||||||
|
<td><span class="cl-empty">—</span></td>
|
||||||
|
</tr>
|
||||||
|
<?php else: ?>
|
||||||
|
<?php for ($i = 0; $i < $maxRowsChild; $i++): ?>
|
||||||
|
<tr>
|
||||||
|
<?php foreach ($adults as $adultName): ?>
|
||||||
|
<?php $gift = $lists[$adultName][$i] ?? null; ?>
|
||||||
|
<td>
|
||||||
|
<?php if ($gift): ?>
|
||||||
|
<?php
|
||||||
|
$desc = htmlspecialchars($gift['gift_description']);
|
||||||
|
$amt = (float)$gift['amount'];
|
||||||
|
$plink = trim($gift['product_link'] ?? '');
|
||||||
|
?>
|
||||||
|
<?php if ($plink !== ''): ?>
|
||||||
|
<a href="<?= htmlspecialchars($plink) ?>" target="_blank" rel="noopener noreferrer" class="cl-gift-link"><?= $desc ?></a>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="cl-gift-desc"><?= $desc ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ($amt > 0): ?>
|
||||||
|
<span class="cl-gift-amount">(<?= number_format($amt, 0, ',', ' ') ?> €)</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php else: ?>
|
||||||
|
<span class="cl-empty">—</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</tr>
|
||||||
|
<?php endfor; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
</div>
|
||||||
</div>
|
<?php endforeach; ?>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- =============================================================== -->
|
||||||
|
<!-- RÉSUMÉ DU BUDGET (AGGRÉGÉ) -->
|
||||||
|
<!-- =============================================================== -->
|
||||||
<section class="pf-section pf-section--panel">
|
<section class="pf-section pf-section--panel">
|
||||||
<h2>Resum del pressupost</h2>
|
<h2>Resum del pressupost</h2>
|
||||||
<?php
|
<?php
|
||||||
@@ -187,7 +198,7 @@ foreach ($gifts as $gift) {
|
|||||||
<tr>
|
<tr>
|
||||||
<td><?= htmlspecialchars($row['adult_name']) ?></td>
|
<td><?= htmlspecialchars($row['adult_name']) ?></td>
|
||||||
<td><?= htmlspecialchars($row['child_name']) ?></td>
|
<td><?= htmlspecialchars($row['child_name']) ?></td>
|
||||||
<td><?= htmlspecialchars($occasions[$row['occasion']] ?? $row['occasion']) ?></td>
|
<td><?= htmlspecialchars($allOccasionLabels[$row['occasion']] ?? $row['occasion']) ?></td>
|
||||||
<td><?= number_format($row['total'], 0, ',', ' ') ?> €</td>
|
<td><?= number_format($row['total'], 0, ',', ' ') ?> €</td>
|
||||||
</tr>
|
</tr>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
@@ -195,38 +206,129 @@ foreach ($gifts as $gift) {
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- =============================================================== -->
|
||||||
|
<!-- LISTE DÉTAILLÉE DES CADEAUX (vue "debug"/admin") -->
|
||||||
|
<!-- =============================================================== -->
|
||||||
|
<section class="pf-section pf-section--panel">
|
||||||
|
<h2>Llista detallada de regals</h2>
|
||||||
|
<div class="cl-detail-wrapper">
|
||||||
|
<table class="pf-table pf-table--compact">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Adult</th>
|
||||||
|
<th>Infant</th>
|
||||||
|
<th>Festa</th>
|
||||||
|
<th>Regal</th>
|
||||||
|
<th>€</th>
|
||||||
|
<th>Enllaç</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<?php foreach ($gifts as $g): ?>
|
||||||
|
<tr>
|
||||||
|
<td><?= htmlspecialchars($g['adult_name']) ?></td>
|
||||||
|
<td><?= htmlspecialchars($g['child_name']) ?></td>
|
||||||
|
<td><?= htmlspecialchars($allOccasionLabels[$g['occasion']] ?? $g['occasion']) ?></td>
|
||||||
|
<td><?= htmlspecialchars($g['gift_description']) ?></td>
|
||||||
|
<td><?= number_format($g['amount'], 0, ',', ' ') ?></td>
|
||||||
|
<td>
|
||||||
|
<?php if (!empty($g['product_link'])): ?>
|
||||||
|
<a href="<?= htmlspecialchars($g['product_link']) ?>" target="_blank">🔗</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- JS inline simple pour ouvrir/fermer les menus d'ajout -->
|
<!-- JS inline : modale d'ajout de cadeau -->
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
// Ouvrir le menu associé au bouton +
|
// Modale d'ajout de cadeau (bouton + à côté du nom de l'enfant)
|
||||||
document.querySelectorAll('.cl-add-btn').forEach(function (btn) {
|
const modal = document.getElementById('cl-gift-modal');
|
||||||
|
const backdrop = modal.querySelector('.cl-modal-backdrop');
|
||||||
|
const cancelBtn = modal.querySelector('.clm-cancel');
|
||||||
|
|
||||||
|
document.querySelectorAll('.cl-child-add-btn').forEach(function (btn) {
|
||||||
btn.addEventListener('click', function () {
|
btn.addEventListener('click', function () {
|
||||||
const targetId = btn.getAttribute('data-target');
|
const year = btn.getAttribute('data-year');
|
||||||
const menu = document.getElementById(targetId);
|
const child = btn.getAttribute('data-child');
|
||||||
|
const occasion = btn.getAttribute('data-occasion');
|
||||||
|
|
||||||
// Fermer les autres menus avant d'ouvrir celui-ci
|
modal.classList.add('cl-open');
|
||||||
document.querySelectorAll('.cl-add-menu').forEach(function (m) {
|
|
||||||
if (m.id !== targetId) {
|
|
||||||
m.classList.remove('cl-add-menu--open');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
menu.classList.toggle('cl-add-menu--open');
|
// Remplir les champs cachés
|
||||||
|
document.getElementById('clm-year').value = year;
|
||||||
|
document.getElementById('clm-child').value = child;
|
||||||
|
document.getElementById('clm-occasion').value = occasion;
|
||||||
|
|
||||||
|
// Reset des champs visibles
|
||||||
|
document.getElementById('clm-adult').selectedIndex = 0;
|
||||||
|
document.getElementById('clm-gift').value = '';
|
||||||
|
document.getElementById('clm-amount').value = '';
|
||||||
|
document.getElementById('clm-link').value = '';
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Boutons Cancel·lar pour fermer le menu
|
function closeModal() {
|
||||||
document.querySelectorAll('.cl-cancel-btn').forEach(function (btn) {
|
modal.classList.remove('cl-open');
|
||||||
btn.addEventListener('click', function () {
|
}
|
||||||
const targetId = btn.getAttribute('data-target');
|
cancelBtn.addEventListener('click', closeModal);
|
||||||
const menu = document.getElementById(targetId);
|
backdrop.addEventListener('click', closeModal);
|
||||||
menu.classList.remove('cl-add-menu--open');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Modal d'ajout de cadeau -->
|
||||||
|
<div id="cl-gift-modal" class="cl-modal" aria-hidden="true">
|
||||||
|
<div class="cl-modal-backdrop"></div>
|
||||||
|
<div class="cl-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="cl-modal-title">
|
||||||
|
<form method="post" action="/modules/christmas-list/save-gift.php" class="cl-modal-form">
|
||||||
|
<h3 id="cl-modal-title">Afegeix un regal</h3>
|
||||||
|
|
||||||
|
<!-- Champs cachés (contexte) -->
|
||||||
|
<input type="hidden" name="year" id="clm-year" value="<?= $year ?>">
|
||||||
|
<input type="hidden" name="child_name" id="clm-child" value="">
|
||||||
|
<input type="hidden" name="occasion" id="clm-occasion" value="">
|
||||||
|
|
||||||
|
<!-- Adulte -->
|
||||||
|
<label class="clm-label">
|
||||||
|
Adult
|
||||||
|
<select name="adult_name" id="clm-adult" required>
|
||||||
|
<?php foreach ($adults as $adultName): ?>
|
||||||
|
<option value="<?= htmlspecialchars($adultName) ?>"><?= htmlspecialchars($adultName) ?></option>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Cadeau -->
|
||||||
|
<label class="clm-label">
|
||||||
|
Nom del regal
|
||||||
|
<input type="text" name="gift_description" id="clm-gift" placeholder="p. ex., Lego Star Wars" required>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Montant -->
|
||||||
|
<label class="clm-label">
|
||||||
|
Preu (€)
|
||||||
|
<input type="number" name="amount" id="clm-amount" placeholder="p. ex., 49,99" step="0.01" min="0">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<!-- Lien produit (optionnel) -->
|
||||||
|
<label class="clm-label">
|
||||||
|
Enllaç (opcional)
|
||||||
|
<input type="url" name="product_link" id="clm-link" placeholder="https://exemple.com/producte">
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="cl-modal-actions">
|
||||||
|
<button type="button" class="clm-cancel">Cancel·la</button>
|
||||||
|
<button type="submit" class="clm-ok">Desa</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
require __DIR__ . '/footer.php';
|
require __DIR__ . '/footer.php';
|
||||||
|
|||||||
+7
-4
@@ -13,7 +13,11 @@ body {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
font-family:
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
"Segoe UI",
|
||||||
sans-serif;
|
sans-serif;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
color: #222;
|
color: #222;
|
||||||
@@ -39,8 +43,7 @@ body {
|
|||||||
|
|
||||||
.pf-container {
|
.pf-container {
|
||||||
max-width: 1440px;
|
max-width: 1440px;
|
||||||
margin: 0 auto;
|
margin-left: 6px;
|
||||||
padding: 0 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pf-header {
|
.pf-header {
|
||||||
@@ -93,7 +96,7 @@ body {
|
|||||||
.pf-section--panel {
|
.pf-section--panel {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 16px 16px 20px;
|
padding: 10px 10px 10px 10px;
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
/* Christmas list : vue synthétique avec bouton + et menu flottant */
|
/* ========================================================= */
|
||||||
|
/* Styles généraux page Christmas list */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
.pf-christmas-list h1 {
|
.pf-christmas-list h1 {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
@@ -11,211 +13,326 @@
|
|||||||
color: #4b5563;
|
color: #4b5563;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Grille principale */
|
/* Petit texte explicatif sous les titres */
|
||||||
.cl-grid-wrapper {
|
.cl-legend {
|
||||||
overflow-x: auto; /* sécurité pour petits écrans */
|
font-size: 12px;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-grid-table {
|
/* ========================================================= */
|
||||||
font-size: 11px;
|
/* Vue par fête: mini-tableaux par enfant */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.cl-occasion-block {
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-top: 2px solid #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* En-têtes */
|
.cl-occasion-title {
|
||||||
.cl-grid-table thead th {
|
font-size: 1.2rem;
|
||||||
padding: 6px 4px;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-child-header {
|
.cl-occasion-children-tables {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(280px, 1fr));
|
||||||
|
gap: 12px; /* espacement léger entre mini-tableaux */
|
||||||
|
align-items: start;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.cl-occasion-children-tables {
|
||||||
|
grid-template-columns: repeat(2, minmax(280px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 780px) {
|
||||||
|
.cl-occasion-children-tables {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================================= */
|
||||||
|
/* Mini-tableau par enfant */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.cl-child-table {
|
||||||
|
display: table !important; /* robustesse même avec resets */
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d9e2ec;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.cl-child-table thead {
|
||||||
|
display: table-header-group !important;
|
||||||
|
}
|
||||||
|
.cl-child-table tbody {
|
||||||
|
display: table-row-group !important;
|
||||||
|
}
|
||||||
|
.cl-child-table tr {
|
||||||
|
display: table-row !important;
|
||||||
|
}
|
||||||
|
.cl-child-table th,
|
||||||
|
.cl-child-table td {
|
||||||
|
display: table-cell !important;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nom de l'enfant (caption) + bouton + */
|
||||||
|
.cl-child-table caption {
|
||||||
|
caption-side: top;
|
||||||
|
position: relative; /* pour positionner le + */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
white-space: nowrap;
|
padding: 8px 10px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-header-adult {
|
/* Bouton + dans le caption */
|
||||||
text-align: left;
|
.cl-child-add-btn {
|
||||||
white-space: nowrap;
|
position: absolute;
|
||||||
}
|
right: 8px;
|
||||||
|
top: 50%;
|
||||||
.cl-header-occ {
|
transform: translateY(-50%);
|
||||||
text-align: center;
|
width: 22px;
|
||||||
font-weight: 500;
|
height: 22px;
|
||||||
color: #627d98;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Colonne adulte */
|
|
||||||
.cl-adult-cell {
|
|
||||||
font-weight: 600;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 8px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellules cadeau */
|
|
||||||
.cl-gift-cell {
|
|
||||||
min-width: 120px;
|
|
||||||
vertical-align: top;
|
|
||||||
padding: 6px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Contenu de la cellule : colonne verticale */
|
|
||||||
.cl-gift-cell-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Liste des cadeaux : alignée à gauche */
|
|
||||||
.cl-gift-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl-gift-list li {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Montant par cadeau */
|
|
||||||
.cl-gift-amount {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #627d98;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cellule vide */
|
|
||||||
.cl-empty {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #9fb3c8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ligne Total + bouton + */
|
|
||||||
.cl-total-and-add {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between; /* Total à gauche, + à droite */
|
|
||||||
gap: 4px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Texte Total */
|
|
||||||
.cl-gift-total {
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #243b53;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bouton + */
|
|
||||||
.cl-add-btn {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 1px solid #d9e2ec;
|
border: 1px solid #d9e2ec;
|
||||||
background: #f0f4f8;
|
background: #f0f4f8;
|
||||||
color: #243b53;
|
color: #243b53;
|
||||||
font-size: 12px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.cl-child-add-btn:hover {
|
||||||
.cl-add-btn:hover {
|
|
||||||
background: #d9e2ec;
|
background: #d9e2ec;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Menu d'ajout (caché par défaut) */
|
/* Colonnes égales (3 adultes) via colgroup */
|
||||||
.cl-add-menu {
|
.cl-child-table col.cl-col {
|
||||||
display: none;
|
width: 33.3333%;
|
||||||
margin-top: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
border: 1px solid #d9e2ec;
|
|
||||||
background: #f8fafc;
|
|
||||||
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Classe pour afficher le menu */
|
/* En-têtes adultes: séparateurs + total à droite */
|
||||||
.cl-add-menu--open {
|
.cl-child-table thead th {
|
||||||
|
background: #f3f4f6;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-right: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.cl-child-table thead th:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-th-inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.cl-th-label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Total adulte (réutilise le style global) */
|
||||||
|
.cl-summary-adult-total {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1d4ed8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corps: séparateurs + gestion des noms longs */
|
||||||
|
.cl-child-table tbody td {
|
||||||
|
vertical-align: top;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-top: 1px solid #edf2f7;
|
||||||
|
border-right: 1px solid #e5e7eb;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.35;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
.cl-child-table tbody td:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cellules vides: un “—” par adulte, centré, pleine largeur */
|
||||||
|
.cl-child-table .cl-empty {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Prix du cadeau (dans la cellule) */
|
||||||
|
.cl-gift-amount {
|
||||||
|
color: #627d98;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code couleur par enfant (bordure + header/caption) */
|
||||||
|
.cl-child-table.child-pol {
|
||||||
|
border-color: #bcd3ff;
|
||||||
|
}
|
||||||
|
.cl-child-table.child-pol caption,
|
||||||
|
.cl-child-table.child-pol thead th {
|
||||||
|
background: #eaf2ff;
|
||||||
|
border-bottom-color: #bcd3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-child-table.child-pep {
|
||||||
|
border-color: #b9e3b9;
|
||||||
|
}
|
||||||
|
.cl-child-table.child-pep caption,
|
||||||
|
.cl-child-table.child-pep thead th {
|
||||||
|
background: #eaf7ea;
|
||||||
|
border-bottom-color: #b9e3b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-child-table.child-elna {
|
||||||
|
border-color: #f3bfd7;
|
||||||
|
}
|
||||||
|
.cl-child-table.child-elna caption,
|
||||||
|
.cl-child-table.child-elna thead th {
|
||||||
|
background: #fdeaf3;
|
||||||
|
border-bottom-color: #f3bfd7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-child-table.child-bru {
|
||||||
|
border-color: #ffd0a8;
|
||||||
|
}
|
||||||
|
.cl-child-table.child-bru caption,
|
||||||
|
.cl-child-table.child-bru thead th {
|
||||||
|
background: #fff3e6;
|
||||||
|
border-bottom-color: #ffd0a8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-child-table.child-guim {
|
||||||
|
border-color: #d3c6ff;
|
||||||
|
}
|
||||||
|
.cl-child-table.child-guim caption,
|
||||||
|
.cl-child-table.child-guim thead th {
|
||||||
|
background: #f0eaff;
|
||||||
|
border-bottom-color: #d3c6ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================================= */
|
||||||
|
/* Modale d’ajout de cadeau */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.cl-modal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cl-modal.cl-open {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Formulaire dans le menu */
|
.cl-modal-backdrop {
|
||||||
.cl-gift-form {
|
position: fixed;
|
||||||
display: flex;
|
inset: 0;
|
||||||
flex-direction: column;
|
background: rgba(17, 24, 39, 0.35);
|
||||||
gap: 4px;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Ligne du formulaire (lien + montant) */
|
.cl-modal-dialog {
|
||||||
.cl-gift-form-row {
|
position: fixed;
|
||||||
display: flex;
|
z-index: 1000;
|
||||||
gap: 4px;
|
left: 50%;
|
||||||
}
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
/* Champs du formulaire */
|
width: min(520px, calc(100% - 24px));
|
||||||
.cl-gift-form input[type="text"],
|
background: #fff;
|
||||||
.cl-gift-form input[type="url"],
|
|
||||||
.cl-gift-form input[type="number"] {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #d9e2ec;
|
border: 1px solid #d9e2ec;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-gift-form input[type="text"] {
|
.cl-modal-form {
|
||||||
width: 100%;
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-gift-form input[type="url"] {
|
.cl-modal-form h3 {
|
||||||
flex: 1 1 auto;
|
margin: 0 0 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #243b53;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-gift-form input[type="number"] {
|
.clm-label {
|
||||||
width: 60px;
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #374151;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Boutons OK / Cancel */
|
.clm-label input,
|
||||||
.cl-gift-form-actions {
|
.clm-label select {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
border: 1px solid #d9e2ec;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl-modal-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 4px;
|
gap: 8px;
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl-gift-form-actions button {
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid #d9e2ec;
|
|
||||||
background: #f0f4f8;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl-gift-form-actions button:hover {
|
|
||||||
background: #d9e2ec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl-ok-btn {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1f2933;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cl-cancel-btn {
|
|
||||||
color: #9fb3c8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Récap global en bas */
|
|
||||||
.cl-budget-wrapper {
|
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.clm-cancel,
|
||||||
|
.clm-ok {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border: 1px solid #d9e2ec;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f0f4f8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.clm-ok {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1f2933;
|
||||||
|
}
|
||||||
|
.clm-cancel {
|
||||||
|
color: #9fb3c8;
|
||||||
|
}
|
||||||
|
.clm-cancel:hover,
|
||||||
|
.clm-ok:hover {
|
||||||
|
background: #d9e2ec;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ========================================================= */
|
||||||
|
/* Résumé du budget et Liste détaillée */
|
||||||
|
/* ========================================================= */
|
||||||
|
|
||||||
|
.cl-budget-wrapper {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
.cl-budget-wrapper .pf-table {
|
.cl-budget-wrapper .pf-table {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cl-budget-wrapper .pf-table th,
|
.cl-budget-wrapper .pf-table th,
|
||||||
.cl-budget-wrapper .pf-table td {
|
.cl-budget-wrapper .pf-table td {
|
||||||
padding: 4px 4px;
|
padding: 4px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cl-detail-wrapper .pf-table {
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.cl-detail-wrapper .pf-table th,
|
||||||
|
.cl-detail-wrapper .pf-table td {
|
||||||
|
padding: 4px 4px;
|
||||||
|
}
|
||||||
|
|||||||
@@ -265,7 +265,9 @@
|
|||||||
background: #f9fafb;
|
background: #f9fafb;
|
||||||
color: #111827;
|
color: #111827;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.15s ease, border-color 0.15s ease,
|
transition:
|
||||||
|
background-color 0.15s ease,
|
||||||
|
border-color 0.15s ease,
|
||||||
box-shadow 0.15s ease;
|
box-shadow 0.15s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user