gru/lista_zakupowa_live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux i poprawki

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2025-07-02 12:57:38 +02:00
parent 85446f950c
commit 36cdcf175a
1 changed files with 27 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
templates/list_guest.html
View File

@ -9,9 +9,11 @@
<ul id="items" class="list-group mb-3">
{% for item in items %}
<li class="list-group-item bg-dark text-white d-flex align-items-center gap-2 flex-wrap" id="item-{{ item.id }}">
<input type="checkbox" {% if item.purchased %}checked{% endif %}>
<span id="name-{{ item.id }}">{{ item.name }}</span>
<li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap clickable-item" id="item-{{ item.id }}">
<div class="d-flex align-items-center gap-3 flex-grow-1">
<input type="checkbox" class="form-check-input large-checkbox" {% if item.purchased %}checked{% endif %}>
<span id="name-{{ item.id }}" class="flex-grow-1">{{ item.name }}</span>
</div>
</li>
{% endfor %}
</ul>
@ -25,6 +27,28 @@
<script>
setupList({{ list.id }}, 'Gość');
// Dodanie kliknięcia na cały wiersz
document.querySelectorAll('.clickable-item').forEach(item => {
item.addEventListener('click', function(e) {
// Ignoruj kliknięcia w input (żeby nie duplikować akcji)
if (e.target.tagName.toLowerCase() !== 'input') {
const checkbox = this.querySelector('input[type="checkbox"]');
checkbox.checked = !checkbox.checked;
checkbox.dispatchEvent(new Event('change'));
}
});
});
</script>
<style>
.large-checkbox {
width: 1.5em;
height: 1.5em;
}
.clickable-item {
cursor: pointer;
}
</style>
{% endblock %}