texte recouvert par le sticky

This commit is contained in:
2026-01-20 23:21:15 +01:00
parent 36c10169f6
commit 2fee826016

View File

@@ -15,10 +15,9 @@
<meta property="og:locale" content="fr_FR" /> <meta property="og:locale" content="fr_FR" />
<style> <style>
body { body {
--vph: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: var(--vph); min-height: var(--vph, 100vh);
} }
.material-symbols-outlined { .material-symbols-outlined {
@@ -28,8 +27,9 @@ body {
@media screen and (min-height: 600px) { @media screen and (min-height: 600px) {
body { body {
height: var(--vph); height: var(--vph, 100vh);
} }
body > header { body > header {
position: sticky; position: sticky;
top: 0; top: 0;
@@ -41,6 +41,7 @@ body {
body > main { body > main {
margin: -5rem; margin: -5rem;
margin-bottom: calc(100vh - 100dvh - 5rem);
padding: 5rem; padding: 5rem;
} }
@@ -159,13 +160,18 @@ let utterance = null;
question.onkeydown = function(e) { question.onkeydown = function(e) {
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) { if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
question.blur();
e.target.form.requestSubmit(); e.target.form.requestSubmit();
} }
}; };
question.onfocus = function() { question.onfocus = function() {
window.onresize; window.onresize();
question.scrollIntoView({ block: 'start', behavior: 'auto' }); formulaire.scrollIntoView({ block: 'end', behavior: 'smooth' });
};
question.onblur = function() {
window.onresize();
}; };
formulaire.addEventListener('submit', async (e) => { formulaire.addEventListener('submit', async (e) => {
@@ -208,7 +214,8 @@ formulaire.addEventListener('submit', async (e) => {
} else { } else {
paragraphe.innerHTML += lettre; paragraphe.innerHTML += lettre;
} }
paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' }); document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
}, t += 100 * Math.random()); }, t += 100 * Math.random());
}); });
setTimeout(() => { setTimeout(() => {
@@ -216,12 +223,13 @@ formulaire.addEventListener('submit', async (e) => {
paragraphe.classList.add('reponse'); paragraphe.classList.add('reponse');
paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?'; paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
conversation.appendChild(paragraphe); conversation.appendChild(paragraphe);
paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' }); document.scrollingElement.scrollBy({top: window.visualViewport.height, behavior: 'smooth'});
bouton_envoyer.disabled = false; bouton_envoyer.disabled = false;
bouton_envoyer.setAttribute("aria-busy", false); bouton_envoyer.setAttribute("aria-busy", false);
bouton_envoyer.innerHTML = bouton_envoyer_innerHTML; bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
question.focus();
question.onfocus(); question.onfocus();
question.focus();
}, t); }, t);
}) })