Add visually hidden label for dynamic input, move read-only logic in the macro

This commit is contained in:
Gregoo 2025-01-29 15:57:19 +01:00
parent cf11e4d718
commit f44192a114
4 changed files with 14 additions and 13 deletions

View File

@ -73,7 +73,7 @@ class BrickPart(RebrickablePart):
# A identifier for HTML component
def html_id(self) -> str:
components: list[str] = []
components: list[str] = ['part']
if self.fields.figure is not None:
components.append(self.fields.figure)

View File

@ -46,7 +46,7 @@
object-fit:contain;
}
.table-td-missing {
.table-td-input {
max-width: 150px;
}

View File

@ -16,8 +16,13 @@
{% endif %}
{% endmacro %}
{% macro input(id, html_id, url, value) %}
<input class="form-control form-control-sm flex-shrink-1" type="text" value="{% if value %}{{ value }}{% endif %}"
{% macro input(name, id, prefix, url, value, all=none, read_only=none) %}
{% if all or read_only %}
{{ value }}
{% else %}
<label class="visually-hidden" for="{{ prefix }}-{{ id }}">{{ name }}</label>
<div class="input-group">
<input class="form-control form-control-sm flex-shrink-1" type="text" id="{{ prefix }}-{{ id }}" value="{% if value %}{{ value }}{% endif %}"
{% if g.login.is_authenticated() %}
onchange="change_part_missing_amount(this, '{{ id }}', '{{ html_id }}', '{{ url }}')"
{% else %}
@ -25,8 +30,10 @@
{% endif %}
autocomplete="off">
{% if g.login.is_authenticated() %}
<span id="status-part-{{ id }}-{{ html_id }}" class="input-group-text ri-save-line"></span>
<span id="status-{{ prefix }}-{{ id }}" class="input-group-text ri-save-line"></span>
{% else %}
<span class="input-group-text ri-prohibited-line"></span>
{% endif %}
</div>
{% endif %}
{% endmacro %}

View File

@ -28,14 +28,8 @@
{% endif %}
{% endif %}
{% if not no_missing %}
<td {% if not all %}id="sort-part-{{ item.fields.id }}-{{ item.html_id() }}" data-sort="{{ item.fields.total_missing }}"{% endif %} class="table-td-missing">
{% if all or read_only_missing %}
{{ item.fields.total_missing }}
{% else %}
<div class="input-group">
{{ form.input(item.fields.id, item.html_id(), item.url_for_missing(), item.fields.total_missing) }}
</div>
{% endif %}
<td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
{{ form.input('Missing', item.fields.id, item.html_id(), item.url_for_missing(), item.fields.total_missing, all=all, read_only=read_only_missing) }}
</td>
{% endif %}
{% if all %}