[FIX] website: fix cookiebar responsiveness
There is 2 issues regarding the responsiveness of the cookiebar:
==== Problem n°1: ====
======================
By default, `.modal-dialog` receive a O.5rem margin.
```css
.modal-dialog {
margin: 0.5rem;
}
```
But it only takes effect in small resolution, as starting from SM (576px,
see _breakpoints.scss), the margin is set to 0. `.modal-dialog` receive:
```css
@media (min-width: 576px)
.modal-dialog {
margin: 0 auto;
}
```
On top of that, the `.modal-dialog` has a `min-height` of 100%, which is
getting too big in XS, as there is a 0.5rem margin, which adds up on top
of the 100%
```css
.s_popup[data-vcss='001'] .modal-dialog {
height: auto;
min-height: 100%;
}
```
It results in a modal height bigger than the screen size, ultimately
creating a scrollbar for just a few pixels (2 * 0.5rem margin), making
the cookies bar partly hidden by the screen.
==== Problem n°2: ====
======================
The buttons from the cookies bar "discrete" template are simple `<a/>`
elements inside a `div.col`.
Those links have no bottom margin like a paragraph would have.
In LG screen, it is fine as the col containing those links is next to
the other col containing the paragraph which adds the margin bottom,
making elements not stuck to the bottom edge of the screen:
------------------------------
| COL-LG | COL-LG |
| <p/> | <a/> <a/> |
| | <-- bottom margin set on <p/>
------- screen edge ----------
But in lower resolution, as both col would be on top of each other, the
`<a/>` would be stuck to the bottom screen border.
--------------
| COL-LG |
| <p/> |
| | <-- bottom margin set on <p/>
--------------
-----------------
| COL-LG |
| <a/> <a/> | <-- Against the screen bottom edge
-- screen edge --
======================
Steps to reproduce:
- Install Website
- Enable cookie bar in the Settings
- Go on the Website with a mobile screen width
opw-2784233
closes odoo/odoo#91712
X-original-commit: 843e57694dd73ed4b7fca0460a4cf9b166820843
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Claude Thibault (thcl) <thcl@odoo.com>
Co-authored-by: thcl-odoo <thcl@odoo.com>
This commit is contained in:
co-authored by
thcl-odoo
parent
4420ad3935
commit
6a7c2840cd
@@ -1509,6 +1509,13 @@ $ribbon-padding: 100px;
|
||||
:not(.o_cookies_popup) {
|
||||
bottom: 0;
|
||||
}
|
||||
.o_cookies_discrete {
|
||||
.js_close_popup.o_cookies_bar_text_button, .o_cookies_bar_text_policy {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_website_btn_loading {
|
||||
|
||||
@@ -10,6 +10,9 @@
|
||||
.modal-dialog {
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
@include media-breakpoint-down(xs) {
|
||||
min-height: calc(100% - 2 * #{$modal-dialog-margin});
|
||||
}
|
||||
}
|
||||
|
||||
// Close icon
|
||||
|
||||
Reference in New Issue
Block a user