texte recouvert par le sticky
This commit is contained in:
24
index.html
24
index.html
@@ -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);
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user