mobile lecture
This commit is contained in:
+77
-36
@@ -56,6 +56,12 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.pf-header-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pf-logo {
|
||||
@@ -210,78 +216,113 @@ input[type="number"] {
|
||||
font-weight: 600;
|
||||
color: #243b53;
|
||||
}
|
||||
/* === Mobile Comfort: header et éléments plus lisibles/rapprochés === */
|
||||
|
||||
.pf-greeting {
|
||||
color: #f0f4f8;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* === Mobile Comfort v2: header + textes plus grands et mieux alignés === */
|
||||
@media (pointer: coarse), (max-width: 780px) {
|
||||
/* Container: remplace le léger décalage par un padding homogène */
|
||||
/* Container */
|
||||
.pf-container {
|
||||
max-width: none; /* laisse respirer sur mobile */
|
||||
max-width: none;
|
||||
margin-left: 0;
|
||||
padding: 0 12px;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
/* Header global */
|
||||
/* Header */
|
||||
.pf-header {
|
||||
padding: 12px 0; /* plus de hauteur */
|
||||
padding: 16px 0;
|
||||
}
|
||||
.pf-header-content {
|
||||
padding: 0 12px;
|
||||
gap: 10px; /* rapproche un peu les éléments */
|
||||
padding: 0 14px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.pf-logo {
|
||||
font-size: 20px; /* plus lisible */
|
||||
font-size: 22px;
|
||||
}
|
||||
.pf-header-actions {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.pf-greeting {
|
||||
color: #f0f4f8;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1.2;
|
||||
font-size: 18px;
|
||||
}
|
||||
.pf-nav-link--secondary {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/* Si tu utilises un avatar/icône dedans */
|
||||
.pf-greeting img,
|
||||
.pf-greeting .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.pf-nav {
|
||||
gap: 8px; /* éléments un peu plus rapprochés */
|
||||
overflow-x: auto; /* scroll horizontal si trop d’items */
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 6px; /* espace pour le pouce quand ça scroll */
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.pf-nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pf-nav-link {
|
||||
font-size: 16px; /* >=16px évite le zoom iOS */
|
||||
padding: 10px 12px;
|
||||
min-height: 44px; /* cible tactile recommandée */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Contenu principal et sections */
|
||||
.pf-main {
|
||||
padding: 16px 12px 28px; /* un peu plus dense */
|
||||
}
|
||||
.pf-section {
|
||||
margin-top: 16px; /* sections rapprochées */
|
||||
}
|
||||
.pf-section--panel {
|
||||
padding: 12px; /* contenu plus confortable au doigt */
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Tables: taille + padding légèrement augmentés */
|
||||
/* Main + sections */
|
||||
.pf-main {
|
||||
padding: 20px 14px 34px;
|
||||
}
|
||||
.pf-section {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.pf-section--panel {
|
||||
padding: 14px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.pf-table {
|
||||
font-size: 13.5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.pf-table th,
|
||||
.pf-table td {
|
||||
padding: 6px 6px;
|
||||
padding: 8px 8px;
|
||||
}
|
||||
.pf-table--compact th,
|
||||
.pf-table--compact td {
|
||||
padding: 6px 6px;
|
||||
padding: 7px 7px;
|
||||
}
|
||||
|
||||
/* Formulaires: éviter le zoom iOS et lisibilité */
|
||||
/* Formulaires */
|
||||
label {
|
||||
font-size: 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
font-size: 16px; /* >=16px évite le zoom iOS */
|
||||
padding: 8px 10px;
|
||||
max-width: 240px;
|
||||
font-size: 17px; /* >=16px évite le zoom iOS */
|
||||
padding: 12px 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
+8
-9
@@ -31,26 +31,25 @@ if (!isset($activePage)) {
|
||||
<header class="pf-header">
|
||||
<div class="pf-container pf-header-content">
|
||||
<div class="pf-logo">PachaFamily</div>
|
||||
|
||||
<nav class="pf-nav">
|
||||
<a href="/index.php"
|
||||
class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : ''; ?>">Accueil</a>
|
||||
|
||||
class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : ''; ?>">Accueil</a>
|
||||
<a href="/family-calendar.php"
|
||||
class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
|
||||
|
||||
class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
|
||||
|
||||
<a href="/gift-list.php"
|
||||
class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list</a>
|
||||
|
||||
class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list</a>
|
||||
</nav>
|
||||
<div class="pf-header-actions">
|
||||
<?php if (isset($_SESSION['user'])): ?>
|
||||
<span class="pf-nav-user">
|
||||
<span class="pf-greeting">
|
||||
Bonjour <?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?>
|
||||
</span>
|
||||
<a href="/logout.php" class="pf-nav-link pf-nav-link--secondary">Se déconnecter</a>
|
||||
<?php else: ?>
|
||||
<a href="/login.php" class="pf-nav-link pf-nav-link--secondary">Se connecter</a>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
@@ -599,3 +599,64 @@
|
||||
transform: translate(-50%, -50%) translateY(1px);
|
||||
}
|
||||
}
|
||||
/* === Gift List: Mobile Comfort v2 === */
|
||||
@media (pointer: coarse), (max-width: 780px) {
|
||||
.pf-gift-list h1 {
|
||||
font-size: clamp(24px, 7vw, 30px);
|
||||
margin: 10px 0 6px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.pf-gift-list h2 {
|
||||
font-size: clamp(20px, 5.6vw, 24px);
|
||||
line-height: 1.25;
|
||||
margin: 10px 0 6px;
|
||||
}
|
||||
.pf-gift-list h3 {
|
||||
font-size: clamp(17px, 4.8vw, 20px);
|
||||
line-height: 1.3;
|
||||
margin: 8px 0 4px;
|
||||
}
|
||||
|
||||
/* Switch de vue plus gros et confortable */
|
||||
.cl-view-btn {
|
||||
font-size: 18px;
|
||||
padding: 12px 14px;
|
||||
min-height: 48px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Grille/listes: un peu plus d’air */
|
||||
.cl-occasion-children-tables {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Tableaux enfant: en-têtes et cellules plus lisibles */
|
||||
.cl-child-table thead th {
|
||||
padding: 10px 10px;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.cl-child-table tbody td {
|
||||
padding: 10px 8px;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.cl-summary-adult-total {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Bouton + : nous avons déjà agrandi le hit-area; on garde les réglages précédents */
|
||||
.cl-child-table caption {
|
||||
padding-right: 72px;
|
||||
}
|
||||
|
||||
/* Tables Budget/Tricount/Detail: un cran au‑dessus aussi */
|
||||
.cl-budget-wrapper .pf-table,
|
||||
.cl-detail-wrapper .pf-table {
|
||||
font-size: 13.5px;
|
||||
}
|
||||
.cl-budget-wrapper .pf-table th,
|
||||
.cl-budget-wrapper .pf-table td,
|
||||
.cl-detail-wrapper .pf-table th,
|
||||
.cl-detail-wrapper .pf-table td {
|
||||
padding: 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user