diff --git a/Controller/AdminController.php b/Controller/AdminController.php index a8e3466b39..7505e6b294 100644 --- a/Controller/AdminController.php +++ b/Controller/AdminController.php @@ -566,7 +566,7 @@ protected function createNewForm($entity, array $entityProperties) protected function createEntityForm($entity, array $entityProperties, $view) { $formCssClass = array_reduce($this->config['design']['form_theme'], function ($previousClass, $formTheme) { - return sprintf('theme_%s %s', strtolower(str_replace('.html.twig', '', basename($formTheme))), $previousClass); + return sprintf('theme-%s %s', strtolower(str_replace('.html.twig', '', basename($formTheme))), $previousClass); }); $formBuilder = $this->createFormBuilder($entity, array( diff --git a/Resources/doc/getting-started/5-design-customization.md b/Resources/doc/getting-started/5-design-customization.md index 58128742cb..e5b6bb975a 100644 --- a/Resources/doc/getting-started/5-design-customization.md +++ b/Resources/doc/getting-started/5-design-customization.md @@ -200,4 +200,24 @@ easy_admin: # ... ``` +Your own stylesheets can make use of the `id` and `class` attributes applied to +the `` element of each backend view. The `id` allows you to target +specific entity instances: + +| View | `` ID attribute +| ------ | -------------------------------------------------------------------- +| `edit` | `easyadmin-edit--` +| `list` | `easyadmin-list-` +| `new` | `easyadmin-new-` +| `show` | `easyadmin-show--` + +The `class` attribute allows you to target entire sections of the backend: + +| View | `` CSS class +| ------ | -------------------------------------------------------------------- +| `edit` | `easyadmin edit edit-` +| `list` | `easyadmin list list-` +| `new` | `easyadmin new new-` +| `show` | `easyadmin show show-` + [advanced-design-customization]: ../tutorials/advanced-design-customization.md diff --git a/Resources/views/css/admin.css.twig b/Resources/views/css/admin.css.twig index b77a6a3419..a53deb5587 100644 --- a/Resources/views/css/admin.css.twig +++ b/Resources/views/css/admin.css.twig @@ -641,10 +641,10 @@ body.list .pagination.last-page li:nth-child(2) { body.new form textarea { min-height: 250px; } -body.new form .field_date select + select { +body.new form .field-date select + select { margin-top: .5em; } -body.new form .field_collection_action { +body.new form .field-collection-action { margin-top: -15px; } @@ -652,13 +652,13 @@ body.new form #form-actions-row button, body.new form #form-actions-row a.btn { margin-bottom: 10px; } -body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row { +body.new form.theme-bootstrap_3_horizontal_layout #form-actions-row { padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { - body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row { + body.new form.theme-bootstrap_3_horizontal_layout #form-actions-row { margin-left: 16.66666667%; } } @@ -669,10 +669,10 @@ body.new form.theme_bootstrap_3_horizontal_layout #form-actions-row { body.edit form textarea { min-height: 250px; } -body.edit form .field_date select + select { +body.edit form .field-date select + select { margin-top: .5em; } -body.edit form .field_collection_action { +body.edit form .field-collection-action { margin-top: -15px; } @@ -680,13 +680,13 @@ body.edit form #form-actions-row button, body.edit form #form-actions-row a.btn { margin-bottom: 10px; } -body.edit form.theme_bootstrap_3_horizontal_layout #form-actions-row { +body.edit form.theme-bootstrap_3_horizontal_layout #form-actions-row { padding-left: 15px; padding-right: 15px; } @media (min-width: 768px) { - body.edit form.theme_bootstrap_3_horizontal_layout #form-actions-row { + body.edit form.theme-bootstrap_3_horizontal_layout #form-actions-row { margin-left: 16.66666667%; } } @@ -933,8 +933,8 @@ body.error .error-solution pre { margin-right: 10px; } - body.new form .field_date select + select, - body.edit form .field_date select + select { + body.new form .field-date select + select, + body.edit form .field-date select + select { margin-left: .5em; margin-top: 0; } diff --git a/Resources/views/default/edit.html.twig b/Resources/views/default/edit.html.twig index c30297aa91..a374b8bea5 100644 --- a/Resources/views/default/edit.html.twig +++ b/Resources/views/default/edit.html.twig @@ -2,11 +2,13 @@ {% form_theme form with easyadmin_config('design.form_theme') %} {% set _entity_config = easyadmin_entity(app.request.query.get('entity')) %} -{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': attribute(entity, _entity_config.primary_key_field_name) } %} +{% set _entity_id = attribute(entity, _entity_config.primary_key_field_name) %} +{% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans, '%entity_id%': _entity_id } %} {% extends _entity_config.templates.layout %} -{% block body_class 'admin edit ' ~ _entity_config.name|lower %} +{% block body_id 'easyadmin-edit-' ~ _entity_config.name ~ '-' ~ _entity_id %} +{% block body_class 'edit edit-' ~ _entity_config.name|lower %} {% block content_title %} {{ _entity_config.edit.title|default('edit.page_title')|trans(_trans_parameters) }} diff --git a/Resources/views/default/form.html.twig b/Resources/views/default/form.html.twig index bc105e5c61..de22f9fdff 100644 --- a/Resources/views/default/form.html.twig +++ b/Resources/views/default/form.html.twig @@ -31,7 +31,7 @@ }); {% endset %} -
+
{{ field|length == 0 ? 'Add a new item' : 'Add another item' }} diff --git a/Resources/views/default/layout.html.twig b/Resources/views/default/layout.html.twig index 0d0362fdca..5105258cb6 100644 --- a/Resources/views/default/layout.html.twig +++ b/Resources/views/default/layout.html.twig @@ -26,7 +26,7 @@ {% block body %} - +
{% block wrapper %}