lucaspalomodevelop/core
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/core.git synced 2026-03-13 08:09:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

mvc/view: Ensure fields stay aligned relatively to another when headers are used in forms (#8364)

Browse Source 
* mvc/view: Ensure fields stay aligned relatively to another when headers are used in forms.

* mvc/view: Add style that forces consistency in smaller viewport sizes in base forms.

* mvc/view: Make classes more selective so the style does not leak when modal-dialog and form-inline exist in the same view (e.g. dnsmasq).

* mvc/view: Ensure the change in base_dialog is backwards compatible when msgzone_width is defined (e.g. in Intrusion Detection)
This commit is contained in:
Monviech 2025-02-28 13:45:51 +01:00 committed by GitHub
parent 81ec98007d
commit 387c381300
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
View File

@ -1,5 +1,5 @@
{#
# Copyright (c) 2014-2015 Deciso B.V.
# Copyright (c) 2014-2025 Deciso B.V.
# All rights reserved.
#
# Redistribution and use in source and binary forms, with or without modification,
@ -66,11 +66,17 @@
<div class="modal-body">
<form id="frm_{{base_dialog_id}}">
<div class="table-responsive">
<table class="table table-striped table-condensed">
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
<colgroup>
{% if msgzone_width is defined %}
<col class="col-md-3"/>
<col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
<col class="col-md-{{ msgzone_width|default(5) }}"/>
<col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
<col class="col-md-{{ msgzone_width }}"/>
{% else %}
<col style="width: 25%;" />
<col style="width: 40%;" />
<col style="width: 35%;" />
{% endif %}
</colgroup>
<tbody>
{% if base_dialog_advanced|default(false) or base_dialog_help|default(false) %}
@ -100,11 +106,17 @@
</table>
</div>
<div class="table-responsive {{field['style']|default('')}}">
<table class="table table-striped table-condensed">
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
<colgroup>
{% if msgzone_width is defined %}
<col class="col-md-3"/>
<col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
<col class="col-md-{{ msgzone_width|default(5) }}"/>
<col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
<col class="col-md-{{ msgzone_width }}"/>
{% else %}
<col style="width: 25%;" />
<col style="width: 40%;" />
<col style="width: 35%;" />
{% endif %}
</colgroup>
<thead style="cursor: pointer;">
<tr{% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@ -144,3 +156,11 @@
</div>
</div>
</div>
{# Ensure all fields stay the same width relative to each other inside the modal #}
<style>
.modal-dialog .bootstrap-select:not(.bs-container),
.modal-dialog .tokenize ul.tokens-container {
width: 100% !important;
}
</style>

29
src/opnsense/mvc/app/views/layout_partials/base_form.volt
View File

@ -1,5 +1,5 @@
{#
# Copyright (c) 2014-2015 Deciso B.V.
# Copyright (c) 2014-2025 Deciso B.V.
# All rights reserved.
#
# Redistribution and use in source and binary forms, with or without modification,
@ -52,11 +52,11 @@
{% endfor %}
<form id="{{base_form_id}}" class="form-inline" data-title="{{data_title|default('')}}">
<div class="table-responsive">
<table class="table table-striped table-condensed">
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
<colgroup>
<col class="col-md-3"/>
<col class="col-md-4"/>
<col class="col-md-5"/>
<col style="width: 25%;" />
<col style="width: 40%;" />
<col style="width: 35%;" />
</colgroup>
<tbody>
{% if advanced|default(false) or help|default(false) %}
@ -78,11 +78,11 @@
</table>
</div>
<div class="table-responsive {{field['style']|default('')}}">
<table class="table table-striped table-condensed table-responsive">
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
<colgroup>
<col class="col-md-3"/>
<col class="col-md-4"/>
<col class="col-md-5"/>
<col style="width: 25%;" />
<col style="width: 40%;" />
<col style="width: 35%;" />
</colgroup>
<thead style="cursor: pointer;" class="{{field['style']|default('')}}">
<tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@ -116,3 +116,14 @@
</table>
</div>
</form>
{# Ensure all fields stay the same width relative to each other inside the modal #}
<style>
@media (max-width: 760px) {
.form-inline .bootstrap-select:not(.bs-container),
.form-inline .tokenize ul.tokens-container {
width: 100% !important;
min-width: 0 !important;
}
}
</style>