Merge pull request #514 from danieltorres7/web_responsive_form_line_breaks

Web responsive form line breaks

web_responsive/static/src/less/form_view.less

@@ -0,0 +1,88 @@
+/* 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;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // 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;
+        }
+    }
+
+    // Adapt chatter widget to small viewports
+    .oe_chatter {
+        min-width: inherit;
+    }
+}

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"
                   />