Skip to content
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

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

Merged
merged 4 commits into from
Feb 28, 2025
+47 −16
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
993487d
mvc/view: Ensure fields stay aligned relatively to another when heade…
Monviech Feb 20, 2025
812175b
mvc/view: Add style that forces consistency in smaller viewport sizes…
Monviech Feb 21, 2025
2a364c1
mvc/view: Make classes more selective so the style does not leak when…
Monviech Feb 21, 2025
431544b
mvc/view: Ensure the change in base_dialog is backwards compatible we…
Monviech Feb 21, 2025
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
34 changes: 27 additions & 7 deletions src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we even need the msgzone? Seems it's only used by IDS

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to keep the change backwards compatible. I dont know the reason behind this in IDS.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these properties should ideally live inside a form metadata tag (or if they're unique cases, handled by javascript), but the scope for that is larger than this change so not worth the effort to look into it here.

<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) %}
Expand Down Expand Up @@ -99,11 +105,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 %}>
Expand Down Expand Up @@ -143,3 +155,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 changes: 20 additions & 9 deletions src/opnsense/mvc/app/views/layout_partials/base_form.volt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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) %}
Expand All @@ -77,11 +77,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 %}>
Expand Down Expand Up @@ -115,3 +115,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>