From 21c1a5f156e5ca480963cc35623a63ab67684c1b Mon Sep 17 00:00:00 2001
From: maksim <maksim@good-production.ru>
Date: Wed, 11 Jun 2025 02:17:14 +0300
Subject: [PATCH] =?UTF-8?q?Task:6625=20|=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B8=20=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20?=
 =?UTF-8?q?=D1=82=D0=BE=D0=B2=D0=B0=D1=80=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../cosmopet/static/front-page/css/style.css  |  2 +-
 .../cosmopet/woocommerce/assets/js/gp-main.js | 25 ++++++-------------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css
index 017f0ac..0d141f6 100644
--- a/wp-content/themes/cosmopet/static/front-page/css/style.css
+++ b/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;
 }
 
diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js
index b176193..70f3a16 100644
--- a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js
+++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js
@@ -313,12 +313,10 @@ checkbox.forEach(e => {
 // checkbox 
 
 
-// function
-function modalOpen(buttonElement, contentElement){
+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;
-
-            setTimeout(() => {
-                if (device <= 720) {
-                    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);
-        }
-    })
+            // Set width and position based on screen size
+            const isMobile = window.matchMedia("(max-width: 768px)").matches;
+            aside.style.width = isMobile ? '80vw' : '20vw';
+            aside.style.right = '0';
+        };
+    });
 }
 
 function modalClose(buttonElement) {