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

@ -5,7 +5,7 @@
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
<div class="form-group">
<div class=""></div>
<div class="col-sm offset-sm-3 ps-2">
<div class="{{ col_input }} {{ offset_label }} ps-1">
{% set delete_disabled = (not is_granted("delete", entity)) or (entity.group is defined and entity.id == 1) or entity == app.user %}
<div class="btn-group">
<button class="btn btn-danger" {% if delete_disabled %}disabled{% endif %}>{% trans %}entity.delete{% endtrans %}</button>
@ -20,7 +20,7 @@
</div>
</div>
{% if entity.parent is defined %}
<div class="ms-2 custom-control custom-checkbox custom-control-inline">
<div class="ms-1 custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="form-check-input" id="recursive" name="delete_recursive">
<label class="form-check-label" for="recursive">{% trans %}entity.delete.recursive{% endtrans %}</label>
</div>

View file

@ -1,5 +1,5 @@
<div class="row mb-2">
<div class="offset-3 col">
<div class="{{ offset_label }} {{ col_input }}">
<a class="btn btn-info {% if not is_granted('create', entity) %}disabled{% endif %}" href="{{ entity_url(entity, 'clone') }}">{% trans %}entity.duplicate{% endtrans %}</a>
</div>
</div>
</div>

View file

@ -35,8 +35,8 @@
</div>
<div class="row mt-2">
<div class="offset-sm-3 col-sm">
<div class="{{ offset_label }} col-sm">
<button type="submit" class="btn btn-primary">{% trans %}export.btn{% endtrans %}</button>
</div>
</div>
</form>
</form>

View file

@ -129,7 +129,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 {% if entity.id is not null %}btn-primary{% else %}btn-success{% endif %} dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -186,7 +186,7 @@
<div id="mass_creation" class="tab-pane fade">
<div class="row">
<p class="text-muted offset-sm-3 col-sm-9">{% trans %}mass_creation.help{% endtrans %}</p>
<p class="text-muted {{ offset_label }} {{ col_input }}">{% trans %}mass_creation.help{% endtrans %}</p>
</div>
{{ form(mass_creation_form) }}
</div>

View file

@ -41,13 +41,13 @@
{{ form_row(form.eda_info.reference_prefix) }}
<div class="row">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
{{ form_row(form.eda_info.visibility) }}
</div>
</div>
<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) }}
@ -55,7 +55,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

@ -10,10 +10,10 @@
{{ form_row(form.iso_code) }}
{% if entity.isoCode %}
<div class="mt-0 mb-3">
<span class="form-text text-muted offset-3 col-9">
<span class="form-text text-muted {{ offset_label }} {{ col_input }}">
<b>{% trans %}currency.iso_code.caption{% endtrans %}:</b> {{ entity.isoCode }}
</span>
<span class="form-text text-muted offset-3 col-9">
<span class="form-text text-muted {{ offset_label }} {{ col_input }}">
<b>{% trans %}currency.symbol.caption{% endtrans %}:</b> {{ entity.isoCode | currency_symbol }}
</span>
</div>
@ -21,7 +21,7 @@
{{ form_row(form.exchange_rate) }}
{% if entity.inverseExchangeRate %}
<p class="form-text text-muted offset-3 col-9">
<p class="form-text text-muted {{ offset_label }} {{ col_input }}">
{{ '1'|format_currency(vars.base_currency()) }} = {{ entity.inverseExchangeRate.tofloat | format_currency(entity.isoCode, {fraction_digit: 5}) }}<br>
{{ '1'|format_currency(entity.isoCode) }} = {{ entity.exchangeRate.tofloat | format_currency(vars.base_currency(), {fraction_digit: 5}) }}
</p>

View file

@ -28,7 +28,7 @@
{% block additional_panes %}
<div class="tab-pane" id="eda">
<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

@ -27,7 +27,7 @@
{{ form_row(form.options.supported_element) }}
<div class="mb-2 row">
{{ form_label(form.options.width) }}
<div class="col-sm-9">
<div class="{{ col_input }}">
<div class="input-group">
{{ form_widget(form.options.width) }}

View file

@ -31,8 +31,8 @@
{{ form_row(form.status) }}
{% if entity.id %}
<div class="mb-2 row">
<label class="col-form-label col-sm-3">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
<div class="col-sm-9">
<label class="col-form-label {{ col_label }}">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
<div class="{{ col_input }}">
{% if entity.buildPart %}
<span class="form-control-static"><a href="{{ entity_url(entity.buildPart) }}">{{ entity.buildPart.name }}</a></span>
{% else %}

View file

@ -8,7 +8,7 @@
{% block additional_controls %}
{% if entity.id %}
<div class="row form-group">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
{{ dropdown.profile_dropdown('storelocation', entity.id) }}
</div>
</div>

View file

@ -50,7 +50,7 @@
<div class="tab-pane" id="password">
{% if entity.samlUser %}
<div class="offset-3 mb-3 col-9">
<div class="mb-3 {{ offset_label }} {{ col_input }}">
<span class="badge badge-warning bg-warning"><i class="fa-solid fa-house-user"></i> {% trans %}user.saml_user{% endtrans %}</span>
</div>
{% endif %}
@ -60,7 +60,7 @@
{{ form_row(form.disabled) }}
{% if entity.id is not null %}
<div class="offset-3 mb-3">
<div class="{{ offset_label }} {{ col_input }} mb-3">
<hr>
<h6>{% trans %}user.edit.tfa.caption{% endtrans %}</h6>