Add fee indicator styling and conditional display

Implemented CSS styles for an optimal fee indicator, including a gold star and a label. Updated HTML to conditionally show the star and "DATUM" label when the pool fees percentage is between 0.9 and 1.3.
This commit is contained in:
DJObleezy 2025-04-17 15:27:30 -07:00
parent 982fe295d2
commit 014b0acc24
2 changed files with 24 additions and 0 deletions

View File

@ -215,3 +215,24 @@
.chart-container-relative {
position: relative;
}
/* Styling for optimal fee indicator */
.fee-star {
color: gold;
margin-left: 4px;
font-size: 1.2em;
vertical-align: middle;
}
.datum-label {
color: #ff9d00; /* Orange color */
font-size: 0.85em;
font-weight: bold;
text-transform: uppercase;
margin-left: 4px;
padding: 2px 5px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
letter-spacing: 0.5px;
vertical-align: middle;
}

View File

@ -44,6 +44,9 @@
<span id="pool_fees_percentage" class="metric-value">
{% if metrics and metrics.pool_fees_percentage is defined %}
{{ metrics.pool_fees_percentage }}%
{% if metrics.pool_fees_percentage >= 0.9 and metrics.pool_fees_percentage <= 1.3 %}
<span class="fee-star"></span> <span class="datum-label">DATUM</span>
{% endif %}
{% else %}
N/A
{% endif %}