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

readd searchbar

Browse Source
This commit is contained in:
Anthony Stirling 2024-05-18 13:43:00 +01:00
parent 389323c190
commit 56d4c02445
3 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/main/resources/static/css/navbar.css
View File

@ -72,21 +72,6 @@
/* Adjust this to your desired shadow */
}
/* 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 */
}
.main-icon {
width: 36px;

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

@ -1,9 +1,5 @@
// Toggle search bar when the search icon is clicked
document.querySelector("#search-icon").addEventListener("click", function (e) {
e.preventDefault();
var searchBar = document.querySelector("#navbarSearch");
searchBar.classList.toggle("show");
});
window.onload = function () {
var items = document.querySelectorAll(".dropdown-item, .nav-link");
var dummyContainer = document.createElement("div");
@ -41,7 +37,7 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
items.forEach(function (item) {
var titleElement = item.querySelector(".icon-text");
var iconElement = item.querySelector(".icon");
var iconElement = item.querySelector(".material-symbols-rounded, .icon");
var itemHref = item.getAttribute("href");
var tags = item.getAttribute("data-bs-tags") || ""; // If no tags, default to empty string
@ -55,10 +51,9 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
result.href = itemHref;
result.classList.add("dropdown-item");
var resultIcon = document.createElement("img");
resultIcon.src = iconElement.src;
resultIcon.alt = "icon";
resultIcon.classList.add("icon");
var resultIcon = document.createElement("span");
resultIcon.classList.add("material-symbols-rounded");
resultIcon.textContent = iconElement.textContent;
result.appendChild(resultIcon);
var resultText = document.createElement("span");
@ -74,3 +69,4 @@ document.querySelector("#navbarSearchInput").addEventListener("input", function
// Set the width of the search results box to the maximum width
resultsBox.style.width = window.navItemMaxWidth + "px";
});

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

@ -326,6 +326,27 @@
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="searchDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="material-symbols-rounded">
search
</span>
<span class="icon-text icon-hide">Search</span>
</a>
<div class="dropdown-menu dropdown-menu-tp" aria-labelledby="searchDropdown">
<div class="dropdown-menu-wrapper px-xl-2 px-2">
<form class="d-flex p-2 search-form" id="searchForm">
<input class="form-control search-input" type="search" placeholder="Search" aria-label="Search" id="navbarSearchInput">
</form>
<!-- Search Results -->
<div id="searchResults" class="search-results scrollable-y dropdown-mw-20"></div>
</div>
</div>
</li>
<li class="nav-item">
<!-- Settings Button -->
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#settingsModal">