diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts index 7abfcb2..c82c70b 100644 --- a/public/scripts-src/userSearch.ts +++ b/public/scripts-src/userSearch.ts @@ -4,9 +4,14 @@ // Username search //=============================================== -let usernameElement = document.getElementById("user-name") as HTMLInputElement; - +const usernameElement = document.getElementById("user-name") as HTMLInputElement; +const searchResultsElement = document.querySelector(".search-results"); const usernameInput = document.getElementById("user-name"); + +usernameElement.addEventListener("blur", (event) => { + hideElement(searchResultsElement); +}); + if (usernameInput) { usernameInput.addEventListener("keyup", (event) => { if (usernameElement.value.length > 0) { @@ -33,8 +38,6 @@ async function getUpdatedSearchResults(search) { } } -let searchResultsElement = document.querySelector(".search-results"); - function showUpdatedSearchResults(users) { searchResultsElement.innerHTML = ""; for (let i = 0; i < users.length; i++) { diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js index 84755f8..aa92da2 100644 --- a/public/scripts/userSearch.js +++ b/public/scripts/userSearch.js @@ -2,8 +2,12 @@ //=============================================== // Username search //=============================================== -let usernameElement = document.getElementById("user-name"); +const usernameElement = document.getElementById("user-name"); +const searchResultsElement = document.querySelector(".search-results"); const usernameInput = document.getElementById("user-name"); +usernameElement.addEventListener("blur", (event) => { + hideElement(searchResultsElement); +}); if (usernameInput) { usernameInput.addEventListener("keyup", (event) => { if (usernameElement.value.length > 0) { @@ -28,7 +32,6 @@ async function getUpdatedSearchResults(search) { console.error("Error fetching users - ", error); // should show to user } } -let searchResultsElement = document.querySelector(".search-results"); function showUpdatedSearchResults(users) { searchResultsElement.innerHTML = ""; for (let i = 0; i < users.length; i++) { diff --git a/public/styles/tailwind.css b/public/styles/tailwind.css index 852ba7d..ebe47d2 100644 --- a/public/styles/tailwind.css +++ b/public/styles/tailwind.css @@ -1037,6 +1037,11 @@ video { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1087,21 +1092,11 @@ video { border-color: rgb(63 63 70 / var(--tw-border-opacity)); } - .dark\:border-gray-700 { - --tw-border-opacity: 1; - border-color: rgb(55 65 81 / var(--tw-border-opacity)); - } - .dark\:border-t-zinc-600 { --tw-border-opacity: 1; border-top-color: rgb(82 82 91 / var(--tw-border-opacity)); } - .dark\:bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); - } - .dark\:bg-zinc-600 { --tw-bg-opacity: 1; background-color: rgb(82 82 91 / var(--tw-bg-opacity));