Comments (9)
What about providing the skeleton of the CSS file as a Twig template and then compile it with a console command to the final CSS file?
from easyadminbundle.
Or else, if you use the bundle inheritence system, you could also use blocks in twig, in order to add/change some elements. I'm thinking about banners, brand pictures or footer, or even changing the Icon's user with a gravatar one, etc.
All of these could be in classic twig blocks, or even variables (but maybe less "clean") , so in your inheritence system you can have a "layout" twig template that extends a "design" template (or vice-versa) , the last extending EasyAdmin base layout.
I hope I'm not too confusing 😝
EDIT : As an addition, why don't use a simple easy_admin: { layout: AppBundle::admin_layout.html.twig }
structure, and provide the skeleton in the documentation, to help people position the twig blocks whereever they want ? They could then use their own javascripts, css, etc. ?
from easyadminbundle.
I still don't know how to solve this problem, because I'm against using Assetic or frontend-stuff tools. Right now, the best solution I've come up is to replace the static admin.css
file by a admin.css.twig
template and render it using the admin controller:
/* Original CSS code */
span.badge {
background-color: #D47843;
}
{# New template code #}
span.badge {
background-color: {{ main_color|default('#D47843') }};
}
The advantage is that the user can customize an entire backed just by defining some options in the config.yml
file. No asset compiling or installing, changes are applied instantly, almost zero effort by the user:
easy_admin:
color_scheme: { main_color: '#CC1414', ... }
The performance hit should be minimal because even if the template is long, its logic is trivial.
What do you think about this idea? If you think it's stupid, you can freely say so :)
from easyadminbundle.
If you only want to change the color scheme, then this method is probably the best, for sure.
But there's no need to make the AdminController heavier than it is, just create an "AssetsController" to handle these routes 😆
The color scheme does need some documentation, by the way
from easyadminbundle.
I'm coming back in this issue:
Why don't you set all the colors directly in the css files, and then if there are some overrides in the color scheme, add them in a <style>
tag in the head?
I mean, for example, you keep your badge colors in the css at first.
Next, if the user sets the badge_color
under the color_scheme
param, then you just add it in the view like this:
<style type="text/css">
{% if config.color.scheme.badge_color %}
span.badge { background-color: {{ config.color.scheme.badge_color }}; }
{% endif %}
</style>
I know it sounds heavy in terms of code, but it's slightly lighter than creating a new controller...
from easyadminbundle.
@Pierstoval thanks for your proposal. It's true that it looks simple ... but I think it would be more complex that it looks at first. Why? To ensure visual integrity, the default theme will only allow to define a small amount of colors (ideally 1, the main color; but probably 4 or 5 to also style the sidebar, etc.)
This means that a lot of different elements (with very long CSS selectors) will use the same color and we would have to extract+copy+paste 20 or more lines to change one color. I'm not rejecting your proposal yet, but I have to think more about the pros and cons of each proposal.
from easyadminbundle.
I asked my team about this issue, and in fact, both developers and html/css integrators agree with the fact that the assets override
feature you already implemented is really sufficient, because you can inject a single css file to completely change the backend look. The other lead-dev also added that any developer using EasyAdmin knows how to inject css and how to change the back-end look, whether he knows the best practices or not. He'll simply search for the css selectors with "firebug-like" tool to override it in his own, and if he doesn't, a front-end specialist will do it.
I think that some code lines in the design
section in the docs might be enough to give the developer the css selector he needs, but IMO and in my colleagues' opinion, what EasyAdmin already provides is really enough.
Hope it might help ;)
from easyadminbundle.
May I come back on this issue for more discussion ?
I've been looking at what is possible to ensure layout customization is easy.
And what I saw when talking about colleagues about customizing EasyAdmin's backend is simple : layout override.
The layout override is the most used way of changing the design, and right now we don't have the possibility to do this.
I've been thinking about adding a new template layer to our layout, just by using the twig blocks system.
How to do it ?
Every view extends the logical_layout
, in which we have all must-have elements in the admin layout (such as navbars, assets). This logical_layout
extends a skeleton_layout
, in which we ONLY have the html "top-frame" code, and all the blocks names we want to use and that will be filled by the logical_layout
.
Then, we use a simple request listener like the one on Orbitale CmsBundle : we inject the layout configuration (parsed with the Configuration and Extension classes), and the logical_layout
extends this configured layout, still like in Orbitale CmsBundle's views, but in EasyAdmin we put this dynamic extension inside the logical_layout
in order to show the navs and assets we need.
Then, a simple documentation chapter might tell the developer how to customize his back-end, and the advantage we have is that the proposed default layout will be so much a skeleton that the developer will only have to copy/paste it inside his own layout.
I start to think that back-end design shouldn't be changeable in configuration, but instead should be configurable directly inside a twig template, even if this one only contains variables setters like classes and colors by using Twig blocks.
What do you think about this?
from easyadminbundle.
Closing it because it's superseded by #208
from easyadminbundle.
Related Issues (20)
- Add possibility to set the translation domain to `false`
- Label, setDisabled and setRequired do not work for form field IntegerField type HOT 1
- Add possibility to specify entity manager for CRUD controller
- Docs: Improve/Extend section about Field Configurators
- Have an "autocomplete()" option for EntityFilters , the same as AssociationField::autocomplete HOT 1
- docs: Fix batchActionEntityIds HOT 1
- An exception has been thrown during the rendering of a template ("Unsupported operand types: string + int") HOT 2
- Add documentation for VirtualFields HOT 2
- Cannot get AssociationField to work, Exception "Object of class App\Entity\Elementtype could not be converted to string" HOT 3
- All menu items get active state for same CrudController with another setQueryParameter is in the menu
- CollectionField entry label generation HOT 1
- Action with only url can't be updated properly HOT 1
- Q: CollectionField - how to customize the heading of each item? HOT 1
- Design bug for empty value for datagrid on small device (index action)
- Custom page titles don't use defined translation domain HOT 3
- Keep submenus expanded also in NEW, EDIT and DETAIL pages, or provide a ->setExpanded() method on submenu items HOT 3
- Custom field does not load js asset when included in complex CollectionField HOT 1
- Collection: Adding new items does not set correct item index
- [Batch Actions] Give the choice to display or note the confirmation modal
- Adding new event "BeforeEntityValidatedEvent" to dispatch before validation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from easyadminbundle.