neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-19 19:23:02 +05:30
Code Issues Wiki Activity

(feat): added search result loading spinner

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-04 21:36:22 +05:30
parent c8ae463ef6
commit 6bd36c6647
3 changed files with 21 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/assets/_floatingbar.php
View File

@@ -86,6 +86,9 @@
<div id="searchresults" class="searchresults w-full flex-col justify-start px-2 mt-1 hidden"> <div id="searchresults" class="searchresults w-full flex-col justify-start px-2 mt-1 hidden">
<!-- Search Results will be displayed here by JS --> <!-- Search Results will be displayed here by JS -->
</div> </div>
<div id="spinnercont" class="spinnercont w-full h-full absolute top-0 left-0 justify-center items-center bg-bg_secondary hidden">
<div class="spinner border-[3px] border-accent_secondary_transparent border-t-[3px] border-t-accent_primary rounded-[50%] h-[30px] w-[30px] animate-spin"></div>
</div>
</div> </div>
<div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-40 justify-between flex-col md:flex-row bg-bg_secondary rounded-xl hidden"> <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto py-6 fixed inset-x-0 bottom-[20vh] z-40 justify-between flex-col md:flex-row bg-bg_secondary rounded-xl hidden">
<div class="shareviaqr w-full md:w-[40%] h-full flex flex-col py-3 px-7"> <div class="shareviaqr w-full md:w-[40%] h-full flex flex-col py-3 px-7">

6
htdocs/assets/js/floatingbar-config.js
View File

@@ -12,6 +12,7 @@ const searchWin = document.getElementById("searchwindow");
const shareWin = document.getElementById("sharewindow"); const shareWin = document.getElementById("sharewindow");
const searchDef = document.getElementById("defresults"); const searchDef = document.getElementById("defresults");
const searchRes = document.getElementById("searchresults"); const searchRes = document.getElementById("searchresults");
const spinner = document.getElementById("spinnercont");
const qrCode = document.getElementById("pageqrcode"); const qrCode = document.getElementById("pageqrcode");
const linkInput = document.getElementById("pageurlinput"); const linkInput = document.getElementById("pageurlinput");
const embedCode = document.getElementById("embedcodetag"); const embedCode = document.getElementById("embedcodetag");
@@ -118,6 +119,8 @@ function perform_search(searchInput, searchDef, searchRes) {
searchDef.classList.add("hidden"); searchDef.classList.add("hidden");
searchRes.classList.remove("hidden"); searchRes.classList.remove("hidden");
searchRes.classList.add("flex"); searchRes.classList.add("flex");
spinner.classList.remove("hidden");
spinner.classList.add("flex");
let searchString = searchInput.value; let searchString = searchInput.value;
$.ajax({ $.ajax({
@@ -144,7 +147,8 @@ function perform_search(searchInput, searchDef, searchRes) {
console.error('error:', error); console.error('error:', error);
}, },
complete: function() { complete: function() {
console.log("completed"); spinner.classList.remove("flex");
spinner.classList.add("hidden");
} }
}); });
} }

13
htdocs/assets/style.css
View File

@@ -706,6 +706,11 @@ video {
margin-bottom: 0.30rem; margin-bottom: 0.30rem;
} }
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.mb-1 { .mb-1 {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
} }
@@ -1163,6 +1168,10 @@ video {
border-width: 5px; border-width: 5px;
} }
.border-\[3px\] {
border-width: 3px;
}
.border-b-\[2px\] { .border-b-\[2px\] {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
@@ -1179,6 +1188,10 @@ video {
border-top-width: 5px; border-top-width: 5px;
} }
.border-t-\[3px\] {
border-top-width: 3px;
}
.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] { .border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
border-color: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.15);
} }