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

Jump to bottom

Closes #16009 - Added styling to form templates to enable floating button groups #17523

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

Closes #16009 - Added styling to form templates to enable floating button groups #17523

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8715f6f
#16009 Added btn-float-group style class and added to form templates …
Sep 17, 2024
7de5efd
Merge branch 'develop' into issue_16009
jeremystretch Sep 19, 2024
30e6704
#16009 Removed floating div background and moved filter form buttons …
Sep 20, 2024
3b8a3dc
Added style classes to represent left and right justified floating bu…
Sep 23, 2024
1e03eb4
Added TypeScript to handle conditionally floating the object list forms
Sep 23, 2024
0cf8264
Fix TS import
Sep 23, 2024
1bfb6e6
Added null check for the button group
Sep 23, 2024
6d5af67
Update TS styling
Sep 23, 2024
3c36549
Satisfy prettier check
Sep 23, 2024
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
2 changes: 1 addition & 1 deletion netbox/project-static/dist/netbox.css
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions netbox/project-static/styles/custom/_misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,11 @@ span.color-label {
.netbox-edition {
letter-spacing: .15rem;
}

// A floating div for form buttons
.btn-float-group {
position: sticky;
bottom: 0px;
z-index: 1;
padding: 2px 0px 10px 0px;
Copy link
Member

Choose a reason for hiding this comment

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

We may want to add a bit more top padding. IMO vertical spacing should be the same above and below the buttons while floating.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I went a different direction here. Let me know what you think. Essentially I removed the button group div background altogether, which created truly 'floating' buttons and IMO added more real estate to the form by not covering it up.

NetBox Button Illustration Rev

}
4 changes: 2 additions & 2 deletions netbox/project-static/styles/overrides/_tabler.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ pre {
}

// Altering background colors
.page, .page-tabs .nav-tabs .nav-link.active {
.page, .page-tabs .nav-tabs .nav-link.active, .btn-float-group {
Copy link
Member

Choose a reason for hiding this comment

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

We want to avoid declaring any custom classes here, as this module should be restricted to overrides for Tabler itself. Maybe we can inherit the background color from .page?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This has been moved to custom/_misc.scss. Inheriting from .page proved to be problematic as the class inherited many undesirable attributes.

background-color: var(--#{$prefix}bg-surface-tertiary) !important;
}
.page-body .card .card-header {
Expand Down Expand Up @@ -105,7 +105,7 @@ body[data-bs-theme=dark] {
.navbar, .page-header {
background-color: $rich-black;
}
.page, .page-tabs .nav-tabs .nav-link.active {
.page, .page-tabs .nav-tabs .nav-link.active, .btn-float-group {
background-color: $rich-black-light !important;
}

Expand Down
2 changes: 1 addition & 1 deletion netbox/templates/generic/bulk_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h2 class="col-9 offset-3">{% trans "Comments" %}</h2>

{% endif %}

<div class="text-end">
<div class="text-end btn-float-group">
<a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
<button type="submit" name="_apply" class="btn btn-primary">{% trans "Apply" %}</button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion netbox/templates/generic/object_edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
{% endblock form %}
</div>

<div class="text-end my-3">
<div class="text-end my-3 btn-float-group">
{% block buttons %}
<a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
{% if object.pk %}
Expand Down
2 changes: 1 addition & 1 deletion netbox/templates/inc/filter_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
</div>
{% endif %}
</div>
<div class="card-footer text-end d-print-none border-0">
Copy link
Member

Choose a reason for hiding this comment

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

We may want to move these buttons outside of the card for consistency with other floating button groups. (Also, the background color is off.)

screenshot

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is done

<div class="card-footer text-end btn-float-group d-print-none border-0">
<button type="button" class="btn btn-outline-danger m-1" data-reset-select>
<i class="mdi mdi-backspace"></i> {% trans "Reset" %}
</button>
Expand Down