Ticket #3087 - Points 1-3.

inc/js/classes/BxDolGrid.js

@@ -240,13 +240,13 @@ BxDolGrid.prototype.action = function (sAction, oData, sData, isDisableLoading,
 };
 
 BxDolGrid.prototype.processJson = function (oData, sAction, isDisableLoading) {
-	var $this = this;
+    var $this = this;
     var fContinue = function() {
     	if (oData && undefined != oData.grid) {        
             $('#' + $this._sIdContainer).html($(oData.grid).find('#' + $this._sIdContainer).html());
             var sFooter = $(oData.grid).find('.bx-grid-footer').size() ? $(oData.grid).find('.bx-grid-footer').html() : '';
             $('#' + $this._sIdWrapper).find('.bx-grid-footer').html(sFooter);
-            $('#' + $this._sIdWrapper).find('.bx-grid-header-controls-counter-value').html(oData.total_count);
+            $('#' + $this._sIdWrapper).find('.bx-grid-header-controls-counter-value').html(oData.total_count_f);
             $this._onDataReloaded(true);
         }
     	if (oData && undefined != oData.blink) {

modules/base/general/template/css/manage_tools.css

@@ -6,10 +6,11 @@ div.bx-grid-header div.bx-form-element-wrapper {
 }
 
 /*--- Administration tools ---*/
-div.bx-grid-header div#bx-form-element-filter1,
-div.bx-grid-header div#bx-form-element-filter2
-{
-    margin-right: 20px;
+div.bx-grid-header div.bx-form-element-wrapper {
+    margin-right: 0.5rem;
+}
+div.bx-grid-header div.bx-form-element-wrapper:last-child {
+    margin-right: 0;
 }
 div.bx-grid-header div#bx-form-element-filter1,
 div.bx-grid-header div#bx-form-element-filter2,

template/css/grid.css

@@ -35,22 +35,35 @@
 .bx-grid-table-wrapper .bx-def-hr {
     margin:0;
 }
-
+.bx-grid-header-cnt {
+    position: relative;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-justify-content: flex-start;
+    justify-content: flex-start;
+}
 .bx-grid-header-controls-filter {
-    float:left;
 }
-
 .bx-grid-header-controls-counter {
-    float:left;
+    -webkit-flex-grow: 2;
+    flex-grow: 2;
 }
-
-.bx-media-phone div.bx-grid-header div.bx-form-element-wrapper{
-    float:none;
+.bx-grid-header-controls-independent {
 }
 
-.bx-grid-header-controls-independent {
-    float:right;
-    margin-top:0;
+.bx-media-phone .bx-grid-header-cnt {
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+}
+.bx-media-phone div.bx-grid-header div.bx-form-element-wrapper {
+    float: none;
+    margin-right: 0;
+    margin-bottom: 0.25rem; 
+}
+.bx-media-phone div.bx-grid-header div.bx-form-element-wrapper:last-child {
+    margin-bottom: 0; 
 }
 
 .bx-grid-table .bx-grid-table-row-hr td:first-child,

template/grid.html

@@ -1,23 +1,23 @@
 <div id="__id_wrap__">
     <bx_if:display_header>
         <div class="bx-grid-header">
-        	<div class="bx-grid-header-cnt bx-def-padding-sec-bottom bx-clearfix">
+        	<div class="bx-grid-header-cnt bx-def-margin-thd-leftright-neg bx-def-padding-sec-bottom bx-clearfix">
 	            <bx_if:filter>
-	                <div class="bx-grid-header-controls-filter bx-def-margin-thd-top">
+	                <div class="bx-grid-header-controls-filter bx-def-margin-thd-leftright">
 	                    __controls__
 	                </div>  
 	            </bx_if:filter>
-                <bx_if:counter>
-                    <div class="bx-grid-header-controls-counter bx-def-margin-thd-top bx-def-margin-left bx-def-padding-sec-topbottom">
-                        <span class="bx-grid-header-controls-counter-value">__counter__</span>
-                    </div>
-                </bx_if:counter>
+                    <bx_if:counter>
+                        <div class="bx-grid-header-controls-counter bx-def-margin-thd-leftright">
+                            <span class="bx-grid-header-controls-counter-value">__counter__</span>
+                        </div>
+                    </bx_if:counter>
 	            <bx_if:actions_independent>
-	                <div class="bx-grid-header-controls-independent bx-def-margin-thd-neg">
+	                <div class="bx-grid-header-controls-independent">
 	                    __actions_independent__
 	                </div>
 	            </bx_if:actions_independent>
-			</div>
+                </div>
         </div>
     </bx_if:display_header>
     <div class="bx-grid-table-wrapper2 bx-grid-table-hide-shadow-before __class_table_wrapper__">

template/scripts/BxBaseGrid.php

@@ -41,7 +41,11 @@ class BxBaseGrid extends BxDolGrid
     {
         require_once(BX_DIRECTORY_PATH_INC . "design.inc.php");
 
-        echoJson(array('grid' => $this->getCode(false), 'total_count' => $this->_iTotalCount));
+        echoJson(array(
+            'grid' => $this->getCode(false), 
+            'total_count' => $this->_iTotalCount,
+            'total_count_f' => _t('_sys_grid_total_count', $this->_iTotalCount)
+        ));
     }
 
     public function performActionReorder()