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

add tooltip stats

Browse Source
This commit is contained in:
Ehab Hassan
2024-07-03 12:16:05 +03:00
parent 96d0214d76
commit 6d228ce4bd
1 changed files with 43 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
templates/shortcodes/grid_stats.html
View File

@@ -5,7 +5,8 @@
{{body | markdown | safe }} {{body | markdown | safe }}
<div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse"> <div class="items my-10 block lg:flex lg:flex-wrap justify-center items-center animate-pulse">
<!-- capacity --> <!-- capacity -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4"> <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total amount of storage (SSD, HDD, & RAM) on the grid.</span>
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-08.png" src="images/V3-08.png"
@@ -16,7 +17,8 @@
<span class="block text-md mt-4 font-normal capitalize">capacity</span> <span class="block text-md mt-4 font-normal capitalize">capacity</span>
</div> </div>
<!-- cores --> <!-- cores -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4"> <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of CPU (central processing unit) cores available on the grid</span>
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-11.png" src="images/V3-11.png"
@@ -27,7 +29,8 @@
<span class="block text-md mt-4 font-normal capitalize">cores</span> <span class="block text-md mt-4 font-normal capitalize">cores</span>
</div> </div>
<!-- Nodes --> <!-- Nodes -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4"> <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of nodes on the grid.</span>
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-09.png" src="images/V3-09.png"
@@ -38,7 +41,8 @@
<span class="block text-md mt-4 font-normal capitalize">nodes</span> <span class="block text-md mt-4 font-normal capitalize">nodes</span>
</div> </div>
<!-- countries --> <!-- countries -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4"> <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of countries where at least one node is connected and operational.</span>
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/V3-10.png" src="images/V3-10.png"
@@ -49,7 +53,8 @@
<span class="block text-md mt-4 font-normal capitalize">countries</span> <span class="block text-md mt-4 font-normal capitalize">countries</span>
</div> </div>
<!-- farms --> <!-- farms -->
<div class="item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4"> <div class="tooltip item flex flex-col border border-gray-50 shadow-lg bg-white mx-4 p-6 my-4">
<span class="tooltiptext">The total number of farms on the grid.</span>
<img <img
class="mx-auto p-4" class="mx-auto p-4"
src="images/farm.png" src="images/farm.png"
@@ -103,6 +108,39 @@
background-color:#5596f5 !important; background-color:#5596f5 !important;
} }
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
font-size: 14px;
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 10px;
border-radius: 4px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: -50px;
right: -60px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style> </style>