Skip to content

Commit e84bae2

Browse files
Copilotjbtronics
Copilot
and
jbtronics
authored
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>
1 parent e8d9048 commit e84bae2

34 files changed

Lines changed: 86 additions & 81 deletions

‎config/packages/twig.yaml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ twig:
1818
saml_enabled: '%partdb.saml.enabled%'
1919
part_preview_generator: '@App\Services\Attachments\PartPreviewGenerator'
2020

21+
# Bootstrap grid classes used for horizontal form layouts
22+
col_label: 'col-sm-3 col-lg-2' # The column classes for form labels
23+
col_input: 'col-sm-9 col-lg-10' # The column classes for form input fields
24+
offset_label: 'offset-sm-3 offset-lg-2' # Offset classes for elements that should be aligned with the input fields (e.g., submit buttons)
25+
2126
when@test:
2227
twig:
2328
strict_variables: true

‎templates/admin/_delete_form.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ entity.id) }}">
66
<div class="form-group">
77
<div class=""></div>
8-
<div class="col-sm offset-sm-3 ps-2">
8+
<div class="{{ col_input }} {{ offset_label }} ps-1">
99
{% set delete_disabled = (not is_granted("delete", entity)) or (entity.group is defined and entity.id == 1) or entity == app.user %}
1010
<div class="btn-group">
1111
<button class="btn btn-danger" {% if delete_disabled %}disabled{% endif %}>{% trans %}entity.delete{% endtrans %}</button>
@@ -20,7 +20,7 @@
2020
</div>
2121
</div>
2222
{% if entity.parent is defined %}
23-
<div class="ms-2 custom-control custom-checkbox custom-control-inline">
23+
<div class="ms-1 custom-control custom-checkbox custom-control-inline">
2424
<input type="checkbox" class="form-check-input" id="recursive" name="delete_recursive">
2525
<label class="form-check-label" for="recursive">{% trans %}entity.delete.recursive{% endtrans %}</label>
2626
</div>

‎templates/admin/_duplicate.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="row mb-2">
2-
<div class="offset-3 col">
2+
<div class="{{ offset_label }} {{ col_input }}">
33
<a class="btn btn-info {% if not is_granted('create', entity) %}disabled{% endif %}" href="{{ entity_url(entity, 'clone') }}">{% trans %}entity.duplicate{% endtrans %}</a>
44
</div>
5-
</div>
5+
</div>

‎templates/admin/_export_form.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
</div>
3636

3737
<div class="row mt-2">
38-
<div class="offset-sm-3 col-sm">
38+
<div class="{{ offset_label }} col-sm">
3939
<button type="submit" class="btn btn-primary">{% trans %}export.btn{% endtrans %}</button>
4040
</div>
4141
</div>
42-
</form>
42+
</form>

‎templates/admin/base_admin.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
</div>
130130

131131
<div class="form-group row">
132-
<div class="col-sm-9 offset-sm-3">
132+
<div class="{{ col_input }} {{ offset_label }}">
133133
<div class="btn-group">
134134
{{ form_widget(form.save) }}
135135
<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 @@
186186

187187
<div id="mass_creation" class="tab-pane fade">
188188
<div class="row">
189-
<p class="text-muted offset-sm-3 col-sm-9">{% trans %}mass_creation.help{% endtrans %}</p>
189+
<p class="text-muted {{ offset_label }} {{ col_input }}">{% trans %}mass_creation.help{% endtrans %}</p>
190190
</div>
191191
{{ form(mass_creation_form) }}
192192
</div>

‎templates/admin/category_admin.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,21 +41,21 @@
4141
{{ form_row(form.eda_info.reference_prefix) }}
4242

4343
<div class="row">
44-
<div class="col-sm-9 offset-sm-3">
44+
<div class="{{ col_input }} {{ offset_label }}">
4545
{{ form_row(form.eda_info.visibility) }}
4646
</div>
4747
</div>
4848

4949
<div class="row mb-2">
50-
<div class="col-sm-9 offset-sm-3">
50+
<div class="{{ col_input }} {{ offset_label }}">
5151
{{ form_widget(form.eda_info.exclude_from_bom) }}
5252
{{ form_widget(form.eda_info.exclude_from_board) }}
5353
{{ form_widget(form.eda_info.exclude_from_sim) }}
5454
</div>
5555
</div>
5656

5757
<div class="row">
58-
<div class="col-sm-9 offset-sm-3">
58+
<div class="{{ col_input }} {{ offset_label }}">
5959
<h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
6060
</div>
6161
</div>

‎templates/admin/currency_admin.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,18 @@
1010
{{ form_row(form.iso_code) }}
1111
{% if entity.isoCode %}
1212
<div class="mt-0 mb-3">
13-
<span class="form-text text-muted offset-3 col-9">
13+
<span class="form-text text-muted {{ offset_label }} {{ col_input }}">
1414
<b>{% trans %}currency.iso_code.caption{% endtrans %}:</b> {{ entity.isoCode }}
1515
</span>
16-
<span class="form-text text-muted offset-3 col-9">
16+
<span class="form-text text-muted {{ offset_label }} {{ col_input }}">
1717
<b>{% trans %}currency.symbol.caption{% endtrans %}:</b> {{ entity.isoCode | currency_symbol }}
1818
</span>
1919
</div>
2020
{% endif %}
2121

2222
{{ form_row(form.exchange_rate) }}
2323
{% if entity.inverseExchangeRate %}
24-
<p class="form-text text-muted offset-3 col-9">
24+
<p class="form-text text-muted {{ offset_label }} {{ col_input }}">
2525
{{ '1'|format_currency(vars.base_currency()) }} = {{ entity.inverseExchangeRate.tofloat | format_currency(entity.isoCode, {fraction_digit: 5}) }}<br>
2626
{{ '1'|format_currency(entity.isoCode) }} = {{ entity.exchangeRate.tofloat | format_currency(vars.base_currency(), {fraction_digit: 5}) }}
2727
</p>

‎templates/admin/footprint_admin.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
{% block additional_panes %}
2929
<div class="tab-pane" id="eda">
3030
<div class="row">
31-
<div class="col-sm-9 offset-sm-3">
31+
<div class="{{ col_input }} {{ offset_label }}">
3232
<h6>{% trans %}eda_info.kicad_section.title{% endtrans %}:</h6>
3333
</div>
3434
</div>

‎templates/admin/label_profile_admin.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{{ form_row(form.options.supported_element) }}
2828
<div class="mb-2 row">
2929
{{ form_label(form.options.width) }}
30-
<div class="col-sm-9">
30+
<div class="{{ col_input }}">
3131
<div class="input-group">
3232
{{ form_widget(form.options.width) }}
3333

‎templates/admin/project_admin.html.twig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
{{ form_row(form.status) }}
3232
{% if entity.id %}
3333
<div class="mb-2 row">
34-
<label class="col-form-label col-sm-3">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
35-
<div class="col-sm-9">
34+
<label class="col-form-label {{ col_label }}">{% trans %}project.edit.associated_build_part{% endtrans %}</label>
35+
<div class="{{ col_input }}">
3636
{% if entity.buildPart %}
3737
<span class="form-control-static"><a href="{{ entity_url(entity.buildPart) }}">{{ entity.buildPart.name }}</a></span>
3838
{% else %}

0 commit comments

Comments
 (0)