Closes #16009 - Added styling to form templates to enable floating button groups #17523
Conversation
… form templates for floating button groups
There was a problem hiding this comment.
Nice work @atownson! We should "float' the bulk operation buttons for object list views too.
| position: sticky; | ||
| bottom: 0px; | ||
| z-index: 1; | ||
| padding: 2px 0px 10px 0px; |
There was a problem hiding this comment.
We may want to add a bit more top padding. IMO vertical spacing should be the same above and below the buttons while floating.
There was a problem hiding this comment.
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.
| @@ -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 { | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
This has been moved to custom/_misc.scss. Inheriting from .page proved to be problematic as the class inherited many undesirable attributes.
| @@ -37,7 +37,7 @@ | |||
| </div> | |||
| {% endif %} | |||
| </div> | |||
| <div class="card-footer text-end d-print-none border-0"> | |||
There was a problem hiding this comment.
We may want to move these buttons outside of the card for consistency with other floating button groups. (Also, the background color is off.)
…er form buttons outside of card
I took a look at 'floating' the object list views too. It's easy enough to implement, but I felt like the buttons were getting in the way for this form type. I suspect most users would rather have more real estate in the list rather than the convivence of accessing the bulk buttons. Nevertheless, if you'd like for me to float these as well just let me know. |
|
Another thought on the list form floating buttons: What if the buttons didn't float until the user checked an item in the list, then the buttons floated? This would indicate clear intention to use the bulk buttons and provide easy accessibility to them. |
|
I went ahead and added the conditional floating for object list forms. |
Fixes: #16009
Created a new style class,
btn-float-group, and added to object_edit, bulk_edit, and filter_list templates.