kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-10-01 08:50:11 +02:00
Code

searchbar cleanups

Browse Source
This commit is contained in:
Anthony Stirling 2023-07-19 23:15:16 +01:00
parent 4129c75475
commit 0eb019fc3c
2 changed files with 122 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/resources/static/js/search.js
View File

@ -44,8 +44,8 @@ document.querySelector('#navbarSearchInput').addEventListener('input', function(
var iconElement = item.querySelector('.icon'); var iconElement = item.querySelector('.icon');
var itemHref = item.getAttribute('href'); var itemHref = item.getAttribute('href');
if (titleElement && iconElement && itemHref !== '#') { if (titleElement && iconElement && itemHref !== '#') {
var title = titleElement.innerText.toLowerCase(); var title = titleElement.innerText;
if (title.indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) { if (title.toLowerCase().indexOf(searchText) !== -1 && !resultsBox.querySelector(`a[href="${item.getAttribute('href')}"]`)) {
var result = document.createElement('a'); var result = document.createElement('a');
result.href = itemHref; result.href = itemHref;
result.classList.add('dropdown-item'); result.classList.add('dropdown-item');

53
src/main/resources/templates/fragments/navbar.html
View File

@ -219,14 +219,61 @@
</a> </a>
<!-- Search Bar --> <!-- Search Bar -->
<div class="collapse position-absolute" id="navbarSearch"> <div class="collapse position-absolute" id="navbarSearch">
<form class="d-flex p-2 bg-white border" id="searchForm"> <form class="d-flex p-2 bg-white border search-form" id="searchForm">
<input class="form-control" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput"> <input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
</form> </form>
<!-- Search Results --> <!-- Search Results -->
<div id="searchResults" class="border p-2 bg-white"></div> <div id="searchResults" class="border p-2 bg-white search-results"></div>
</div> </div>
</li> </li>
<style>
#search-icon i {
font-size: 24px; /* Adjust this to your desired size */
transition: color 0.3s;
}
#search-icon:hover i {
color: #666; /* Adjust this to your hover color */
}
#navbarSearch {
transition: all 0.3s;
max-height: 0;
overflow: hidden;
}
#navbarSearch.show {
max-height: 300px; /* Adjust this to your desired max height */
}
.search-input {
transition: border 0.3s, box-shadow 0.3s;
}
.search-input:focus {
border-color: #666; /* Adjust this to your focus color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
}
#searchResults {
max-width: 300px; /* Adjust to your preferred width */
transition: height 0.3s ease; /* Smooth height transition */
}
/* Set a fixed height and styling for each search result item */
.search-results a {
display: flex;
align-items: center;
gap: 10px; /* space between icon and text */
height: 40px; /* Adjust based on your design */
overflow: hidden; /* Prevent content from overflowing */
white-space: nowrap; /* Prevent text from wrapping to next line */
text-overflow: ellipsis; /* Truncate text if it's too long */
}
</style>
</ul> </ul>