fix(ios): la sheet de détail des stats passe au-dessus de la tab bar — sortie de .app-main (son -webkit-overflow-scrolling crée un contexte d'empilement composité sur iOS qui la piégeait dessous) ; toasts raccourcis à 3 sUnverified
Claude-Session: https://claude.ai/code/session_01FPKHKGfqvnvXKY9tNhYmkh
c286ddf parent: 0055b8f modified
assets/style.css +2 -2 | @@ -560,7 +560,7 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none; | ||
| 560 | 560 | padding: var(--space-3) var(--space-4); border-radius: 999px; |
| 561 | 561 | font-size: 14px; text-align: center; box-shadow: var(--shadow-md); |
| 562 | 562 | /* Apparition, puis fondu automatique après 5 s — zéro JS. */ |
| 563 | - animation: tt-drop .18s ease-out, tt-fade .4s ease-in 5s forwards; z-index: 5; | |
| 563 | + animation: tt-drop .18s ease-out, tt-fade .4s ease-in 3s forwards; z-index: 5; | |
| 564 | 564 | } |
| 565 | 565 | |
| 566 | 566 | @keyframes tt-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } |
| @@ -570,5 +570,5 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none; | ||
| 570 | 570 | disparaître — on ne garde que le fondu différé. */ |
| 571 | 571 | @media (prefers-reduced-motion: reduce) { |
| 572 | 572 | .sheet { animation: none; } |
| 573 | - .toast { animation: tt-fade .4s ease-in 5s forwards; } | |
| 573 | + .toast { animation: tt-fade .4s ease-in 3s forwards; } | |
| 574 | 574 | } |
| @@ -560,7 +560,7 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none; | |||
| 560 | padding: var(--space-3) var(--space-4); border-radius: 999px; | 560 | padding: var(--space-3) var(--space-4); border-radius: 999px; |
| 561 | font-size: 14px; text-align: center; box-shadow: var(--shadow-md); | 561 | font-size: 14px; text-align: center; box-shadow: var(--shadow-md); |
| 562 | /* Apparition, puis fondu automatique après 5 s — zéro JS. */ | 562 | /* Apparition, puis fondu automatique après 5 s — zéro JS. */ |
| 563 | - animation: tt-drop .18s ease-out, tt-fade .4s ease-in 5s forwards; z-index: 5; | 563 | + animation: tt-drop .18s ease-out, tt-fade .4s ease-in 3s forwards; z-index: 5; |
| 564 | } | 564 | } |
| 565 | 565 | ||
| 566 | @keyframes tt-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } | 566 | @keyframes tt-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } |
| @@ -570,5 +570,5 @@ a.times-link { flex-direction: row; align-items: center; text-decoration: none; | |||
| 570 | disparaître — on ne garde que le fondu différé. */ | 570 | disparaître — on ne garde que le fondu différé. */ |
| 571 | @media (prefers-reduced-motion: reduce) { | 571 | @media (prefers-reduced-motion: reduce) { |
| 572 | .sheet { animation: none; } | 572 | .sheet { animation: none; } |
| 573 | - .toast { animation: tt-fade .4s ease-in 5s forwards; } | 573 | + .toast { animation: tt-fade .4s ease-in 3s forwards; } |
| 574 | } | 574 | } |
modified
templates/app.html +4 -0 | @@ -23,6 +23,10 @@ | ||
| 23 | 23 | <main class="app-main"> |
| 24 | 24 | {% block content %}{% endblock %} |
| 25 | 25 | </main> |
| 26 | +{# Sheets :target des pages — HORS de .app-main : sur iOS, son | |
| 27 | + -webkit-overflow-scrolling crée un contexte d'empilement composité qui | |
| 28 | + piégerait la sheet sous la tab bar, quel que soit le z-index. #} | |
| 29 | +{% block sheets %}{% endblock %} | |
| 26 | 30 | {% if let Some(t) = shell.timer %} |
| 27 | 31 | {% if t.running %} |
| 28 | 32 | <form class="timer-slot" method="post" action="/timer/arreter"> |
| @@ -23,6 +23,10 @@ | |||
| 23 | <main class="app-main"> | 23 | <main class="app-main"> |
| 24 | {% block content %}{% endblock %} | 24 | {% block content %}{% endblock %} |
| 25 | </main> | 25 | </main> |
| 26 | +{# Sheets :target des pages — HORS de .app-main : sur iOS, son | ||
| 27 | + -webkit-overflow-scrolling crée un contexte d'empilement composité qui | ||
| 28 | + piégerait la sheet sous la tab bar, quel que soit le z-index. #} | ||
| 29 | +{% block sheets %}{% endblock %} | ||
| 26 | {% if let Some(t) = shell.timer %} | 30 | {% if let Some(t) = shell.timer %} |
| 27 | {% if t.running %} | 31 | {% if t.running %} |
| 28 | <form class="timer-slot" method="post" action="/timer/arreter"> | 32 | <form class="timer-slot" method="post" action="/timer/arreter"> |
modified
templates/stats.html +3 -0 | @@ -53,6 +53,9 @@ | ||
| 53 | 53 | </section> |
| 54 | 54 | {% endfor %} |
| 55 | 55 | |
| 56 | +{% endblock %} | |
| 57 | + | |
| 58 | +{% block sheets %} | |
| 56 | 59 | {% for s in sheets %} |
| 57 | 60 | <div class="sheet-wrap" id="{{ s.id }}" role="dialog" aria-label="{{ shell.tr.detail }} — {{ s.category }}"> |
| 58 | 61 | <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a> |
| @@ -53,6 +53,9 @@ | |||
| 53 | </section> | 53 | </section> |
| 54 | {% endfor %} | 54 | {% endfor %} |
| 55 | 55 | ||
| 56 | +{% endblock %} | ||
| 57 | + | ||
| 58 | +{% block sheets %} | ||
| 56 | {% for s in sheets %} | 59 | {% for s in sheets %} |
| 57 | <div class="sheet-wrap" id="{{ s.id }}" role="dialog" aria-label="{{ shell.tr.detail }} — {{ s.category }}"> | 60 | <div class="sheet-wrap" id="{{ s.id }}" role="dialog" aria-label="{{ shell.tr.detail }} — {{ s.category }}"> |
| 58 | <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a> | 61 | <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a> |