header et login mobile
This commit is contained in:
+107
-13
@@ -137,23 +137,89 @@ body.no-scroll {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.pf-mobile-menu {
|
||||
/* === MENU MOBILE (Sidebar "Off-Canvas") === */
|
||||
.pf-mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: calc(100vh - 64px);
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
z-index: 99;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 998;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.pf-mobile-menu.is-open {
|
||||
.pf-mobile-overlay.is-visible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pf-mobile-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -300px; /* Caché à l'extérieur de l'écran à droite */
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: var(--bg-panel);
|
||||
box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
|
||||
z-index: 999;
|
||||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pf-mobile-menu.is-open {
|
||||
right: 0; /* Le menu glisse dans l'écran */
|
||||
}
|
||||
|
||||
.pf-mobile-menu-header {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
background: var(--bg-page);
|
||||
}
|
||||
|
||||
.pf-mobile-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pf-mobile-menu-body {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pf-mobile-nav-link {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: var(--text-main);
|
||||
padding: 14px 16px; /* Plus large pour le tactile */
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.pf-mobile-nav-link:active {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.pf-mobile-logout {
|
||||
color: var(--danger);
|
||||
background: #fef2f2;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* === MAIN CONTENT & TYPOGRAPHY === */
|
||||
@@ -575,3 +641,31 @@ p {
|
||||
padding: 14px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* --- Optimisation Login Mobile --- */
|
||||
@media (max-width: 480px) {
|
||||
.pf-login-wrapper {
|
||||
padding: 0;
|
||||
align-items: flex-start; /* Aligné en haut pour laisser de la place au clavier */
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.pf-login-card {
|
||||
border-radius: 0; /* Supprime les arrondis pour un look plein écran */
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 60px 24px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* ⚠️ IMPORTANT : Éviter le zoom auto sur iOS */
|
||||
.pf-login-card .pf-input {
|
||||
font-size: 16px; /* En dessous de 16px, Safari iOS zoome automatiquement sur le champ */
|
||||
padding: 14px; /* Zone de clic plus large pour les doigts */
|
||||
}
|
||||
|
||||
.pf-btn-block {
|
||||
padding: 16px; /* Bouton plus haut pour un appui facile au pouce */
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
+38
-16
@@ -77,14 +77,23 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
|
||||
</header>
|
||||
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<div class="pf-mobile-menu">
|
||||
<a href="/index.php" class="pf-mobile-nav-link"><?= tr('menu_home') ?></a>
|
||||
<a href="/family-calendar.php" class="pf-mobile-nav-link"><?= tr('menu_calendar') ?></a>
|
||||
<a href="/budget.php" class="pf-mobile-nav-link"><?= tr('menu_budget') ?></a>
|
||||
<a href="/holidays.php" class="pf-mobile-nav-link"><?= tr('menu_holidays') ?></a>
|
||||
<a href="/gift-list.php" class="pf-mobile-nav-link"><?= tr('menu_gifts') ?></a>
|
||||
<hr style="width: 80%; border: 0; border-top: 1px solid #eee; margin: 10px 0;">
|
||||
<a href="/logout.php" class="pf-mobile-nav-link pf-mobile-logout"><?= tr('btn_logout') ?></a>
|
||||
<div class="pf-mobile-overlay" id="mobileOverlay"></div>
|
||||
|
||||
<div class="pf-mobile-menu" id="mobileMenu">
|
||||
<div class="pf-mobile-menu-header">
|
||||
<span class="pf-logo">PachaFamily</span>
|
||||
<button class="pf-mobile-close-btn" id="closeMobileMenu">×</button>
|
||||
</div>
|
||||
|
||||
<div class="pf-mobile-menu-body">
|
||||
<a href="/index.php" class="pf-mobile-nav-link">🏠 <?= tr('menu_home') ?></a>
|
||||
<a href="/family-calendar.php" class="pf-mobile-nav-link">📅 <?= tr('menu_calendar') ?></a>
|
||||
<a href="/budget.php" class="pf-mobile-nav-link">💰 <?= tr('menu_budget') ?></a>
|
||||
<a href="/holidays.php" class="pf-mobile-nav-link">🏖️ <?= tr('menu_holidays') ?></a>
|
||||
<a href="/gift-list.php" class="pf-mobile-nav-link">🎁 <?= tr('menu_gifts') ?></a>
|
||||
|
||||
<a href="/logout.php" class="pf-mobile-nav-link pf-mobile-logout" style="margin-top: auto;">🚪 <?= tr('btn_logout') ?></a>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -107,18 +116,31 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
|
||||
return window.I18N[key] || key;
|
||||
}
|
||||
|
||||
// Gestion du menu mobile
|
||||
// Gestion du menu mobile (Off-Canvas Sidebar)
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const burgerBtn = document.querySelector('.pf-burger-btn');
|
||||
const mobileMenu = document.querySelector('.pf-mobile-menu');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
const overlay = document.getElementById('mobileOverlay');
|
||||
const closeBtn = document.getElementById('closeMobileMenu');
|
||||
|
||||
if(burgerBtn && mobileMenu) {
|
||||
burgerBtn.addEventListener('click', () => {
|
||||
const isOpen = mobileMenu.classList.toggle('is-open');
|
||||
burgerBtn.textContent = isOpen ? '✕' : '☰';
|
||||
document.body.classList.toggle('no-scroll', isOpen);
|
||||
});
|
||||
function openMenu() {
|
||||
mobileMenu.classList.add('is-open');
|
||||
overlay.classList.add('is-visible');
|
||||
document.body.classList.add('no-scroll');
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
mobileMenu.classList.remove('is-open');
|
||||
overlay.classList.remove('is-visible');
|
||||
document.body.classList.remove('no-scroll');
|
||||
}
|
||||
|
||||
if(burgerBtn && mobileMenu && overlay && closeBtn) {
|
||||
burgerBtn.addEventListener('click', openMenu);
|
||||
closeBtn.addEventListener('click', closeMenu);
|
||||
// Fermer le menu si on clique en dehors (sur l'overlay sombre)
|
||||
overlay.addEventListener('click', closeMenu);
|
||||
}
|
||||
});
|
||||
<?php endif; ?>
|
||||
|
||||
@@ -45,11 +45,11 @@ require __DIR__ . '/header.php';
|
||||
<div class="pf-container pf-login-wrapper">
|
||||
<div class="pf-login-card">
|
||||
|
||||
<div class="pf-login-header">
|
||||
<img src="/favicon.png" alt="PachaFamily Logo" class="pf-login-icon">
|
||||
<h1><?= tr('login_header') ?></h1>
|
||||
<p><?= tr('login_subtitle') ?></p>
|
||||
</div>
|
||||
<header class="pf-login-header">
|
||||
<img src="/favicon.png" alt="PachaFamily Logo" class="pf-login-icon">
|
||||
<h1><?= tr('login_header') ?></h1>
|
||||
<p><?= tr('login_subtitle') ?></p>
|
||||
</header>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="pf-login-error">
|
||||
@@ -60,12 +60,15 @@ require __DIR__ . '/header.php';
|
||||
<form method="post" action="/login.php<?= isset($_GET['redirect']) ? '?redirect=' . urlencode($_GET['redirect']) : '' ?>">
|
||||
<div class="pf-form-group">
|
||||
<label class="pf-label" for="username"><?= tr('label_username') ?></label>
|
||||
<input type="text" id="username" name="username" class="pf-input" required autofocus placeholder="<?= tr('placeholder_username') ?>">
|
||||
<input type="text" id="username" name="username" class="pf-input"
|
||||
required autofocus placeholder="<?= tr('placeholder_username') ?>"
|
||||
autocomplete="username" autocapitalize="none">
|
||||
</div>
|
||||
|
||||
<div class="pf-form-group">
|
||||
<label class="pf-label" for="password"><?= tr('label_password') ?></label>
|
||||
<input type="password" id="password" name="password" class="pf-input" required placeholder="••••••">
|
||||
<input type="password" id="password" name="password" class="pf-input"
|
||||
required placeholder="••••••" autocomplete="current-password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="pf-btn pf-btn-block">
|
||||
@@ -77,7 +80,3 @@ require __DIR__ . '/header.php';
|
||||
</div>
|
||||
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
|
||||
<?php require __DIR__ . '/footer.php'; ?>
|
||||
Reference in New Issue
Block a user