From 211d40affc3d97537c33dd4a6d1092ef8d884318 Mon Sep 17 00:00:00 2001 From: Subhamoy Biswas Date: Mon, 6 Nov 2023 20:15:45 +0530 Subject: [PATCH] (feat): improved serchbar open, close animation and added blurry search background (refactor): updated flotingbar config --- htdocs/assets/_floatingbar.php | 4 +- htdocs/assets/_preloader.php | 2 +- htdocs/assets/extra-style.css | 41 +++++++++++++++++- htdocs/assets/js/floatingbar-config.js | 21 ++++++--- htdocs/assets/style.css | 59 ++++++++++++-------------- 5 files changed, 87 insertions(+), 40 deletions(-) diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php index 5fad3b2..350b689 100644 --- a/htdocs/assets/_floatingbar.php +++ b/htdocs/assets/_floatingbar.php @@ -1,7 +1,9 @@ +
diff --git a/htdocs/assets/_preloader.php b/htdocs/assets/_preloader.php index cff6e76..feae240 100644 --- a/htdocs/assets/_preloader.php +++ b/htdocs/assets/_preloader.php @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/htdocs/assets/extra-style.css b/htdocs/assets/extra-style.css index 8de21e4..3b4b646 100644 --- a/htdocs/assets/extra-style.css +++ b/htdocs/assets/extra-style.css @@ -78,6 +78,8 @@ background: #38BDF8; fill: red; } */ +/* --- floatingbar styling --- */ + .floatingbar-slide-down { transform: translateY(20vh); transition: transform 0.5s ease-in-out; @@ -89,7 +91,7 @@ background: #38BDF8; } .floatingbar-click-slide-up { - transform: translateY(-55vh); + transform: translateY(-70vh); transition: transform 0.5s ease-in-out; } @@ -101,11 +103,13 @@ background: #38BDF8; .searchbar-click-increase-width { animation: increaseSearchbarWidth 0.5s ease-in-out; width: 40vw; + transition: width 1s ease-in-out; } .searchbar-click-decrease-width { animation: decreaseSearchbarWidth 0.5s ease-in-out; width: fit-content; + transition: width 1s ease-in-out; } @keyframes increaseSearchbarWidth { @@ -116,6 +120,7 @@ background: #38BDF8; width: 40vw; } } + @keyframes decreaseSearchbarWidth { from { width: 40vw; @@ -123,4 +128,38 @@ background: #38BDF8; to { width: 10vw; } +} + +@media only screen and (max-width: 768px) { + + .searchbar-click-increase-width { + animation: increaseSearchbarWidth 0.5s ease-in-out; + width: 80vw; + transition: width 1s ease-in-out; + } + + .searchbar-click-decrease-width { + animation: decreaseSearchbarWidth 0.5s ease-in-out; + width: fit-content; + transition: width 1s ease-in-out; + } + + @keyframes increaseSearchbarWidth { + from { + width: 10vw; + } + to { + width: 80vw; + } + } + + @keyframes decreaseSearchbarWidth { + from { + width: 80vw; + } + to { + width: 30vw; + } + } + } \ No newline at end of file diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js index 6781353..5c729a0 100644 --- a/htdocs/assets/js/floatingbar-config.js +++ b/htdocs/assets/js/floatingbar-config.js @@ -3,6 +3,8 @@ const floatingBar = document.getElementById("floating-bar"); const searchBar = document.getElementById("searchbar"); const shareBtn = document.getElementById("sharebutton"); const closeBtn = document.getElementById("closebutton"); +const searchTxt = document.getElementById("searchtext"); +const searchInput = document.getElementById("searchinput"); let lastScrollTop = 0; window.addEventListener("scroll", function () { @@ -24,46 +26,53 @@ window.addEventListener("scroll", function () { }); // function to open floating search window -function activate_search(searchBar, floatingBar, closeBtn, shareBtn) { +function activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) { floatingBar.classList.remove("floatingbar-click-slide-down"); floatingBar.classList.add("floatingbar-click-slide-up"); searchBar.classList.remove("searchbar-click-decrease-width"); searchBar.classList.add("searchbar-click-increase-width"); closeBtn.classList.remove("hidden"); shareBtn.classList.add("hidden"); + searchTxt.classList.add("hidden"); + searchInput.classList.remove("hidden"); + searchInput.focus(); + document.body.classList.add("overflow-hidden"); } // function to close floating search window -function close_search(searchBar, floatingBar, closeBtn, shareBtn) { +function close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput) { floatingBar.classList.remove("floatingbar-click-slide-up"); floatingBar.classList.add("floatingbar-click-slide-down"); searchBar.classList.remove("searchbar-click-increase-width"); searchBar.classList.add("searchbar-click-decrease-width"); closeBtn.classList.add("hidden"); shareBtn.classList.remove("hidden"); + searchTxt.classList.remove("hidden"); + searchInput.classList.add("hidden"); + document.body.classList.remove("overflow-hidden"); } // when the search icon is clicked searchBar.addEventListener("click", function () { - activate_search(searchBar, floatingBar, closeBtn, shareBtn); + activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput); }); // when ALT + K shortcut key is pressed document.addEventListener("keydown", function(event) { if (event.altKey && event.key === "k") { - activate_search(searchBar, floatingBar, closeBtn, shareBtn); + activate_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput); } }); // when close button is clicked closeBtn.addEventListener("click", function () { - close_search(searchBar, floatingBar, closeBtn, shareBtn); + close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput); }); // when ESC key is pressed document.addEventListener("keydown", function(event) { if (event.key === "Escape") { - close_search(searchBar, floatingBar, closeBtn, shareBtn); + close_search(searchBar, floatingBar, closeBtn, shareBtn, searchTxt, searchInput); } }); diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css index 294cf2c..7c3c541 100644 --- a/htdocs/assets/style.css +++ b/htdocs/assets/style.css @@ -615,6 +615,10 @@ video { z-index: 20; } +.z-30 { + z-index: 30; +} + .z-50 { z-index: 50; } @@ -941,10 +945,6 @@ video { width: 100vw; } -.w-\[40vw\] { - width: 40vw; -} - .rotate-\[15deg\] { --tw-rotate: 15deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); @@ -1094,6 +1094,10 @@ video { border-top-color: rgb(56 189 248 / var(--tw-border-opacity)); } +.bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] { + background-color: rgba(0, 0, 0, 0.4); +} + .bg-accent_primary { --tw-bg-opacity: 1; background-color: rgb(56 189 248 / var(--tw-bg-opacity)); @@ -1201,11 +1205,6 @@ video { padding-bottom: 0.30rem; } -.px-\[0\.82rem\] { - padding-left: 0.82rem; - padding-right: 0.82rem; -} - .text-center { text-align: center; } @@ -1291,6 +1290,10 @@ video { color: rgb(15 23 42 / var(--tw-text-opacity)); } +.caret-accent_primary { + caret-color: #38BDF8; +} + .opacity-20 { opacity: 0.2; } @@ -1355,6 +1358,11 @@ video { --tw-shadow: var(--tw-shadow-colored); } +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + .blur-2xl { --tw-blur: blur(40px); 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); @@ -1365,6 +1373,17 @@ video { 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); + 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); +} + +.backdrop-filter { + -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); + 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); +} + .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -1385,24 +1404,6 @@ video { transition-duration: 150ms; } -.transition-\[width\] { - transition-property: width; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-\[width_box-shadow\] { - transition-property: width box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-\[width\2c _box-shadow\] { - transition-property: width, box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .duration-100 { transition-duration: 100ms; } @@ -1415,10 +1416,6 @@ video { transition-duration: 500ms; } -.duration-1000 { - transition-duration: 1000ms; -} - .last\:mb-3:last-child { margin-bottom: 0.75rem; }