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

@ -37,11 +37,11 @@
{{ form_start(google_form, { 'attr': google_form_attr}) }}
{% if not tfa_google.enabled %}
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<h6>{% trans %}tfa_google.disabled_message{% endtrans %}</h6>
</div>
<div class="offset-sm-3 row">
<div class="{{ offset_label }} row">
<div class="col-sm-3">
<img width="100%" class="img-fluid bg-white p-2" alt="{{ tfa_google.qrContent }}" src="{{ barcode_svg(tfa_google.qrContent) | data_uri("image/svg+xml") }}">
</div>
@ -55,7 +55,7 @@
</div>
</div>
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#manualSetupCollapse" aria-expanded="false" aria-controls="manualSetupCollapse">
{% trans %}tfa_google.manual_setup{% endtrans %}
</button>
@ -72,7 +72,7 @@
{{ form_row(google_form.google_confirmation) }}
{% else %}
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<h6>{% trans %}tfa_google.enabled_message{% endtrans %}</h6>
</div>
{% endif %}
@ -81,7 +81,7 @@
</div>
<div class="tab-pane fade" id="tfa-backup" role="tabpanel" aria-labelledby="backup-tab">
{% if user.backupCodes is empty %}
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<h6>{% trans %}tfa_backup.disabled{% endtrans %}</h6>
<span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
</div>
@ -89,19 +89,19 @@
{% set backup_form_attr = { 'data-delete-form': true, 'data-controller': 'elements--delete-btn', 'data-action': 'submit->elements--delete-btn#submit',
'data-delete-title': 'tfa_backup.reset_codes.confirm_title' | trans, 'data-delete-message': 'tfa_backup.reset_codes.confirm_message' | trans} %}
{{ form_start(backup_form, { 'attr': backup_form_attr}) }}
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<h6>{% trans %}tfa_backup.enabled{% endtrans %}</h6>
<span>{% trans %}tfa_backup.explanation{% endtrans %}</span>
</div>
<div class="offset-sm-3 mt-2">
<div class="{{ offset_label }} mt-2">
<p class="mb-0"><b>{% trans %}tfa_backup.remaining_tokens{% endtrans %}:</b> {{ user.backupCodes | length }}</p>
<p><b>{% trans %}tfa_backup.generation_date{% endtrans %}:</b> {{ user.backupCodesGenerationDate | format_datetime }}</p>
</div>
<div class="offset-sm-3">
<div class="{{ offset_label }}">
<a href="{{ path('show_backup_codes') }}" target="_blank" data-turbo="false" class="btn btn-primary">{% trans %}tfa_backup.show_codes{% endtrans %}</a>
</div>
<div class="offset-sm-3 mt-2">
<div class="{{ offset_label }} mt-2">
{{ form_widget(backup_form.reset_codes) }}
</div>
{{ form_end(backup_form) }}

View file

@ -28,7 +28,7 @@
{{ form_row(settings_form.showEmailOnProfile) }}
{{ form_row(settings_form.avatar_file) }}
<div class="mb-3 row {% if user.masterPictureAttachment is null %}d-none{% endif %}">
<div class="offset-sm-3 col-sm-9">
<div class="{{ offset_label }} {{ col_input }}">
{% if user.masterPictureAttachment %}
<img src="{{ attachment_thumbnail(user.masterPictureAttachment, 'thumbnail_md') }}" alt="avatar" class="rounded" style="height: 75px;">
{% endif %}