Skip to content

Commit

Permalink
minor #362 Replaced underscores by dashes in the CSS class names (jav…
Browse files Browse the repository at this point in the history
…iereguiluz)

This PR was squashed before being merged into the master branch (closes #362).

Discussion
----------

Replaced underscores by dashes in the CSS class names

This PR brings in some consistency to the backend design. I think the benefits of doing this are worth the minimal BC break introduced by it.

Commits
-------

e964bb1 Replaced underscores by dashes in the CSS class names
javiereguiluz committed Jun 16, 2015
2 parents 5222da9 + e964bb1 commit 5a4d099
Showing 15 changed files with 85 additions and 37 deletions.
2 changes: 1 addition & 1 deletion Controller/AdminController.php
Original file line number Diff line number Diff line change
@@ -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(
20 changes: 20 additions & 0 deletions Resources/doc/getting-started/5-design-customization.md
Original file line number Diff line number Diff line change
@@ -200,4 +200,24 @@ easy_admin:
# ...
```

Your own stylesheets can make use of the `id` and `class` attributes applied to
the `<body>` element of each backend view. The `id` allows you to target
specific entity instances:

| View | `<body>` ID attribute
| ------ | --------------------------------------------------------------------
| `edit` | `easyadmin-edit-<entity name>-<entity id>`
| `list` | `easyadmin-list-<entity name>`
| `new` | `easyadmin-new-<entity name>`
| `show` | `easyadmin-show-<entity name>-<entity id>`

The `class` attribute allows you to target entire sections of the backend:

| View | `<body>` CSS class
| ------ | --------------------------------------------------------------------
| `edit` | `easyadmin edit edit-<entity name>`
| `list` | `easyadmin list list-<entity name>`
| `new` | `easyadmin new new-<entity name>`
| `show` | `easyadmin show show-<entity name>`

[advanced-design-customization]: ../tutorials/advanced-design-customization.md
20 changes: 10 additions & 10 deletions Resources/views/css/admin.css.twig
Original file line number Diff line number Diff line change
@@ -641,24 +641,24 @@ 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;
}

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,24 +669,24 @@ 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;
}

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;
}
6 changes: 4 additions & 2 deletions Resources/views/default/edit.html.twig
Original file line number Diff line number Diff line change
@@ -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) }}
2 changes: 1 addition & 1 deletion Resources/views/default/form.html.twig
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@
});
{% endset %}

<div class="form-group field_collection_action">
<div class="form-group field-collection-action">
<a href="#" onclick="{{ add_item_javascript|raw }}" class="col-sm-12 text-right">
<i class="fa fa-plus-square"></i>
{{ field|length == 0 ? 'Add a new item' : 'Add another item' }}
2 changes: 1 addition & 1 deletion Resources/views/default/layout.html.twig
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@
</head>

{% block body %}
<body id="{% block body_id %}{% endblock %}" class="{% block body_class %}{% endblock %}">
<body id="{% block body_id %}{% endblock %}" class="easyadmin {% block body_class %}{% endblock %}">
<div id="wrapper" class="container">
{% block wrapper %}
<nav id="header" class="navbar navbar-default navbar-static-top" role="navigation">
3 changes: 2 additions & 1 deletion Resources/views/default/list.html.twig
Original file line number Diff line number Diff line change
@@ -5,7 +5,8 @@

{% extends _entity_config.templates.layout %}

{% block body_class 'admin list ' ~ _entity_config.name|lower %}
{% block body_id 'easyadmin-list-' ~ _entity_config.name %}
{% block body_class 'list list-' ~ _entity_config.name|lower %}

{% block head_stylesheets %}
{{ parent() }}
3 changes: 2 additions & 1 deletion Resources/views/default/new.html.twig
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@

{% extends _entity_config.templates.layout %}

{% block body_class 'admin new ' ~ _entity_config.name|lower %}
{% block body_id 'easyadmin-new-' ~ _entity_config.name %}
{% block body_class 'new new-' ~ _entity_config.name|lower %}

{% block content_title %}
{{ _entity_config.new.title|default('new.page_title')|trans(_trans_parameters) }}
8 changes: 5 additions & 3 deletions Resources/views/default/show.html.twig
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
{% trans_default_domain "EasyAdminBundle" %}

{% 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 show ' ~ _entity_config.name|lower %}
{% block body_id 'easyadmin-show-' ~ _entity_config.name ~ '-' ~ _entity_id %}
{% block body_class 'show show-' ~ _entity_config.name|lower %}

{% block content_title %}
{{ _entity_config.show.title|default('show.page_title')|trans(_trans_parameters) }}
@@ -14,7 +16,7 @@
{% block main %}
<div class="form-horizontal">
{% for field, metadata in fields %}
<div class="form-group field_{{ metadata.type|default('default')|lower }} {{ metadata.css_class|default('') }}">
<div class="form-group field-{{ metadata.type|default('default')|lower }} {{ metadata.css_class|default('') }}">
<label class="col-sm-2 control-label">
{% if metadata.label %}
{{ metadata.label|trans }}
6 changes: 3 additions & 3 deletions Resources/views/form/bootstrap_3_horizontal_layout.html.twig
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@ col-sm-2

{% block form_row -%}
{% spaceless %}
<div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
{{ form_label(form) }}
<div class="{{ block('form_group_class') }}">
{{ form_widget(form) }}
@@ -50,7 +50,7 @@ col-sm-2

{% block checkbox_radio_row -%}
{% spaceless %}
<div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="{{ block('form_label_class') }}"></div>
<div class="{{ block('form_group_class') }}">
{{ form_widget(form) }}
@@ -62,7 +62,7 @@ col-sm-2

{% block submit_row -%}
{% spaceless %}
<div class="form-group field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="{{ block('form_label_class') }}"></div>
<div class="{{ block('form_group_class') }}">
{{ form_widget(form) }}
8 changes: 4 additions & 4 deletions Resources/views/form/bootstrap_3_layout.html.twig
Original file line number Diff line number Diff line change
@@ -178,7 +178,7 @@
{# Rows #}

{% block form_row -%}
<div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group {% if (not compound or force_error|default(false)) and not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
{{- form_label(form) -}}
{{- form_widget(form) -}}
{{- form_errors(form) -}}
@@ -190,7 +190,7 @@
{%- endblock form_row %}

{% block button_row -%}
<div class="form-group field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
{{- form_widget(form) -}}
</div>
{%- endblock button_row %}
@@ -216,14 +216,14 @@
{%- endblock datetime_row %}

{% block checkbox_row -%}
<div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
{%- endblock checkbox_row %}

{% block radio_row -%}
<div class="form-group {% if not valid %}has-error{% endif %} field_{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
<div class="form-group {% if not valid %}has-error{% endif %} field-{{ form.vars.attr.field_type|default('default') }} {{ form.vars.attr.field_css_class|default('') }}">
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
10 changes: 5 additions & 5 deletions Tests/Controller/CustomizedBackendTest.php
Original file line number Diff line number Diff line change
@@ -178,7 +178,7 @@ public function testShowViewFieldClasses()
$fieldClasses = array('integer', 'string', 'association');

foreach ($fieldClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}
}

@@ -274,7 +274,7 @@ public function testEditViewPageTitle()
public function testEditViewFormClasses()
{
$crawler = $this->requestEditView();
$formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
$formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');

foreach ($formClasses as $cssClass) {
$this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -298,7 +298,7 @@ public function testEditViewFieldClasses()
$fieldCustomClasses = array('integer', 'text', 'default');

foreach ($fieldDefaultClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}

foreach ($fieldCustomClasses as $i => $cssClass) {
@@ -363,7 +363,7 @@ public function testNewViewPageTitle()
public function testNewViewFormClasses()
{
$crawler = $this->requestNewView();
$formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
$formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');

foreach ($formClasses as $cssClass) {
$this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -386,7 +386,7 @@ public function testNewViewFieldClasses()
$fieldClasses = array('integer', 'text', 'default');

foreach ($fieldClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}
}

10 changes: 5 additions & 5 deletions Tests/Controller/DefaultBackendTest.php
Original file line number Diff line number Diff line change
@@ -243,7 +243,7 @@ public function testShowViewFieldClasses()
$fieldClasses = array('integer', 'string', 'association');

foreach ($fieldClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}
}

@@ -339,7 +339,7 @@ public function testEditViewTitle()
public function testEditViewFormClasses()
{
$crawler = $this->requestEditView();
$formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
$formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');

foreach ($formClasses as $cssClass) {
$this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -362,7 +362,7 @@ public function testEditViewFieldClasses()
$fieldClasses = array('text', 'default');

foreach ($fieldClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}
}

@@ -423,7 +423,7 @@ public function testNewViewTitle()
public function testNewViewFormClasses()
{
$crawler = $this->requestNewView();
$formClasses = array('theme_bootstrap_3_horizontal_layout', 'form-horizontal');
$formClasses = array('theme-bootstrap_3_horizontal_layout', 'form-horizontal');

foreach ($formClasses as $cssClass) {
$this->assertContains($cssClass, trim($crawler->filter('#main form')->eq(0)->attr('class')));
@@ -446,7 +446,7 @@ public function testNewViewFieldClasses()
$fieldClasses = array('text', 'default');

foreach ($fieldClasses as $i => $cssClass) {
$this->assertContains('field_'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
$this->assertContains('field-'.$cssClass, trim($crawler->filter('#main .form-group')->eq($i)->attr('class')));
}
}

20 changes: 20 additions & 0 deletions UPGRADE.md
Original file line number Diff line number Diff line change
@@ -5,6 +5,26 @@ This document describes the backwards incompatible changes introduced by each
EasyAdminBundle version and the needed changes to be made before upgrading to
the next version.

Upgrade to 1.5.5
----------------

In order to improve the consistency of the backend design, all CSS class names
have been updated to use dashes instead of underscores, to match the syntax
used by Bootstrap classes. This means that `field_date` is now `field-date`,
`theme_boostrap...` is now `theme-bootstrap...`, etc.

Moreover, the global `css` class applied to the `<body>` element of each view
has changed:

| View | OLD `<body>` CSS class | NEW `<body>` CSS class
| ------ | -------------------------- | ---------------------------------------
| `edit` | `admin edit <entity name>` | `easyadmin edit edit-<entity name>`
| `list` | `admin list <entity name>` | `easyadmin list list-<entity name>`
| `new` | `admin new <entity name>` | `easyadmin new new-<entity name>`
| `show` | `admin show <entity name>` | `easyadmin show show-<entity name>`

All these changes only affect you if your backend uses a custom stylesheet.

Upgrade to 1.5.3
----------------

2 changes: 2 additions & 0 deletions phpunit.xml.dist
Original file line number Diff line number Diff line change
@@ -28,6 +28,8 @@

<php>
<server name="KERNEL_DIR" value="./Tests/Fixtures/App" />
<ini name="error_reporting" value="-1" />
<ini name="memory_limit" value="-1" />
<ini name="zend.enable_gc" value="0" />
</php>

0 comments on commit 5a4d099

Please sign in to comment.