logistic-bot/food-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pleasing button layout, indicating that it is checked

Browse source
This commit is contained in:
Khaïs COLIN 2025-10-25 13:56:39 +02:00
parent fa0d8930b8
commit 897309a3b9
Signed by: logistic-bot
SSH key fingerprint: SHA256:RlpiqKeXpcPFZZ4y9Ou4xi2M8OhRJovIwDlbCaMsuAo
3 changed files with 21 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
foods.db
View file

Binary file not shown.

8
templates/food.html
View file

@ -21,17 +21,17 @@
{% if loop.index as i32 <= food.target_servings %}
<label class="ok">
{% if loop.index as i32 <= food.actual_servings %}
<input type="checkbox" checked hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}">
<input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}" value="●" class="checked">
{% else %}
<input type="checkbox" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}">
<input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}" value="●" class="unchecked">
{% endif %}
</label>
{% else %}
<label class="bad">
{% if loop.index as i32 <= food.actual_servings %}
<input type="checkbox" checked hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}">
<input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 - 1}}" hx-target="#card-{{ food.id }}" value="●" class="checked">
{% else %}
<input type="checkbox" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}">
<input type="button" hx-post="/set/{{ food.id }}/to/{{ loop.index as i32 }}" hx-target="#card-{{ food.id }}" value="●" class="unchecked">
{% endif %}
</label>
{% endif %}

17
templates/index.html
View file

@ -132,5 +132,22 @@
accent-color: hsl(from #cb8175 h 90% l);
background-color: hsl(from #cb8175 h 60% l);
}
input[type="button"] {
display: inline-block;
border: none;
width: 100%;
height: 100%;
background-color: inherit;
cursor: pointer;
}
.unchecked {
color: transparent;
}
input[type="button"]:hover {
background-color: beige;
}
</style>
</html>