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> </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"> <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 --> <!-- 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> <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> <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> <dd id="capacity" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div> </div>
</div>
<!-- cores --> <!-- 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> <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> <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> <dd id="cores" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div> </div>
</div>
<!-- Nodes --> <!-- 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> <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> <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> <dd id="nodes" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div> </div>
</div>
<!-- countries --> <!-- 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> <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> <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> <dd id="countries" class="order-first text-3xl font-semibold tracking-tight text-white"></dd>
</div> </div>
</div>
</dl> </dl>
</div> </div>
<div class="max-w-4xl items-center mx-auto"> <div class="max-w-4xl items-center mx-auto">
@@ -85,14 +93,13 @@
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ width: 100%;
} }
/* Tooltip text */ /* Tooltip text */
.tooltip .tooltiptext { .tooltip .tooltiptext {
font-size: 12px; font-size: 12px;
visibility: hidden; visibility: hidden;
width: 250px;
background-color: rgb(26 26 26 / 90%); background-color: rgb(26 26 26 / 90%);
color: #fff; color: #fff;
text-align: center; text-align: center;
@@ -102,7 +109,10 @@
/* Position the tooltip text - see examples below! */ /* Position the tooltip text - see examples below! */
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 4px; bottom: -7px;
top: 0px;
left: 0px;
right: 0px;
/* right: -60px; */ /* right: -60px; */
} }
@@ -115,10 +125,10 @@
.tooltip .tooltiptext { .tooltip .tooltiptext {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 2px !important; bottom: -7px !important;
right: auto !important; right: 0px !important;
top: auto; top: 0px !important;
left: auto; left: 0px !important;
} }
} }