Make form layout better at wide screens & Make horizontal form column layout configurable via global Twig variables (#1293)

* Initial plan

* Make form column layout configurable with global Twig variables

Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>

* Rename form column Twig globals to shorter names: label_col, input_col, offset_col

Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>

* Fixed remaining places where offsets where used

* Fixed margin of delete button on admin forms

* Rename Twig globals: col_label, col_input, offset_label

Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>

* Added documentation to our twig class variables

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jbtronics <5410681+jbtronics@users.noreply.github.com>
Co-authored-by: Jan Böhmer <mail@jan-boehmer.de>
This commit is contained in:
Copilot 2026-03-07 16:14:58 +01:00 committed by GitHub
parent e8d90487d2
commit e84bae2807
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 86 additions and 81 deletions

View file

@ -4,7 +4,7 @@
{{ form_row(form.eda_info.visibility) }}
<div class="row mb-2">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
{{ form_widget(form.eda_info.exclude_from_bom) }}
{{ form_widget(form.eda_info.exclude_from_board) }}
{{ form_widget(form.eda_info.exclude_from_sim) }}
@ -12,7 +12,7 @@
</div>
<div class="row">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
</div>
</div>

View file

@ -1,7 +1,7 @@
{{ form_row(form.name) }}
{% if part.category is not null and part.category.partnameHint is not empty %}
<div class="row">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<p class="form-text help-text"><b>{% trans %}part.edit.name.category_hint{% endtrans %}:</b> {{ part.category.partnameHint }}</p>
</div>
</div>

View file

@ -107,7 +107,7 @@
{% set id = 'collapse_' ~ random() %}
<a class="btn btn-link offset-sm-3 btn-sm" data-bs-toggle="collapse" href="#{{ id }}" role="button" aria-expanded="false" aria-controls="{{ id }}">
<a class="btn btn-link {{ offset_label }} btn-sm" data-bs-toggle="collapse" href="#{{ id }}" role="button" aria-expanded="false" aria-controls="{{ id }}">
{% trans %}part_lot.edit.advanced{% endtrans %}
</a>
<div class="collapse" id="{{ id }}">
@ -142,7 +142,7 @@
<div class="mb-2 row">
{{ form_label(form.file) }}
<div class="col-sm-9">
<div class="{{ col_input }}">
{{ form_widget(form.file) }}
{{ form_errors(form.file) }}
<small class="text-muted">{% trans %}attachment.max_file_size{% endtrans %}: {{ max_upload_size | format_bytes }}</small>

View file

@ -140,7 +140,7 @@
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<div class="btn-group">
{{ form_widget(form.save) }}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

View file

@ -25,7 +25,7 @@
{% endblock %}
{% block card_content %}
<p class="text-muted offset-sm-3">
<p class="text-muted {{ offset_label }}">
{% trans %}parts.import.help{% endtrans %}<br>
{% trans with {'%link%': 'https://docs.part-db.de/usage/import_export.html'} %}parts.import.help_documentation{% endtrans %}
</p>

View file

@ -13,39 +13,39 @@
<input type="hidden" name="_redirect" value="{{ uri_without_host(app.request) }}">
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.stocktake_modal.expected_amount{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
<span id="stocktake-modal-expected-amount" class="form-control-plaintext">0</span>
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.stocktake_modal.actual_amount{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
<input type="number" required class="form-control" min="0" step="{{ (part.partUnit and not part.partUnit.integer) ? 'any' : '1' }}" name="actual_amount" value="">
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.withdraw_modal.comment{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
<input type="text" class="form-control" name="comment" value="">
<div class="form-text">{% trans %}part.info.withdraw_modal.comment.hint{% endtrans %}</div>
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.withdraw_modal.timestamp{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
{# The timestamp must be between a year ago and 1 hour in the future #}
<input type="datetime-local" class="form-control" name="timestamp" value=""
max="{{ "+10mins"|date('Y-m-d\\TH:i') }}" min="{{ "-1year"|date('Y-m-d\\TH:i') }}">

View file

@ -18,17 +18,17 @@
<input type="hidden" name="_redirect" value="{{ uri_without_host(app.request) }}">
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.withdraw_modal.amount{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
<input type="number" required class="form-control" min="0" step="{{ (part.partUnit and not part.partUnit.integer) ? 'any' : '1' }}" name="amount" value="">
</div>
</div>
<div class="row mb-2 d-none" id="withdraw-modal-move-to">
<label class="col-form-label col-sm-3">{% trans %}part.info.withdraw_modal.move_to{% endtrans %}</label>
<div class="col-sm-9">
<label class="col-form-label {{ col_label }}">{% trans %}part.info.withdraw_modal.move_to{% endtrans %}</label>
<div class="{{ col_input }}">
{% for lots in part.partLots|filter(l => l.instockUnknown == false) %}
<div class="form-check">
@ -42,20 +42,20 @@
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.withdraw_modal.comment{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
<input type="text" class="form-control" name="comment" value="" {% if event_comment_needed('part_stock_operation') %}required{% endif %}>
<div id="emailHelp" class="form-text">{% trans %}part.info.withdraw_modal.comment.hint{% endtrans %}</div>
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-3">
<label class="col-form-label {{ col_label }}">
{% trans %}part.info.withdraw_modal.timestamp{% endtrans %}
</label>
<div class="col-sm-9">
<div class="{{ col_input }}">
{# The timestamp must be between a year ago and 1 hour in the future #}
<input type="datetime-local" class="form-control" name="timestamp" value=""
max="{{ "+10mins"|date('Y-m-d\\TH:i') }}" min="{{ "-1year"|date('Y-m-d\\TH:i') }}">
@ -64,7 +64,7 @@
</div>
<div class="row mb-2">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
{# The timestamp must be between a year ago and 1 hour in the future #}
<div class="form-check">
<input class="form-check-input" type="checkbox" name="delete_lot_if_empty" value="true" id="withdraw_modal_delete_if_empty">

View file

@ -148,7 +148,7 @@
{{ form_row(filterForm.discard) }}
<div class="row mb-3">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<button type="button" class="btn btn-danger" {{ stimulus_action('helpers/form_cleanup', 'clearAll') }}>{% trans %}filter.clear_filters{% endtrans %}</button>
</div>
</div>