community-forum
community-forum copied to clipboard
Laravel-Backpack
[Feature Request] Add CSS classes to body of CRUD views
Feature Request
What's the feature you think Backpack should have?
While waiting for the development of the possibility to add custom scripts and styles, it would be awesome if we could select the right JS operations or styles be using classes that can be accessed by the whole page.
I know that we can use CRUD::set<Operation>ContentClass() and his getter but to make it easier and automated, I thought that we can use a solution that even WordPress adopted: add classes to body of the current view.
Have you already implemented a prototype solution, for your own project?
I have already tested it in my local workspace. It's a really simple approach:
views/base/layouts/top_left.blade.php
Replace:
<body class="{{ config('backpack.base.body_class') }}">
With:
<body class="{{ config('backpack.base.body_class') }} @yield('view_classes')">
And add this single line of code in every operation view:
Ex.: view/crud/create.blade.php
@section('view_classes', 'crud-create crud-' . $crud->model->getTable())
I have created even a PR about it: Laravel-Backpack/CRUD#3067 for it.
Do you see this as a core feature or an add-on?
I think that it can be a core feature that has to be bundled in the next minor update.
And in general, I think it is a good idea to add more classes (prefixed with backpack- for example) to all elements: columns, buttons, labels, etc. Right now I can't style "actions" column differently, can't hide the action button label in the responsive view to save space.
As stated in the linked PR, we have now css hooks on most of CRUD parts: https://backpackforlaravel.com/docs/6.x/crud-how-to#how-to-customize-crud-panel-design-css-hooks
Regarding the action buttons, it's also possible now to hide the text and keep the icons, or even transform the actions in a dropdown: https://backpackforlaravel.com/docs/6.x/crud-operation-list-entries#merging-line-buttons-into-a-dropdown
Closing this, thank you all for the inputs. 👍
