@ -1,84 +1,73 @@
/* Copyright 2016 Ponto Suprimentos Ltda./* Copyright 2016 Ponto Suprimentos Ltda.
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ * 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%;
.openerp .oe_formview .oe_form {
// Form must fill 100% width in any size
.oe_form_sheetbg {
padding: 16px;
.oe_form_sheet_width {
min-width: auto;
max-width: 100%;
} }
} }
.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;
}
@media (max-width: @screen-sm-max) {
.oe_form_field > .ui-autocomplete-input {
width: 80%;
} }
// 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);
}
.oe_form_group_row .oe_form_group_row {
margin: 0;
} }
// break field label into a separate line from field on small screens
@media (max-width: @screen-xs) {
&.o_inner_group {
.oe_form_group, .oe_form_group_row, .oe_form_group_cell {
&, & tbody {
display: block; 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;
}
}
margin-top: 8px;
width: 100%;
}
&.oe_group_right {
padding: 0;
}
.oe_form_group_row {
display: table;
}
.oe_form_group_cell {
margin: 0;
width: 100%;
}
.oe_form_group_cell_label {
@media (min-width: @screen-sm-min) {
display: table-cell;
min-width: 30%;
width: 30%;
}
@media (max-width: @screen-xs-max) {
border: none;
}
+ .oe_form_group_cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
max-width: 70%;
width: 70%;
} }
} }
} }
} }
} }
// 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;
}
// Make image editing controls always available, instead of depending on
// resolution or hover
.oe_form_field_image > .oe_form_field_image_controls {
display: block;
opacity: 0.7;
} }
// Adapt chatter widget to small viewports // Adapt chatter widget to small viewports
Jairo Llopis
8 years ago