feature #1138 Redesigned the header of the layout (javiereguiluz)

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

Discussion
----------

Redesigned the header of the layout

This fixes #1137 in a different way.

---

This is the **current design** of the backend, which is the default design of AdminLTE template too:

| Normal sidebar menu | Collapsed sidebar menu
| --- | ---
| ![before-desktop-normal](https://cloud.githubusercontent.com/assets/73419/15023714/f069a994-1231-11e6-9b36-aac958684ca9.png) | ![before-desktop-collapsed](https://cloud.githubusercontent.com/assets/73419/15023716/f3d8fc06-1231-11e6-8ffa-991904862a19.png)

The space available for the backend name is limited and when collapsing the menu, we only show the first letter of the backend (this causes problems sometimes, see #1137).

---

I propose to change the design and get inspiration from the ideas proposed by @rubengc in #1116. The idea is to put the toggle on the left and put the logo/name on the right and never collapse it.

This is how it looks in a desktop when the menu is expanded:

![desktop-normal](https://cloud.githubusercontent.com/assets/73419/15023796/555ffbbe-1232-11e6-9d42-12060a0ae1fe.png)

This is a desktop with the menu collapsed:

![desktop-collapsed](https://cloud.githubusercontent.com/assets/73419/15023802/5bd7ae7e-1232-11e6-8355-b7c67df4facc.png)

Here we can see it in action for a desktop and a mobile:

| Desktop | Mobile
| --- | ---
| ![desktop](https://cloud.githubusercontent.com/assets/73419/15023832/77601e42-1232-11e6-81fa-d750a9268882.gif) | ![mobile](https://cloud.githubusercontent.com/assets/73419/15023833/78ae9422-1232-11e6-858e-1e6e6de2e677.gif)

This redesign resulted in some changes for the `light` color scheme:

![desktop-normal-light](https://cloud.githubusercontent.com/assets/73419/15023873/9e99406a-1232-11e6-98b9-c25807db537f.png)

Commits
-------

ad72818 Redesigned the header of the layout

Resources/views/css/easyadmin.css.twig

@@ -541,67 +541,73 @@ form:not(.form-horizontal) .field-checkbox label {
    ------------------------------------------------------------------------- #}
 .main-header {
     background: {{ brand_color }};
+    position: relative;
 }
 .main-header .logo {
-    background: rgba(0, 0, 0, 0.15);
     color: {{ colors.white }};
     font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; {# needed to override AdminLTE styles #}
+    font-size: 18px;
     font-weight: bold;
-    height: 50px;
+    height: 45px;
+    line-height: 45px;
+    padding: 0;
+}
+.main-header .logo-long .logo-lg {
+    font-size: 16px;
 }
 .main-header .logo-lg {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-.main-header .logo-mini {
-    font-weight: bold;
-    text-align: center;
-}
-.main-header .logo-long .logo-lg {
-    font-size: 16px;
+.main-header #header-logo {
 }
 .main-header img {
     margin-top: -2px;
     max-height: 36px;
-    max-width: 94%;
 }
 .main-header li {
     margin-bottom: 0;
 }
 
 .main-header > .navbar {
-{% if 'dark' == color_scheme %}
     background-color: {{ brand_color }};
-    color: {{ colors.white }};
-{% elseif 'light' == color_scheme %}
-    background-color: {{ colors.gray_light }};
-    color: {{ brand_color }};
-{% endif %}
+    color: rgba(255, 255, 255, 0.9);
+    margin-left: 0;
     min-height: 40px;
 }
 
 .main-header .navbar .sidebar-toggle {
-{% if 'dark' == color_scheme %}
-    color: {{ colors.white }};
-{% elseif 'light' == color_scheme %}
-    color: {{ colors.text_muted }};
-{% endif %}
-    padding: 10px;
+    color: rgba(255, 255, 255, 0.8);
+    display: inline-block;
+    font-size: 16px;
+    height: 35px;
+    left: 0;
+    line-height: 35px;
+    padding: 0 15px;
+    position: absolute;
+    text-align: center;
+    top: 45px;
 }
-.main-header .navbar .sidebar-toggle:hover {
-    background: rgba(0, 0, 0, 0.15);
+.sidebar-mini.sidebar-collapse .sidebar-toggle {
+    color: {{ colors.white }};
 }
 
-.navbar-custom-menu .user-menu {
-{% if 'dark' == color_scheme %}
+.navbar-custom-menu,
+.navbar-custom-menu ul.navbar-nav,
+.navbar-custom-menu ul.navbar-nav .user-menu {
+    float: none;
+}
+.navbar-custom-menu {
+    background: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.8);
-{% elseif 'light' == color_scheme %}
-    color: {{ colors.text_muted }};
-{% endif %}
     font-size: 13px;
     font-weight: bold;
-    padding: 10px;
+    height: 35px;
+    line-height: 35px;
+    padding: 0 15px;
+    text-align: right;
+    width: 100%;
 }
 
 {# Main body
@@ -631,7 +637,7 @@ form:not(.form-horizontal) .field-checkbox label {
 {% endif %}
 }
 .main-sidebar {
-    padding-top: 90px;
+    padding-top: 80px;
 }
 
 .sidebar-menu li.header {
@@ -725,12 +731,11 @@ form:not(.form-horizontal) .field-checkbox label {
 .sidebar-collapse .sidebar-menu .treeview-menu > li:hover > a,
 .sidebar-menu > li.active.submenu-active > a,
 .sidebar-collapse .sidebar-menu > li.active.submenu-active:hover > a {
+    border-left-color: transparent;
 {% if 'dark' == color_scheme %}
     background: #333;
-    border-left-color: transparent;
 {% elseif 'light' == color_scheme %}
-    background: #DCDCDC;
-    border-left-color: #808080;
+    background: {{ colors.gray_light }};
 {% endif %}
 }
 
@@ -1018,15 +1023,48 @@ body.error .error-message {
     .main-header > .navbar {
       min-height: 50px;
     }
+    .sidebar-mini.sidebar-collapse .main-header .navbar {
+        margin-left: 0;
+    }
+    .main-header #header-logo {
+        float: left;
+    }
     .main-header .logo {
+        font-size: 21px;
+        height: 50px;
+        line-height: 50px;
         text-align: left;
+        transition: padding-left .3s linear;
+    }
+    .sidebar-mini.sidebar-collapse .main-header .logo {
+        padding-left: 15px;
+        width: auto; {# neutralizes AdminLTE styles #}
+        transition: padding-left .3s linear;
     }
 
     .main-header .navbar .sidebar-toggle {
-        padding: 15px;
+        height: 50px;
+        line-height: 50px;
+        position: static;
+        padding: 0 12px 0 18px;
+    }
+    .sidebar-mini.sidebar-collapse .sidebar-toggle {
+        background: rgba(0, 0, 0, 0.15);
+        font-size: 18px;
+        padding-left: 12px;
+        width: 50px;
+    }
+
+    .navbar-custom-menu,
+    .navbar-custom-menu ul.navbar-nav,
+    .navbar-custom-menu ul.navbar-nav .user-menu {
+        float: right;
     }
-    .navbar-custom-menu .user-menu {
-        padding: 17px 15px 13px;
+    .navbar-custom-menu {
+        background: inherit;
+        height: 50px;
+        line-height: 50px;
+        width: auto;
     }
     .navbar-custom-menu .user-menu i {
         padding-right: 4px;

Resources/views/default/layout.html.twig

@@ -25,12 +25,10 @@
         {% endblock %}
 
         {% block head_javascript %}
-            <script src="{{ asset('bundles/easyadmin/javascript/easyadmin-all.min.js') }}"></script>
-
             {% block adminlte_options %}
                 <script type="text/javascript">
                     var AdminLTEOptions = {
-                        animationSpeed: 'fast',
+                        animationSpeed: 'normal',
                         sidebarExpandOnHover: false,
                         enableBoxRefresh: false,
                         enableBSToppltip: false,
@@ -40,6 +38,8 @@
                     };
                 </script>
             {% endblock %}
+
+            <script src="{{ asset('bundles/easyadmin/javascript/easyadmin-all.min.js') }}"></script>
         {% endblock head_javascript %}
 
         <!--[if lt IE 9]>
@@ -53,19 +53,19 @@
         <div class="wrapper">
         {% block wrapper %}
             <header class="main-header">
-                <div id="header-logo">
-                    {% block header_logo %}
-                        <a class="logo {{ easyadmin_config('site_name')|length > 14 ? 'logo-long' }}" title="{{ easyadmin_config('site_name')|striptags }}" href="{{ path('easyadmin') }}">
-                            <span class="logo-mini">{{ easyadmin_config('site_name')|striptags|first|upper }}</span>
-                            <span class="logo-lg">{{ easyadmin_config('site_name')|raw }}</span>
-                        </a>
-                    {% endblock header_logo %}
-                </div>
-
                 <nav class="navbar" role="navigation">
                     <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                         <span class="sr-only">{{ 'toggle_navigation'|trans(domain = 'EasyAdminBundle') }}</span>
                     </a>
+
+                    <div id="header-logo">
+                        {% block header_logo %}
+                            <a class="logo {{ easyadmin_config('site_name')|length > 14 ? 'logo-long' }}" title="{{ easyadmin_config('site_name')|striptags }}" href="{{ path('easyadmin') }}">
+                                {{ easyadmin_config('site_name')|raw }}
+                            </a>
+                        {% endblock header_logo %}
+                    </div>
+
                     <div class="navbar-custom-menu">
                         <ul class="nav navbar-nav">
                             <li class="user user-menu">

Tests/Controller/DefaultBackendTest.php

@@ -58,16 +58,15 @@ public function testDefaultJsScriptsAreLinked()
 
         $this->assertEquals(
             '/bundles/easyadmin/javascript/easyadmin-all.min.js',
-            $crawler->filter('script')->eq(0)->attr('src')
+            $crawler->filter('script')->eq(1)->attr('src')
         );
     }
 
     public function testLogo()
     {
         $crawler = $this->getBackendHomepage();
 
-        $this->assertEquals('E', $crawler->filter('#header-logo a .logo-mini')->text());
-        $this->assertEquals('EasyAdmin', $crawler->filter('#header-logo a .logo-lg')->text());
+        $this->assertEquals('EasyAdmin', trim($crawler->filter('#header-logo a')->text()));
         $this->assertEquals('/admin/', $crawler->filter('#header-logo a')->attr('href'));
     }