#770 responsive grids

inc/js/classes/BxDolGrid.js

@@ -344,6 +344,18 @@ BxDolGrid.prototype._bindActionsSingle = function (eElement) {
 BxDolGrid.prototype._bindActions = function (isSkipSearchInput) {
     var $this = this;
 
+    jQuery('#' + this._sIdContainer).bind('scroll', function () {
+        if (-$(this).find('.bx-grid-table').position().left >= ($(this).find('.bx-grid-table').width() - $(this).width()))
+            $(this).parents('.bx-grid-table-wrapper2').addClass('bx-grid-table-hide-shadow-after');
+        else
+            $(this).parents('.bx-grid-table-wrapper2').removeClass('bx-grid-table-hide-shadow-after');
+        
+        if ($(this).find('.bx-grid-table').position().left >= 0)
+            $(this).parents('.bx-grid-table-wrapper2').addClass('bx-grid-table-hide-shadow-before');
+        else
+            $(this).parents('.bx-grid-table-wrapper2').removeClass('bx-grid-table-hide-shadow-before');
+    });
+
     jQuery('#' + this._sIdWrapper + ' *[bx_grid_action_bulk]').bind('click', function () {
         if ($(this).hasClass('bx-btn-disabled'))
             return;

modules/boonex/decorous/data/template/system/css/grid.css

@@ -0,0 +1,8 @@
+@import url(../../../../../../../template/css/grid.css);
+
+.bx-grid-table-wrapper2:before {
+    background: linear-gradient(to right, rgba(245,250,255,0.9) 0%,rgba(245,250,255,0) 100%);
+}
+.bx-grid-table-wrapper2:after {
+    background: linear-gradient(to right, rgba(245,250,255,0) 0%,rgba(245,250,255,0.9) 100%);
+}

template/css/grid.css

@@ -3,6 +3,35 @@
     width:100%;
     border-collapse:collapse;
 }
+.bx-grid-table-wrapper {    
+    overflow-x:scroll;
+    overflow-y:hidden;    
+}
+.bx-grid-table-wrapper2 {
+    position:relative;
+}
+.bx-grid-table-wrapper2.bx-grid-table-hide-shadow-before:before,
+.bx-grid-table-wrapper2.bx-grid-table-hide-shadow-after:after {
+    display:none !important;
+}
+.bx-grid-table-wrapper2:before,
+.bx-grid-table-wrapper2:after {
+    display:none;
+    content:"";
+    position:absolute;
+    top:0;
+    width:1.5rem;
+    height:100%;
+    z-index:1;
+}
+.bx-grid-table-wrapper2:before {
+    left:0;
+    background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
+}
+.bx-grid-table-wrapper2:after {
+    right:0;
+    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
+}
 .bx-grid-header .bx-def-hr, 
 .bx-grid-table-wrapper .bx-def-hr {
     margin:0;

template/css/media-phone.css

@@ -139,4 +139,13 @@ ul.bx-menu-toolbar li a span {
     margin-bottom: 0px;
 }
 
+/* grid.css */
+
+html .bx-grid-table {
+    min-width:720px;
+}
+html .bx-grid-table-wrapper2:before,
+html .bx-grid-table-wrapper2:after {
+    display:block;
+
 } /* @media end */

template/grid.html

@@ -13,48 +13,52 @@
 	                </div>
 	            </bx_if:actions_independent>
 			</div>
-			<hr class="bx-def-hr" />
         </div>
     </bx_if:display_header>
-    <div id="__id_cont__" class="bx-grid-table-wrapper">
-        <table id="__id_table__" class="bx-grid-table">
-        	<bx_if:display_head>
-	            <thead>
-	                <tr>
-	                    <bx_repeat:row_header>
-	                        __header_cell__
-	                    </bx_repeat:row_header>
-	                </tr>
-	                <tr class="bx-grid-table-row-hr">
-	                    <td colspan="__columns__"><hr class="bx-def-hr" /></td>
-	                </tr>
-	            </thead>
-            </bx_if:display_head>
-            <tbody>
-                    <bx_repeat:rows_data>
-                        <tr id="__id_row__" class="__row_class__">
-                            __row__
+    <div class="bx-grid-table-wrapper2 bx-grid-table-hide-shadow-before">
+        <div id="__id_cont__" class="bx-grid-table-wrapper">
+            <table id="__id_table__" class="bx-grid-table">
+                <bx_if:display_head>
+                    <thead>
+                        <tr class="bx-grid-table-row-hr">
+                            <td colspan="__columns__"><hr class="bx-def-hr" /></td>
+                        </tr>                    
+                        <tr>
+                            <bx_repeat:row_header>
+                                __header_cell__
+                            </bx_repeat:row_header>
                         </tr>
-                    </bx_repeat:rows_data>
-            </tbody>
-        </table>
-		<bx_if:display_footer>
-	        <div class="bx-grid-footer ">
-	        	<hr class="bx-def-hr" />
-	        	<div class="bx-grid-footer-cnt bx-def-padding-sec-top bx-def-margin-thd-neg bx-clearfix">
-		            <bx_if:actions_bulk>
-		                <div style="float:left;">
-		                    __actions_bulk__
-		                </div>
-		            </bx_if:actions_bulk>
-		
-		            <div class="bx-def-margin-thd" style="float:right;">
-		                __paginate__
-		            </div>
-				</div>
-	        </div>
-		</bx_if:display_footer>
+                        <tr class="bx-grid-table-row-hr">
+                            <td colspan="__columns__"><hr class="bx-def-hr" /></td>
+                        </tr>
+                    </thead>
+                </bx_if:display_head>
+                <tbody>
+                        <bx_repeat:rows_data>
+                            <tr id="__id_row__" class="__row_class__">
+                                __row__
+                            </tr>
+                        </bx_repeat:rows_data>
+                </tbody>
+            </table>
+        </div>
     </div>
+    <bx_if:display_footer>
+        <div class="bx-grid-footer ">
+            <hr class="bx-def-hr" />
+            <div class="bx-grid-footer-cnt bx-def-padding-sec-top bx-def-margin-thd-neg bx-clearfix">
+                <bx_if:actions_bulk>
+                    <div style="float:left;">
+                        __actions_bulk__
+                    </div>
+                </bx_if:actions_bulk>
+    
+                <div class="bx-def-margin-thd" style="float:right;">
+                    __paginate__
+                </div>
+            </div>
+        </div>
+    </bx_if:display_footer>    
 </div>
 
 <script>