/* Copyright 2016 Ponto Suprimentos Ltda. Copyright 2018 Alexandre Díaz * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ @sheet-margin: @sheet-padding; @chatter-side-width: 30%; // Sided Chatter @media (min-width: @screen-md) { .o_chatter_position_sided { .o_form_view:not(.o_form_nosheet) { display: flex; height: 100%; .o_form_sheet_bg { border-right: 1px solid @table-border-color; overflow: auto; flex: 1 1 auto; } .oe_chatter { overflow: auto; flex: 0 0 @chatter-side-width; .o_chatter_topbar { height: auto; flex-wrap: wrap; button:last-of-type { flex: 1 0 auto; text-align: left; } .o_followers { order: -10; flex: 0 1 100%; } } &:empty { display: none; } } } } } // Normal Chatter .o_chatter_position_normal { .oe_chatter { max-width: initial; } } // Sticky Header & Footer in List View .o_view_manager_content { >div { >.table-responsive { >.o_list_view { thead { position: sticky; top: 0; } tfoot { position: sticky; bottom: 0; } } } } } .o_form_view { // Form must fill 100% width in any size .o_form_sheet_bg { .o_form_sheet { min-width: auto; max-width: 100%; margin: @sheet-margin; } @media (max-width: @screen-sm-max) { padding: 0; .o_form_sheet { border: none; } } .o_form_statusbar { position: sticky; top: 0; z-index: 1; .o-status-more > li > button { border: 0; } .o_statusbar_buttons_container { .o_statusbar_buttons_dropdown { height: 100%; >#dropdownMenuHeader { height: 100%; border-top: 0; border-bottom: 0; border-radius: 0; } >.dropdown-menu > li > button { width: 100%; border-radius: 0; border: 0; } } .o_statusbar_buttons_base > .o_statusbar_buttons { .o-flex-flow(row, wrap); >.btn { @o-statusbar-buttons-vmargin: 4px; min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin; margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0; padding-top: 2px; padding-bottom: 2px; } } } } } // No overflowing buttons or titles .oe_button_box, .oe_title { max-width: 100%; } @media (max-width: @screen-xs) { .o_form_field > .o_form_input_dropdown { width: 80%; } } .o_group { &.o_inner_group > tbody > tr > td { .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; } }