ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading to stats cards

Browse Source
This commit is contained in:
samaradel
2024-03-12 23:06:39 +02:00
parent 1e8346282e
commit 0a25f36dd6
2 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/custom.js
View File

@@ -142,8 +142,10 @@ window.onload = function () {
}); });
}); });
document.getElementById("filter-btn").addEventListener('click', toggleFilter); document.getElementById("filter-btn").addEventListener("click", toggleFilter);
document.getElementById("mobile-learn-btn").addEventListener('click', toggleMenu); document
.getElementById("mobile-learn-btn")
.addEventListener("click", toggleMenu);
}; };
function openInNewTab(url) { function openInNewTab(url) {
@@ -198,6 +200,8 @@ function mergeStatsData(stats) {
res.countries = Object.keys(res.nodesDistribution).length; res.countries = Object.keys(res.nodesDistribution).length;
} }
let capacity = toTeraOrGiga(res.totalHru + res.totalSru); let capacity = toTeraOrGiga(res.totalHru + res.totalSru);
let items = document.querySelector(".items");
items.classList.remove('animate-pulse');
document.getElementById("capacity").innerHTML = capacity; document.getElementById("capacity").innerHTML = capacity;
document.getElementById("nodes").innerHTML = res.nodes; document.getElementById("nodes").innerHTML = res.nodes;
document.getElementById("countries").innerHTML = res.countries; document.getElementById("countries").innerHTML = res.countries;

10
templates/shortcodes/grid_stats.html
View File

@@ -3,9 +3,9 @@
<div class="relative lg:max-w-6xl mx-auto"> <div class="relative lg:max-w-6xl mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto"> <div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }} {{body | markdown | safe }}
<div class="my-10 grid lg:grid-cols-4 lg:gap-8"> <div class="items my-10 grid lg:grid-cols-4 lg:gap-8 animate-pulse">
<!-- capacity --> <!-- capacity -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4"> <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-08.png" src="images/V3-08.png"
@@ -16,7 +16,7 @@
<span class="block text-lg mt-4 font-normal capitalize">capacity</span> <span class="block text-lg mt-4 font-normal capitalize">capacity</span>
</div> </div>
<!-- Nodes --> <!-- Nodes -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4"> <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-09.png" src="images/V3-09.png"
@@ -27,7 +27,7 @@
<span class="block text-lg mt-4 font-normal capitalize">nodes</span> <span class="block text-lg mt-4 font-normal capitalize">nodes</span>
</div> </div>
<!-- countries --> <!-- countries -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4"> <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-10.png" src="images/V3-10.png"
@@ -38,7 +38,7 @@
<span class="block text-lg mt-4 font-normal capitalize">countries</span> <span class="block text-lg mt-4 font-normal capitalize">countries</span>
</div> </div>
<!-- cores --> <!-- cores -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4"> <div class="item flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-11.png" src="images/V3-11.png"