search results box is the right size now
This commit is contained in:
@@ -1645,19 +1645,16 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-results-dropdown {
|
.search-results-dropdown {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 100%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 4px 10px rgba(255,20,147,0.15);
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 4px 10px rgba(255,20,147,0.15);
|
||||||
border: 2px solid var(--pink-200);
|
border: 2px solid var(--pink-200);
|
||||||
z-index: 10000;
|
z-index: 9999;
|
||||||
display: none;
|
display: none;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
margin-top: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-item {
|
.search-result-item {
|
||||||
|
|||||||
@@ -60,12 +60,6 @@ var Search = (function() {
|
|||||||
// Insert after brand
|
// Insert after brand
|
||||||
brand.parentNode.insertBefore(searchWrapper, brand.nextSibling);
|
brand.parentNode.insertBefore(searchWrapper, brand.nextSibling);
|
||||||
|
|
||||||
// Move results container inside search wrapper for correct absolute positioning
|
|
||||||
var existingContainer = document.getElementById('searchResultsContainer');
|
|
||||||
if (existingContainer) {
|
|
||||||
searchWrapper.appendChild(existingContainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
currentInput = searchInput;
|
currentInput = searchInput;
|
||||||
|
|
||||||
// Event listeners
|
// Event listeners
|
||||||
@@ -118,6 +112,25 @@ var Search = (function() {
|
|||||||
hideDropdown();
|
hideDropdown();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Reposition on scroll and resize
|
||||||
|
function positionDropdown() {
|
||||||
|
var container = document.getElementById('searchResultsContainer');
|
||||||
|
if (!container || !dropdownVisible) return;
|
||||||
|
var rect = currentInput.getBoundingClientRect();
|
||||||
|
var vw = window.innerWidth;
|
||||||
|
container.style.top = (rect.bottom + 5) + 'px';
|
||||||
|
if (vw <= 900) {
|
||||||
|
container.style.left = '0';
|
||||||
|
container.style.width = '100vw';
|
||||||
|
} else {
|
||||||
|
container.style.left = rect.left + 'px';
|
||||||
|
container.style.width = '520px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', positionDropdown);
|
||||||
|
window.addEventListener('resize', positionDropdown);
|
||||||
}
|
}
|
||||||
|
|
||||||
function crawlPage(url, callback) {
|
function crawlPage(url, callback) {
|
||||||
@@ -453,6 +466,18 @@ var Search = (function() {
|
|||||||
function showDropdown() {
|
function showDropdown() {
|
||||||
var container = document.getElementById('searchResultsContainer');
|
var container = document.getElementById('searchResultsContainer');
|
||||||
if (container) {
|
if (container) {
|
||||||
|
var rect = currentInput.getBoundingClientRect();
|
||||||
|
var vw = window.innerWidth;
|
||||||
|
var sidebarWidth = 240;
|
||||||
|
|
||||||
|
if (vw <= 900) {
|
||||||
|
container.style.left = '0';
|
||||||
|
container.style.width = '100vw';
|
||||||
|
} else {
|
||||||
|
container.style.left = rect.left + 'px';
|
||||||
|
container.style.width = '520px';
|
||||||
|
}
|
||||||
|
container.style.top = (rect.bottom + 5) + 'px';
|
||||||
container.style.display = 'block';
|
container.style.display = 'block';
|
||||||
dropdownVisible = true;
|
dropdownVisible = true;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user