fix: адаптация поиска под виртуальную клавиатуру на мобильных
This commit is contained in:
parent
a11629fb07
commit
456406224e
1 changed files with 53 additions and 1 deletions
|
|
@ -67,11 +67,42 @@ const title = 'Поиск по статьям';
|
||||||
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
|
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateResultsHeight() {
|
||||||
|
const viewport = window.visualViewport;
|
||||||
|
let availableHeight;
|
||||||
|
|
||||||
|
if (viewport) {
|
||||||
|
availableHeight = viewport.height;
|
||||||
|
} else {
|
||||||
|
availableHeight = window.innerHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
const modalContainer = modal.querySelector('.modal-container');
|
||||||
|
if (!modalContainer) return;
|
||||||
|
|
||||||
|
const modalRect = modalContainer.getBoundingClientRect();
|
||||||
|
const headerHeight = modalRect.top + 80;
|
||||||
|
const inputHeight = 60;
|
||||||
|
const padding = 40;
|
||||||
|
|
||||||
|
const resultsMaxHeight = availableHeight - headerHeight - inputHeight - padding;
|
||||||
|
resultsContainer.style.maxHeight = `${Math.max(200, resultsMaxHeight)}px`;
|
||||||
|
}
|
||||||
|
|
||||||
function openModal() {
|
function openModal() {
|
||||||
modal.classList.add('active');
|
modal.classList.add('active');
|
||||||
modal.setAttribute('aria-hidden', 'false');
|
modal.setAttribute('aria-hidden', 'false');
|
||||||
document.body.style.overflow = 'hidden';
|
document.body.style.overflow = 'hidden';
|
||||||
setTimeout(() => searchInput.focus(), 200);
|
setTimeout(() => {
|
||||||
|
searchInput.focus();
|
||||||
|
updateResultsHeight();
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
if (window.visualViewport) {
|
||||||
|
window.visualViewport.addEventListener('resize', updateResultsHeight);
|
||||||
|
} else {
|
||||||
|
window.addEventListener('resize', updateResultsHeight);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
|
|
@ -80,6 +111,13 @@ const title = 'Поиск по статьям';
|
||||||
document.body.style.overflow = '';
|
document.body.style.overflow = '';
|
||||||
searchInput.value = '';
|
searchInput.value = '';
|
||||||
resultsContainer.innerHTML = '';
|
resultsContainer.innerHTML = '';
|
||||||
|
resultsContainer.style.maxHeight = '';
|
||||||
|
|
||||||
|
if (window.visualViewport) {
|
||||||
|
window.visualViewport.removeEventListener('resize', updateResultsHeight);
|
||||||
|
} else {
|
||||||
|
window.removeEventListener('resize', updateResultsHeight);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleSearch(query) {
|
async function handleSearch(query) {
|
||||||
|
|
@ -253,6 +291,20 @@ const title = 'Поиск по статьям';
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
|
max-height: 400px;
|
||||||
|
transition: max-height 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.search-results {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-height: 500px) {
|
||||||
|
.search-results {
|
||||||
|
max-height: 200px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-item {
|
.search-result-item {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue