Add responsive design support

tsilefy · Jul 19, 2012 · 25e7eda · 25e7eda
1 parent 8ac88e1
commit 25e7eda
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/Resources/public/css/layout.css b/Resources/public/css/layout.css
@@ -1,5 +1,7 @@
-body.sonata-bc {
-    padding-top: 60px;
+@media (min-width: 979px) {
+    body.sonata-bc {
+        padding-top: 60px;
+    }
 }
 
 .sonata-bc .navbar a.brand {
@@ -296,3 +298,7 @@ legend + .sonata-ba-collapsed-fields {
 .sonata-preview-form-container fieldset {
     display: none;
 }
+
+.sonata-bc .pagination {
+    margin: 0px;
+}
diff --git a/Resources/views/CRUD/base_edit_form.html.twig b/Resources/views/CRUD/base_edit_form.html.twig
@@ -40,7 +40,7 @@
             {{ form_rest(form) }}
 
             {% block formactions %}
-                <div class="form-actions">
+                <div class="well form-actions">
                     {% if app.request.isxmlhttprequest %}
                         {% if admin.id(object) %}
                             <input type="submit" class="btn btn-primary" name="btn_update" value="{% trans from 'SonataAdminBundle' %}btn_update{% endtrans %}"/>

diff --git a/Resources/views/CRUD/base_list.html.twig b/Resources/views/CRUD/base_list.html.twig
@@ -89,9 +89,9 @@ file that was distributed with this source code.
 
                     {% if admin.datagrid.pager.haveToPaginate() %}
                         <tr>
-                            <td colspan="{{ admin.list.elements|length }}" class="pager">
+                            <td colspan="{{ admin.list.elements|length }}">
 
-                                <div class="pagination">
+                                <div class="pagination pagination-centered">
                                     <ul>
 
                                         {% if admin.datagrid.pager.page != 1  %}

diff --git a/Resources/views/standard_layout.html.twig b/Resources/views/standard_layout.html.twig
@@ -22,11 +22,14 @@ file that was distributed with this source code.
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
         {% block stylesheets %}
             <!-- jQuery code -->
             <link rel="stylesheet" href="{{ asset('bundles/sonatajquery/themes/flick/jquery-ui-1.8.16.custom.css') }}" type="text/css" media="all" />
 
             <link rel="stylesheet" href="{{ asset('bundles/sonataadmin/bootstrap/css/bootstrap.min.css') }}" type="text/css" media="all" >
+            <link rel="stylesheet" href="{{ asset('bundles/sonataadmin/bootstrap/css/bootstrap-responsive.min.css') }}" type="text/css" media="all" >
 
             <!-- base application asset -->
             <link rel="stylesheet" href="{{ asset('bundles/sonataadmin/css/layout.css') }}" type="text/css" media="all">
@@ -69,34 +72,42 @@ file that was distributed with this source code.
         <div class="navbar navbar-fixed-top">
             <div class="navbar-inner">
                 <div class="container-fluid">
+                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </a>
+
+                    <p class="navbar-text pull-right">{% include admin_pool.getTemplate('user_block') %}</p>
+
                     {% if admin_pool is defined %}
                         {% block logo %}
                             <a href="{{ url('sonata_admin_dashboard') }}" class="brand">
                                 <img src="{{ asset(admin_pool.titlelogo) }}"  alt="{{ admin_pool.title }}" />
                                 {{ admin_pool.title }}
                             </a>
                         {% endblock %}
-
-                        <ul class="nav">
-                            {% block top_bar_before_nav %} {% endblock %}
-                            {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
-                                {% for group in admin_pool.dashboardgroups %}
-                                    <li class="dropdown">
-                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ group.label|trans({}, group.label_catalogue) }} <span class="caret"></span></a>
-                                        <ul class="dropdown-menu">
-                                            {% for admin in group.items %}
-                                                {% if admin.hasroute('create') and admin.isGranted('CREATE') or admin.hasroute('list') and admin.isGranted('LIST') %}
-                                                    <li><a href="{{ admin.generateUrl('list')}}">{{ admin.label|trans({}, admin.translationdomain) }}</a></li>
-                                                {% endif %}
-                                            {% endfor %}
-                                        </ul>
-                                    </li>
-                                {% endfor %}
-                            {% endif %}
-                            {% block top_bar_after_nav %} {% endblock %}
-                        </ul>
-
-                        <p class="navbar-text pull-right">{% include admin_pool.getTemplate('user_block') %}</p>
+                    
+                        <div class="nav-collapse">
+                            <ul class="nav">
+                                {% block top_bar_before_nav %} {% endblock %}
+                                {% if app.security.token and is_granted('ROLE_SONATA_ADMIN') %}
+                                    {% for group in admin_pool.dashboardgroups %}
+                                        <li class="dropdown">
+                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ group.label|trans({}, group.label_catalogue) }} <span class="caret"></span></a>
+                                            <ul class="dropdown-menu">
+                                                {% for admin in group.items %}
+                                                    {% if admin.hasroute('create') and admin.isGranted('CREATE') or admin.hasroute('list') and admin.isGranted('LIST') %}
+                                                        <li><a href="{{ admin.generateUrl('list')}}">{{ admin.label|trans({}, admin.translationdomain) }}</a></li>
+                                                    {% endif %}
+                                                {% endfor %}
+                                            </ul>
+                                        </li>
+                                    {% endfor %}
+                                {% endif %}
+                                {% block top_bar_after_nav %} {% endblock %}
+                            </ul>
+                        </div>
                     {% endif %}
                 </div>
             </div>
@@ -153,6 +164,12 @@ file that was distributed with this source code.
             {% endif%}
 
             <div class="row-fluid">
+                {% if _side_menu is not empty %}
+                    <div class="sidebar span2">
+                        <div class="well sonata-ba-side-menu" style="padding: 8px 0;">{{ _side_menu|raw }}</div>
+                    </div>
+                {% endif %}
+
                 <div class="content {{ _side_menu is not empty ? ' span10' : 'span12' }}">
 
                     {% if _preview is not empty %}
@@ -181,11 +198,7 @@ file that was distributed with this source code.
                     {% endif %}
                 </div>
 
-                {% if _side_menu is not empty %}
-                    <div class="sidebar span2">
-                        <div class="well sonata-ba-side-menu" style="padding: 8px 0;">{{ _side_menu|raw }}</div>
-                    </div>
-                {% endif %}
+
             </div>
 
             {% block footer %}