diff options
| author | Pierre Paridans <app@odoo.com> | 2019-03-19 15:53:16 +0000 |
|---|---|---|
| committer | Pierre Paridans <app@odoo.com> | 2019-04-08 12:31:16 +0000 |
| commit | 75c219bfdfd6d8ff7cba84b349ead13b1956b7db (patch) | |
| tree | 14a0c54f8d6f96f4e2cd6c1c53f06e20130bc966 | |
| parent | 7887dd872761d2541c4e1050246786febf45bc34 (diff) | |
[FIX] mail: chatter's button alignment and composer width on mobile
Buttons "Send message / Log note / Activity" are on two lines instead of
one. In addition there is a 1px glitch on the attachment icon.
Also long attachment name on tiny screens (i.e. iPhone 5) breaks the
composer layout: horizontal scrollbar appears.
The two-line buttons effect is related to a change (fix) in Bootstrap
4.2 which removes the white-space: nowrap on .btn. It was originally
introduced in Odoo through https://github.com/odoo/odoo/pull/29949.
Reference: Original Bootstrap PR https://github.com/twbs/bootstrap/pull/27010
Task ID: 1946573
closes odoo/odoo#31939
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
| -rw-r--r-- | addons/mail/static/src/scss/chatter.scss | 21 | ||||
| -rw-r--r-- | addons/mail/static/src/scss/composer.scss | 3 |
2 files changed, 20 insertions, 4 deletions
diff --git a/addons/mail/static/src/scss/chatter.scss b/addons/mail/static/src/scss/chatter.scss index 599802382a1..7c5bc2b8e35 100644 --- a/addons/mail/static/src/scss/chatter.scss +++ b/addons/mail/static/src/scss/chatter.scss @@ -26,11 +26,11 @@ position: relative; float: right; flex: 1 1 auto; + height: $o-statusbar-height; .o_chatter_button_attachment { - height: $o-statusbar-height - 2px; + height: $o-statusbar-height; float: right; - padding: 0px; margin-right: 25px; .fa-paperclip, .o_chatter_attachment_button_count { @@ -38,15 +38,20 @@ } } .o_followers { - height: $o-statusbar-height + 1; + height: $o-statusbar-height; border-bottom: 1px solid transparent; flex: 0 1 auto; } } > .btn { - height: $o-statusbar-height + 1; + height: $o-statusbar-height; border: 1px solid transparent; } + .btn { + @extend .text-nowrap; + padding-right: $btn-padding-x; + padding-left: $btn-padding-x; + } } @@ -65,3 +70,11 @@ } } } + +@include media-breakpoint-down(sm) { + .o_chatter .o_chatter_topbar > .o_topbar_right_area { + .o_chatter_button_attachment { + margin-right: initial; + } + } +} diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss index 1f2fffcee60..b265979065b 100644 --- a/addons/mail/static/src/scss/composer.scss +++ b/addons/mail/static/src/scss/composer.scss @@ -142,6 +142,9 @@ &:not(.o_chat_inline_composer) { flex-flow: row wrap; + .o_composer_container { + max-width: 100%; + } .o_composer_container, .o_composer_button_send { flex: 1 0 100%; } |