web/web_responsive/static/src/less/form_view.less

/* 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;
    }
}