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

fix grid status to be dynamic

Browse Source
This commit is contained in:
Ehab Hassan
2024-11-26 13:52:01 +02:00
parent 6de8bd02cf
commit 0130a3de18
1 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/partials/home/grid_stats.html
View File

@@ -9,29 +9,37 @@
</div>
<dl class="items mt-16 grid grid-cols-1 gap-2 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-4">
<!-- capacity -->
<div class="tooltip fade-in flex flex-col bg-white/5 p-8">
<div class="fade-in flex flex-col justify-center items-center bg-white/5 p-6">
<div class="tooltip">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid. 1 petabyte equals roughly 1 million gigabytes.</span>
<dt class="text-sm/6 font-light text-gray-300">CAPACITY</dt>
<dd id="capacity" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div>
</div>
<!-- cores -->
<div class="tooltip fade-in flex flex-col bg-white/5 p-8">
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<span class="tooltiptext">The total number of Central Processing Unit cores (compute power) available on the grid.</span>
<dt class="text-sm/6 font-light text-gray-300">CORES</dt>
<dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div>
</div>
<!-- Nodes -->
<div class="tooltip fade-in flex flex-col bg-white/5 p-8">
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<span class="tooltiptext">The total number of nodes on the grid. A node is a computer server 100% dedicated to the network.</span>
<dt class="text-sm/6 font-light text-gray-300">NODES</dt>
<dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div>
</div>
<!-- countries -->
<div class="tooltip fade-in flex flex-col bg-white/5 p-8">
<div class="fade-in flex flex-col bg-white/5 p-6">
<div class="tooltip">
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
<dt class="text-sm/6 font-light text-gray-300">COUNTRIES</dt>
<dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div>
</div>
</dl>
</div>
<div class="max-w-4xl items-center mx-auto">
@@ -85,14 +93,13 @@
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
width: 100%;
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 12px;
visibility: hidden;
width: 250px;
background-color: rgb(26 26 26 / 90%);
color: #fff;
text-align: center;
@@ -102,7 +109,10 @@
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: 4px;
bottom: -7px;
top: 0px;
left: 0px;
right: 0px;
/* right: -60px; */
}
@@ -115,10 +125,10 @@
.tooltip .tooltiptext {
position: absolute;
z-index: 1;
bottom: 2px !important;
right: auto !important;
top: auto;
left: auto;
bottom: -7px !important;
right: 0px !important;
top: 0px !important;
left: 0px !important;
}
}