From f744d2c30f2fc2cf4d40b687a6c11912a8cfb24f Mon Sep 17 00:00:00 2001
From: Daniel Torres <danieltorres7@gmail.com>
Date: Mon, 2 Jan 2017 12:24:49 -0200
Subject: [PATCH 1/3] 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"
                   />

From 4fdb347adef33b10fa78499486dd0121af9f38be Mon Sep 17 00:00:00 2001
From: Daniel Torres <danieltorres7@gmail.com>
Date: Mon, 2 Jan 2017 16:52:30 -0200
Subject: [PATCH 2/3] Form image editing controls always present

Make image editing controls always available, instead of depending
on resolution or hover.
---
 web_responsive/static/src/less/form_view.less | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/web_responsive/static/src/less/form_view.less b/web_responsive/static/src/less/form_view.less
index c15fe3c2..d31f01f6 100644
--- a/web_responsive/static/src/less/form_view.less
+++ b/web_responsive/static/src/less/form_view.less
@@ -62,4 +62,22 @@
             }
         }
     }
+
+    // Make image editing controls always available, instead of depending on resolution or hover
+    .o_form_field_image > .o_form_image_controls {
+        position: initial;
+        opacity: 1;
+        > .fa {
+            width: 50%;
+            padding: 6px;
+            margin: 0px;
+            text-align: center;
+        }
+        > .fa.o_select_file_button {
+            background: @odoo-brand-primary;
+        }
+        > .fa.o_clear_file_button {
+            background: @brand-danger;
+        }
+    }
 }

From f6c14f749c4d4523e2950e1687fe7b3322b9c5ef Mon Sep 17 00:00:00 2001
From: Jairo Llopis <yajo.sk8@gmail.com>
Date: Thu, 19 Jan 2017 09:31:55 +0100
Subject: [PATCH 3/3] Fix problem with overflowing chatter widget.

---
 web_responsive/static/src/less/form_view.less | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web_responsive/static/src/less/form_view.less b/web_responsive/static/src/less/form_view.less
index d31f01f6..cd6fee23 100644
--- a/web_responsive/static/src/less/form_view.less
+++ b/web_responsive/static/src/less/form_view.less
@@ -80,4 +80,9 @@
             background: @brand-danger;
         }
     }
+
+    // Adapt chatter widget to small viewports
+    .oe_chatter {
+        min-width: inherit;
+    }
 }