Merge remote-tracking branch 'origin/fix_cookies' into develop

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();
     }
   

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