fix: 🐛 Cookie modal was overflowing on landscape mobile
This commit is contained in:
Jérémy Munsch
parent
e83faef77c
commit
c04eeb1124
3 changed files with 41 additions and 12 deletions
32
src/scss/themes/standard.scss
vendored
32
src/scss/themes/standard.scss
vendored
|
|
@ -1,4 +1,5 @@
|
|||
@use "sass:color";
|
||||
@use "sass:math";
|
||||
@import "./../variables";
|
||||
@import "./../mixins";
|
||||
@import "./../reset";
|
||||
|
|
@ -86,7 +87,7 @@ $breakpoint-mobile: 535px;
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
|
|
@ -109,8 +110,15 @@ $breakpoint-mobile: 535px;
|
|||
|
||||
#cn-wrapper {
|
||||
@extend %reset-styles;
|
||||
|
||||
position: fixed;
|
||||
// * Display over BS elements
|
||||
z-index: $cn-cookie-button-z-index;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100dvh;
|
||||
pointer-events: none;
|
||||
|
||||
// * BIG COOKIE BTN
|
||||
#cn-cookie-btn {
|
||||
|
|
@ -125,6 +133,7 @@ $breakpoint-mobile: 535px;
|
|||
background-color: $ck-btn-background-color;
|
||||
box-shadow: $ck-shadow-color;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
right: $cn-cookie-button-position-right-h;
|
||||
|
|
@ -163,14 +172,13 @@ $breakpoint-mobile: 535px;
|
|||
|
||||
// * COOKIE BANNER MODAL
|
||||
#cn-banner {
|
||||
position: fixed;
|
||||
position: absolute;
|
||||
z-index: $cn-cookie-button-z-index;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: fit-content;
|
||||
max-height: $cn-cookie-modal-max-height-mobile;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -215,10 +223,14 @@ $breakpoint-mobile: 535px;
|
|||
bottom: calc(#{$cn-cookie-button-position-bottom} + 60px);
|
||||
left: $cn-cookie-animation-left;
|
||||
width: $cn-cookie-modal-width;
|
||||
height: fit-content;
|
||||
max-height: $cn-cookie-modal-max-height-desktop;
|
||||
max-height: math.max(26rem, $cn-cookie-modal-max-height-desktop - 12rem);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
&.cn-modal-page {
|
||||
max-height: $cn-cookie-modal-max-height-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#cn-li-template {
|
||||
|
|
@ -235,6 +247,11 @@ $breakpoint-mobile: 535px;
|
|||
padding: 0.8rem;
|
||||
overflow-y: auto;
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
|
||||
// * 1rst Page BANNER
|
||||
.cn-banner-content {
|
||||
display: flex;
|
||||
|
|
@ -480,11 +497,6 @@ $breakpoint-mobile: 535px;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-mobile) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// * SHOW CN BANNER MODAL
|
||||
|
|
|
|||
2
src/scss/variables.scss
vendored
2
src/scss/variables.scss
vendored
|
|
@ -52,6 +52,6 @@ $cn-button-line-height: 1 !default;
|
|||
$cn-button-height: 3rem !default;
|
||||
|
||||
// Dimensions modal
|
||||
$cn-cookie-modal-max-height-mobile: 100vh;
|
||||
$cn-cookie-modal-max-height-mobile: 100dvh;
|
||||
$cn-cookie-modal-max-height-desktop: 38rem;
|
||||
$cn-cookie-modal-width: 30rem !default;
|
||||
|
|
|
|||
|
|
@ -605,6 +605,7 @@ export default class CookieNotice {
|
|||
this.resetCookieModal();
|
||||
this.bannerContent.classList.add("d-none");
|
||||
this.modalContainer.classList.remove("d-none");
|
||||
this.bannerContainer.classList.add("cn-modal-page");
|
||||
|
||||
// Scroll to the top of the cookies list
|
||||
this.modalWrapper.scrollTop = 0;
|
||||
|
|
@ -619,6 +620,12 @@ export default class CookieNotice {
|
|||
this.updateRestrictCloseModal();
|
||||
if (!this.restrictCloseModal) {
|
||||
document.body.classList.remove("cn-open");
|
||||
if (!this.isOnBannerPage()) {
|
||||
// * Make toggle page to banner on closing
|
||||
this.bannerContent.classList.toggle("d-none");
|
||||
this.modalContainer.classList.toggle("d-none");
|
||||
this.bannerContainer.classList.remove("cn-modal-page");
|
||||
}
|
||||
this.unsetTabIndex();
|
||||
this.setupCookieModalList();
|
||||
} else {
|
||||
|
|
@ -687,6 +694,7 @@ export default class CookieNotice {
|
|||
resetCookieModal() {
|
||||
this.bannerContent.classList.remove("d-none");
|
||||
this.modalContainer.classList.add("d-none");
|
||||
this.bannerContainer.classList.remove("cn-modal-page");
|
||||
if (!this.customizeBtn.dataset.openModal) {
|
||||
throw new Error("Cannot find attribut data-open-modal");
|
||||
}
|
||||
|
|
@ -801,7 +809,9 @@ export default class CookieNotice {
|
|||
toggleCookieModalPages() {
|
||||
this.bannerContent.classList.toggle("d-none");
|
||||
this.modalContainer.classList.toggle("d-none");
|
||||
if (!this.modalContainer.classList.contains("d-none")) {
|
||||
this.bannerContainer.classList.toggle("cn-modal-page");
|
||||
if (!this.isOnBannerPage()) {
|
||||
this.bannerContainer.classList.add("cn-modal-page");
|
||||
this.denyAllWaitingCookies();
|
||||
}
|
||||
this.setTabIndex();
|
||||
|
|
@ -825,6 +835,13 @@ export default class CookieNotice {
|
|||
this.customizeBtn.title = customizeBtnBannerDataset.closeModal as string;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the actual page: banner or modal (with cookie choices)
|
||||
*/
|
||||
isOnBannerPage(): boolean {
|
||||
return this.modalContainer.classList.contains("d-none");
|
||||
}
|
||||
}
|
||||
|
||||
enum CookieStatus {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue