Responsive management header

templates/admin/default/admin-layout.tpl

@@ -51,14 +51,10 @@
 			<div class="container">
 
 		        <div class="row">
-		            <div class="col-md-6">
-		      		    <div class="version-info">{intl l='Version %ver' ver="{$THELIA_VERSION}"}</div>
-		            </div>
-
-		    		{module_include location='inside_topbar'}
-
-		            <div class="col-md-6 clearfix">
+		            <div class="col-md-12 clearfix">
+		      		    <div class="version-info pull-left">{intl l='Version %ver' ver="{$THELIA_VERSION}"}</div>
                         
+                        <div class="clearfix pull-right hidden-xs">
                             <div class="btn-group pull-right">
                                 <a href="{navigate to="index"}" title="{intl l='View site'}" target="_blank" class="btn btn-default"><span class="glyphicon glyphicon-eye-open"></span> {intl l="View shop"}</a>
                                 <button class="btn btn-default btn-primary"><span class="glyphicon glyphicon-user"></span> {admin attr="firstname"} {admin attr="lastname"}</button>
@@ -70,8 +66,12 @@
                                     <li><a class="logout" href="{url path='admin/logout'}" title="{intl l='Close administation session'}"><span class="glyphicon glyphicon-off"></span> {intl l="Logout"}</a></li>
                                 </ul>
                             </div>
+                        </div>
 
 		            </div>
+
+		    		{module_include location='inside_topbar'}
+		            
 		        </div>
 
 		    </div>
@@ -87,6 +87,7 @@
 
             <div class="container">
                 
+                <div class="row">
         			<div class="navbar-header">
         				<button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         					<span class="sr-only">Toggle navigation</span>
@@ -167,7 +168,7 @@
                         </ul>
 
                         {loop name="top-bar-search" type="auth" roles="ADMIN" permissions="admin.search"}
-                    <form class="navbar-form pull-right" action="{url path='/admin/search'}">
+                        <form class="navbar-form pull-right hidden-xs" action="{url path='/admin/search'}">
                             <div class="form-group">
                                 <input type="text" class="form-control" id="search_term" name="search_term" placeholder="{intl l='Search'}">
                             </div>
@@ -177,6 +178,7 @@
 
         			</div>
                 </div>
+            </div>
 		</nav>
 
 		{module_include location='after_top_menu'}

templates/admin/default/assets/less/thelia/grid.less

@@ -0,0 +1,11 @@
+@media (max-width: @screen-desktop) {
+	
+	.navbar-form{
+		width: 100%;
+		
+		.form-group{
+			width: 94%;
+		}
+	}
+
+}

templates/admin/default/assets/less/thelia/navbar.less

@@ -31,3 +31,7 @@
 .navbar-default .navbar-toggle .icon-bar{
 	background-color: @btn-primary-color;
 }
+
+.navbar-form{
+	padding: 0;
+}

templates/admin/default/assets/less/thelia/thelia.less

@@ -2,6 +2,7 @@
 @import "navbar.less";
 @import "scaffolding.less";
 @import "type.less";
+@import "grid.less";
 @import "breadcrumbs.less";
 @import "forms.less";
 @import "datepicker.less";