edpibu/nummi
1
Fork 0
Code Issues 4 Releases Activity

Update up-down icons

Browse source
This commit is contained in:
Edgar P. Burkhart 2024-01-04 15:38:53 +01:00
parent b0716a65b7
commit 6bd83feafe
Signed by: edpibu
GPG key ID: 9833D3C5A25BD227
4 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
nummi/history/templates/history/plot.html
View file

@ -70,7 +70,7 @@
{% endif %} {% endif %}
{% if m %} {% if m %}
<td class="{% if m.sum > 0 %}p{% else %}m{% endif %}" <td class="{% if m.sum > 0 %}p{% else %}m{% endif %}"
style="background-color: color-mix(in hsl, currentcolor {% calendar_opacity m.sum history.max.sum %}, white)" style="--opacity: {% calendar_opacity m.sum history.max.sum %}"
title="{{ m.sum|pmrvalue }}">{% up_down_icon m.sum %}</td> title="{{ m.sum|pmrvalue }}">{% up_down_icon m.sum %}</td>
{% else %} {% else %}
<td></td> <td></td>

6
nummi/history/templatetags/history_extras.py
View file

@ -30,11 +30,11 @@ def empty_calendar_cells_end(n):
@register.simple_tag @register.simple_tag
def up_down_icon(val): def up_down_icon(val):
if val > 0: if val > 0:
return remix("arrow-up-s", "green w") return remix("arrow-up-s", "green")
elif val < 0: elif val < 0:
return remix("arrow-down-s", "red w") return remix("arrow-down-s", "red")
return "" return remix("equal", "white")
@register.simple_tag @register.simple_tag

9
nummi/main/static/main/css/main.css
View file

@ -232,14 +232,19 @@ footer {
font-weight: normal; font-weight: normal;
&.green, &.green,
&.red { &.red,
color: white; &.white {
color: var(--bg);
&.green { &.green {
background: var(--green); background: var(--green);
} }
&.red { &.red {
background: var(--red); background: var(--red);
} }
&.white {
background: var(--bg-01);
color: var(--text);
}
border-radius: var(--radius); border-radius: var(--radius);
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;

9
nummi/main/static/main/css/plot.css
View file

@ -101,11 +101,16 @@ table.full-width col.bar {
td { td {
text-align: center; text-align: center;
background-color: color-mix(
in hsl,
var(--td-bg, var(--bg)) var(--opacity),
var(--bg)
);
&.p { &.p {
color: var(--green); --td-bg: var(--green);
} }
&.m { &.m {
color: var(--red); --td-bg: var(--red);
} }
} }
} }