Merge pull request #734 from Tecnativa/10.0-web_responsive-fix_horizontal_scroll

[FIX]web_responsive: Scrolling and mobile search/group buttons

web_responsive/__manifest__.py

@@ -6,7 +6,7 @@
     "name": "Web Responsive",
     "summary": "It provides a mobile compliant interface for Odoo Community "
                "web",
-    "version": "10.0.1.1.0",
+    "version": "10.0.1.2.0",
     "category": "Website",
     "website": "https://laslabs.com/",
     "author": "LasLabs, Tecnativa, Odoo Community Association (OCA)",

web_responsive/static/src/less/main.less

@@ -50,19 +50,50 @@ main {
         overflow: auto;
         > .o_main_content {
             overflow: initial;
-            @media (max-width: @screen-xs-max) {
-                > .o_content {
+            > .o_content {
+                @media (max-width: @screen-xs-max) {
                     overflow: initial;
                 }
+
+                @media (min-width: @screen-sm-min) {
+                    // .o_content is the one to display horizontal scrolling in
+                    // case of wide tables
+                    .table-responsive {
+                        overflow-x: visible;
+                    }
+                }
             }
         }
     }
 }
 
-// Remove z-index from CP buttons so it doesn't overlap the menu
-.o_control_panel {
-     .btn-group > .btn.active {
-        z-index: initial;
+@media (max-width: @screen-sm-max) {
+    .o_control_panel {
+        // Remove z-index from CP buttons so it doesn't overlap the menu
+        .btn-group > .btn.active {
+            z-index: initial;
+        }
+
+        // Better horizontal space usage for buttons
+        justify-content: space-between;
+        .o_cp_left, .o_cp_right {
+            width: inherit;
+        }
+
+        .o_search_options > .o_dropdown {
+            &.hidden-xs {
+                // No other way to display "Group By" button :(
+                display: inline-block !important;
+            }
+
+            // Hack to hide text and display larger icons
+            > .btn {
+                font-size: 0;
+                > .fa {
+                    font-size: @odoo-font-size-base * 1.4;
+                }
+            }
+        }
     }
 }