Browse Source

Merge pull request #514 from danieltorres7/web_responsive_form_line_breaks

Web responsive form line breaks
pull/533/head
Pedro M. Baeza 8 years ago
committed by GitHub
parent
commit
046331e350
  1. 88
      web_responsive/static/src/less/form_view.less
  2. 3
      web_responsive/views/assets.xml

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

3
web_responsive/views/assets.xml

@ -22,6 +22,9 @@
<link rel="stylesheet" <link rel="stylesheet"
href="/web_responsive/static/src/less/app_drawer.less" href="/web_responsive/static/src/less/app_drawer.less"
/> />
<link rel="stylesheet"
href="/web_responsive/static/src/less/form_view.less"
/>
<link rel="stylesheet" <link rel="stylesheet"
href="/web_responsive/static/src/less/variables.less" href="/web_responsive/static/src/less/variables.less"
/> />

Loading…
Cancel
Save