From 11dff8f4c97cd3050c8c5bcbc4828ed42ead8d11 Mon Sep 17 00:00:00 2001
From: Daniel Torres <danieltorres7@gmail.com>
Date: Mon, 2 Jan 2017 12:24:49 -0200
Subject: [PATCH] Form view improvements to fit smaller screens

On screens with less than 768px content is limited to 2 columns.

On mobile field labels have their own line.

Fix elements width for XS screens
---
 web_responsive/static/src/less/form_view.less | 65 +++++++++++++++++++
 web_responsive/views/assets.xml               |  3 +
 2 files changed, 68 insertions(+)
 create mode 100644 web_responsive/static/src/less/form_view.less

diff --git a/web_responsive/static/src/less/form_view.less b/web_responsive/static/src/less/form_view.less
new file mode 100644
index 00000000..c15fe3c2
--- /dev/null
+++ b/web_responsive/static/src/less/form_view.less
@@ -0,0 +1,65 @@
+/* Copyright 2016 Ponto Suprimentos Ltda.
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+.o_form_view {
+    > .o_form_sheet_bg > .o_form_sheet {
+         @media (max-width: @screen-xs-max) {
+             min-width: 0px; // allow thinner form_sheet width for smaller screens
+         }
+    }
+    @media (max-width: @screen-xs) {
+        .o_form_field > .o_form_input_dropdown {
+            width: 80%;
+        }
+    }
+    .o_group {
+        &.o_inner_group > tbody > tr > td {
+            // prevent td content from breaking into lines
+            white-space: nowrap;
+            .note-editor > .note-toolbar {
+                // prevent wysiwyg editor buttons from expanding the screen
+                white-space: initial;
+            }
+        }
+        // reduce form maximum columns for smaller screens
+        @media (max-width: @screen-xs-max) {
+            .o-generate-groups(12);
+            .o-generate-groups(@n, @i: 1) when (@i =< @n) {
+                .o_group_col_@{i} {
+                    width: 100%;
+                }
+                .o-generate-groups(@n, @i + 1);
+            }
+        }
+        // break field label into a separate line from field on small screens
+        @media (max-width: @screen-xs) {
+            &.o_inner_group {
+                display: block;
+                > tbody {
+                    display: block;
+                    > tr {
+                        margin-top: 8px;
+                        .o-flex-display();
+                        .o-flex-flow(row, wrap);
+                        > td {
+                            .o-flex(1, 0, auto);
+                            padding: 0;
+                            display: block;
+                            padding: 0;
+                            // odoo adds a `style="width: 100%"` by javascript
+                            // directly on the tag so we need `!important` here:
+                            width: auto!important;
+                            max-width: 100%;
+                            &.o_td_label {
+                                border-right: 0;
+                                // keep 6% space on line to fit checkboxes
+                                // see above about `!important`
+                                width: 94%!important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/web_responsive/views/assets.xml b/web_responsive/views/assets.xml
index 4708d9e2..f865e793 100644
--- a/web_responsive/views/assets.xml
+++ b/web_responsive/views/assets.xml
@@ -22,6 +22,9 @@
             <link rel="stylesheet"
                   href="/web_responsive/static/src/less/app_drawer.less"
                   />
+            <link rel="stylesheet"
+                  href="/web_responsive/static/src/less/form_view.less"
+                  />
             <link rel="stylesheet"
                   href="/web_responsive/static/src/less/variables.less"
                   />