Browse Source

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
pull/514/head
Daniel Torres 8 years ago
parent
commit
f744d2c30f
  1. 65
      web_responsive/static/src/less/form_view.less
  2. 3
      web_responsive/views/assets.xml

65
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;
}
}
}
}
}
}
}
}

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

Loading…
Cancel
Save