Skip to content

Make horizontal form column layout configurable via global Twig variables #1293

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jbtronics merged 7 commits into from
Mar 7, 2026
Merged

Make horizontal form column layout configurable via global Twig variables #1293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aed1c4d
Initial plan
Copilot Mar 7, 2026
2769772
Make form column layout configurable with global Twig variables
Copilot Mar 7, 2026
b508d57
Rename form column Twig globals to shorter names: label_col, input_co…
Copilot Mar 7, 2026
3aa7480
Fixed remaining places where offsets where used
jbtronics Mar 7, 2026
815b2b6
Fixed margin of delete button on admin forms
jbtronics Mar 7, 2026
17e83a9
Rename Twig globals: col_label, col_input, offset_label
Copilot Mar 7, 2026
ebcda8b
Added documentation to our twig class variables
jbtronics Mar 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/packages/twig.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ twig:
saml_enabled: '%partdb.saml.enabled%'
part_preview_generator: '@App\Services\Attachments\PartPreviewGenerator'

# Bootstrap grid classes used for horizontal form layouts
col_label: 'col-sm-3 col-lg-2' # The column classes for form labels
col_input: 'col-sm-9 col-lg-10' # The column classes for form input fields
offset_label: 'offset-sm-3 offset-lg-2' # Offset classes for elements that should be aligned with the input fields (e.g., submit buttons)

when@test:
twig:
strict_variables: true
4 changes: 2 additions & 2 deletions templates/admin/_delete_form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions templates/admin/_duplicate.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions templates/admin/_export_form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions templates/admin/base_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/admin/category_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,21 @@
{{ 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) }}
</div>
</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>
Expand Down
6 changes: 3 additions & 3 deletions templates/admin/currency_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@
{{ 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>
{% endif %}

{{ 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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/footprint_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/label_profile_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) }}

Expand Down
4 changes: 2 additions & 2 deletions templates/admin/project_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
2 changes: 1 addition & 1 deletion templates/admin/storelocation_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions templates/admin/user_admin.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion templates/attachment_list.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,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>
Expand Down
4 changes: 2 additions & 2 deletions templates/form/collection_types_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
<div class="">
{{ form_row(form.mountnames) }}
<div class="row mb-2">
<label class="col-form-label col-sm-3">{% trans %}project.bom.price{% endtrans %}</label>
<div class="col-sm-9">
<label class="col-form-label {{ col_label }}">{% trans %}project.bom.price{% endtrans %}</label>
<div class="{{ col_input }}">
<div class="input-group">
{{ form_widget(form.price) }}
{{ form_widget(form.priceCurrency) }}
Expand Down
4 changes: 2 additions & 2 deletions templates/form/extended_bootstrap_layout.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@


{% block form_label_class -%}
col-sm-3
{{ col_label }}
{%- endblock form_label_class %}

{% block form_group_class -%}
col-sm-9
{{ col_input }}
{%- endblock form_group_class %}

{% block si_unit_widget %}
Expand Down
2 changes: 1 addition & 1 deletion templates/info_providers/from_url/from_url.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
{% endblock %}

{% block card_content %}
<p class="text-muted offset-3">{% trans %}info_providers.from_url.help{% endtrans %}</p>
<p class="text-muted {{ offset_label }}">{% trans %}info_providers.from_url.help{% endtrans %}</p>

{{ form_start(form) }}
{{ form_row(form.url) }}
Expand Down
2 changes: 1 addition & 1 deletion templates/info_providers/search/part_search.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
{{ form_row(form.providers) }}

<div class="row mb-2">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<a href="{{ path('info_providers_list') }}">{% trans %}info_providers.search.info_providers_list{% endtrans %}</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions templates/info_providers/settings/provider_settings.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{% block card_title %}<i class="fa-solid fa-gear fa-fw"></i> {% trans %}info_providers.settings.title{% endtrans %}: <b>{{ info_provider_info.name }}</b>{% endblock %}

{% block card_content %}
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<h3>
{% if info_provider_info.url is defined %}
<a href="{{ info_provider_info.url }}" class="link-external" target="_blank" rel="nofollow">{{ info_provider_info.name }}</a>
Expand All @@ -23,7 +23,7 @@

{{ form_start(form) }}
<div class="row">
<div class="offset-sm-3 col mb-3 ps-2">
<div class="{{ offset_label }} col mb-3 ps-2">
<b>{{ form_help(form) }}</b>
</div>
</div>
Expand Down
14 changes: 7 additions & 7 deletions templates/label_system/dialog.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,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) }}

Expand All @@ -59,8 +59,8 @@

<div class="tab-pane" id="profiles" role="tabpanel" aria-labelledby="profiles-tab">
<div class="form-group row">
<label class="col-sm-3 col-form-label">{% trans %}label_generator.selected_profile{% endtrans %}</label>
<div class="col-sm-9">
<label class="{{ col_label }} col-form-label">{% trans %}label_generator.selected_profile{% endtrans %}</label>
<div class="{{ col_input }}">
<span class="form-control-plaintext">{{ profile.name ?? '-' }}
{% if profile and is_granted("edit", profile) %}
<a href="{{ entity_url(profile, 'edit') }}" title="{% trans %}label_generator.edit_profile{% endtrans %}"
Expand All @@ -71,7 +71,7 @@
</div>

<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="loadProfilesButton"
{% if not is_granted("@labels.create_labels") %}disabled{% endif %}
Expand All @@ -97,7 +97,7 @@

{% if is_granted("@labels.read_profiles") %}
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
<a class="btn btn-link" href="{{ path('label_profile_new') }}">{% trans %}label_generator.edit_profiles{% endtrans %}</a>
</div>
</div>
Expand All @@ -108,7 +108,7 @@
{% endif %}

<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
<div class="input-group">
{{ form_widget(form.save_profile_name) }}
{{ form_widget(form.save_profile) }}
Expand All @@ -124,7 +124,7 @@
{{ form_end(form) }}
{% if pdf_data %}
<div class="row">
<div class="col-sm-9 offset-sm-3">
<div class="{{ col_input }} {{ offset_label }}">
<a data-turbo="false" class="btn btn-secondary" href="#" {{ stimulus_controller('pages/label_download_btn')}} {{ stimulus_action('pages/label_download_btn', 'download')}} download="{{ filename ?? '' }}">
{% trans %}label_generator.download{% endtrans %}
</a>
Expand Down
2 changes: 1 addition & 1 deletion templates/label_system/scanner/scanner.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

<div class="">
<div class="form-group row">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
<div class="img-thumbnail" style="max-width: 600px;">
<div id="reader-box" {{ stimulus_controller('pages/barcode_scan') }}></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion templates/log_system/log_list.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,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>
Expand Down
4 changes: 2 additions & 2 deletions templates/parts/edit/_eda.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
{{ 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) }}
</div>
</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>
Expand Down
2 changes: 1 addition & 1 deletion templates/parts/edit/_main.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
4 changes: 2 additions & 2 deletions templates/parts/edit/edit_form_styles.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}">
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/parts/edit/edit_part_info.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion templates/parts/import/parts_import.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading