diff --git a/resources/js/front/ldcweb-cn.js b/resources/js/front/ldcweb-cn.js index ecf6f507..30a0817e 100644 --- a/resources/js/front/ldcweb-cn.js +++ b/resources/js/front/ldcweb-cn.js @@ -36,14 +36,14 @@ newCookie.push(key + "=wait"); } + this.bannerContainer.classList.add("ldcweb-cn-banner-open"); + this.saveLDCWebCookie(newCookie); } else { let test = cookies.split(","); test.forEach((elm) => { let test = elm.split("="); if (test[1] === "wait") { - } - else{ this.bannerContainer.classList.add("ldcweb-cn-banner-open"); } }); @@ -64,7 +64,7 @@ denyLabel.classList.remove("active"); } this.updateAllCookiesButtonsActiveStatus(); - this.bannerContainer.classList.add("ldcweb-cn-banner-open"); + this.bannerContainer.classList.remove("ldcweb-cn-banner-open"); }.bind(this); this.acceptAllBtnBanner.addEventListener("click", accept); @@ -84,13 +84,13 @@ denyLabel.classList.add("active"); } this.updateAllCookiesButtonsActiveStatus(); - this.bannerContainer.classList.add("ldcweb-cn-banner-open"); + this.bannerContainer.classList.remove("ldcweb-cn-banner-open"); }.bind(this); this.denyAllBtnBanner.addEventListener("click", deny); let openLdcwebCookies = function(e) { e.preventDefault(); - this.bannerContainer.classList.remove("ldcweb-cn-banner-open"); + this.bannerContainer.classList.add("ldcweb-cn-banner-open"); this.ldcwebBannerContent.classList.add("visibility"); this.ldcwebBannerDetails.classList.add("visibility"); this.ldcwebBannerBtnDetails.classList.add("visibility"); @@ -161,7 +161,7 @@ let resetVue = function(e){ e.preventDefault(); this.bannerContainer.classList.toggle("ldcweb-cn-banner-open") - if(!this.bannerContainer.classList.contains("ldcweb-cn-banner-open")){ + if(this.bannerContainer.classList.contains("ldcweb-cn-banner-open")){ this.ldcwebBannerContent.classList.remove("visibility"), this.ldcwebBannerDetails.classList.remove("visibility"), this.ldcwebBannerBtnDetails.classList.remove("visibility"), @@ -246,7 +246,6 @@ } } } - this.cookieContainer.classList.add("ldcweb-cn-banner-open"); this.setListenerOnChange(); } diff --git a/resources/sass/front/modules/_ldcweb-cn.scss b/resources/sass/front/modules/_ldcweb-cn.scss index 12124968..504bfdb5 100644 --- a/resources/sass/front/modules/_ldcweb-cn.scss +++ b/resources/sass/front/modules/_ldcweb-cn.scss @@ -7,7 +7,7 @@ --primary-color: rgb(100, 100, 100); --secondary-color: #0f437e; --background-color: #ffffff; - --shadow-color: 0px 3px 7px 0px rgb(0 0 0 / 35%); + --shadow-color: 0 .5rem 1rem rgb(0 0 0 / 35%); --title-font: "Satisfy", sans-serif; --title-size: 25px; --text-font: "Barlow", sans-serif; @@ -92,6 +92,9 @@ #template{ display: none; } +* { + box-sizing: border-box; +} #ldcweb-cn.open-banner .ldcweb-cn-banner{ display: flex; } @@ -121,25 +124,25 @@ flex-direction: column; justify-content: flex-end; position: fixed; - left: var(--ldcweb-cn-position-left); + left: 0; bottom: calc(var(--ldcweb-cn-position-bottom) + 60px); - width: 480px; + width: 475px; height: auto; max-height: 80vh; border-radius: 10px; z-index: var(--ldcweb-cn-z-index); - opacity: 1; line-height: initial; overflow: hidden; box-shadow: var(--shadow-color); user-select: none; - opacity: 1; + opacity: 0; + visibility: hidden; transition: .3s; } #ldcweb-cn .ldcweb-cn-banner-open{ - left: 0; - opacity: 0; - visibility: hidden; + left: var(--ldcweb-cn-position-left); + opacity: 1; + visibility: visible; } .ldcweb-banner-content, .ldcweb-banner-details{ display: flex; @@ -156,7 +159,6 @@ align-items: flex-start; } .ldcweb-banner-details-open{ - height: 120px; margin-bottom: 6px; } #ldcweb-cn .ldcweb-banner-img{ @@ -279,7 +281,6 @@ } #ldcweb-cn-modal .modal-wrapper{ position: relative; - background-color: var(--ck-bg-color-modal-wrapper); max-height: 100vh; } #ldcweb-cn-modal .modal-wrapper > div:not(:first-of-type){ @@ -324,8 +325,8 @@ /* DETAILS */ #ldcweb-cn-modal .modal-details{ width: 100%; - height: 200px; - overflow-y: scroll; + height: 153px; + overflow-y: auto; margin: 6px 0; } #ldcweb-cn-modal .modal-details ul{ @@ -385,9 +386,9 @@ background: var(--ck-color-deny); } #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div{ - width: 60px; display: table; text-align: center; + margin: .5em; } #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input:checked ~ label, #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons div:first-of-type input ~label.active{ @@ -399,6 +400,7 @@ } #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons input{display: none;} #ldcweb-cn-modal .modal-details .ldcweb-cn-buttons label{ + width: 100px; display: block; color: var(--ck-color-txt); transition: color .3s; @@ -435,9 +437,12 @@ border-bottom-left-radius: 0; } .ldcweb-banner-details-open { - height: auto; + height: 0; } #ldcweb-cn .ldcweb-banner-title p{ text-align: center; } + #ldcweb-cn .ldcweb-banner-img{ + padding: 0 0 20px 0; + } } \ No newline at end of file