Task:6625 | Правки модалки на странице товаров

wp-content/themes/cosmopet/static/front-page/css/style.css

@@ -4551,7 +4551,7 @@ color: #f4f1f0;
 
 .modal__aside {
     position: fixed;
-    right: -20vw;
+    right: -400px;
     transition: right 0.3s ease-in-out;
 }
 

wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js

@@ -313,12 +313,10 @@ checkbox.forEach(e => {
 // checkbox 
 
 
-// function
 function modalOpen(buttonElement, contentElement) {
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
         elements = document.querySelectorAll(buttonElement),
-        device = window.screen.width,
         body = document.querySelector('body');
 
     elements.forEach(e => {
@@ -329,21 +327,12 @@ function modalOpen(buttonElement, contentElement){
             modal.classList.add('active');
             thisContentElement.classList.add('active');
             
-            let width = thisContentElement.clientWidth;
+            // Set width and position based on screen size
-
+            const isMobile = window.matchMedia("(max-width: 768px)").matches;
-            setTimeout(() => {
+            aside.style.width = isMobile ? '80vw' : '20vw';
-                if (device <= 720) {
+            aside.style.right = '0';
-                    aside.style.width = `${device}px`;
+        };
-                    thisContentElement.style.opacity = 1;
+    });
-                    thisContentElement.style.filter = 'blur(0px)';
-                }else{
-                    aside.style.width = `${width}px`;
-                    thisContentElement.style.opacity = 1;
-                    thisContentElement.style.filter = 'blur(0px)';
-                }
-            }, 10);
-        }
-    })
 }
 
 function modalClose(buttonElement) {