From d5ea9b0a34901106202ed5597968f7c7d0bcf84a Mon Sep 17 00:00:00 2001 From: Kirill Pet Date: Thu, 24 Oct 2024 17:42:32 +0300 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=BF?= =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20=D0=B2=20=D0=BA=D0=B0=D0=B1=D0=B8=D0=BD=D0=B5=D1=82?= =?UTF-8?q?=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/gp-style-desktop.css | 3 + assets/css/gp-style-tablet.css | 16 ++- assets/js/gp-cabinet.js | 86 +++++++++++- notification copy.html | 234 ++++++++++++++++++++++++++++++++ notification.html | 95 +------------ registration.html | 8 +- 6 files changed, 342 insertions(+), 100 deletions(-) create mode 100644 notification copy.html diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css index 03c4e47..187757b 100644 --- a/assets/css/gp-style-desktop.css +++ b/assets/css/gp-style-desktop.css @@ -1291,6 +1291,9 @@ main{ transition: opacity .2s ease-out; } +.cabinet-control__button:first-child{ + margin-left: 0; +} .cabinet-control__button.active{ background: var(--background-black); color: var(--text-white); diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css index 2a2d3e9..29d00bf 100644 --- a/assets/css/gp-style-tablet.css +++ b/assets/css/gp-style-tablet.css @@ -110,15 +110,27 @@ main{ /* cabinet */ .cabinet{ flex-direction: column; + + position: relative; + } .cabinet__control{ display: flex; - align-items: center; + + position: relative; } .cabinet__orders, .cabinet__profile{ - width: 100%; + width: calc(100% - 48px); } +.cabinet__orders, .cabinet__profile{ + position: absolute; + opacity: 0; + transition: opacity .2s ease-out; +} +.cabinet__orders.active, .cabinet__profile.active{ + opacity: 1; +} /* cabinet */ } diff --git a/assets/js/gp-cabinet.js b/assets/js/gp-cabinet.js index 87c28d7..764289a 100644 --- a/assets/js/gp-cabinet.js +++ b/assets/js/gp-cabinet.js @@ -2,4 +2,88 @@ import * as fun from './_gp-function.js'; -fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); \ No newline at end of file +let widthPhoneCabinet = 1200; + +fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail'); + + + +startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button'); +controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet); + +window.addEventListener('resize', (e) => { + startHeight('.cabinet__orders', '.cabinet', widthPhoneCabinet, '.cabinet__profile', '.cabinet-control__button'); +}); + + +// function +function startHeight(heightElement, contentElement, minWidth, removeActive, buttons) { + let thisWidth = window.innerWidth; + let thisHeightElement = document.querySelector(heightElement); + let thisContentElement = document.querySelector(contentElement); + let thisRemoveActive = document.querySelector(removeActive); + let thisButtons = document.querySelectorAll(buttons); + + if (thisWidth <= minWidth) { + let newHeight = thisHeightElement.clientHeight + 48; + + thisContentElement.style.height = `${newHeight}px`; + thisHeightElement.classList.add('active'); + thisRemoveActive.classList.remove('active'); + + thisButtons.forEach(e => { + let thisClassList = e.classList; + + if (!thisClassList.contains('start')) { + thisClassList.remove('active'); + }else{ + thisClassList.add('active') + } + }) + }else{ + thisContentElement.style.height = 'auto'; + thisHeightElement.classList.remove('active'); + + thisButtons.forEach(e => { + let thisClassList = e.classList; + + if (!thisClassList.contains('start')) { + thisClassList.remove('active'); + }else{ + thisClassList.add('active') + } + }) + } +} + +function controlCabinet(buttons, main, minWidth){ + let thisWidth = window.innerWidth; + let thisMain = document.querySelector(main); + + + if (thisWidth <= minWidth) { + let thisButtons = document.querySelectorAll(buttons); + // let thisContents = document.querySelectorAll(contents); + + thisButtons.forEach(e => { + e.onclick = function (element){ + let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`); + let newHeight = thisContent.clientHeight + 48; + let thisButton = element.target; + + thisMain.style.height = `${newHeight}px` + + if (!thisContent.classList.contains('active')) { + thisMain.querySelector('.active').classList.remove('active'); + thisContent.classList.add('active'); + } + + thisButtons.forEach(e => { + e.classList.remove('active'); + }) + thisButton.classList.add('active'); + } + }) + + } +} \ No newline at end of file diff --git a/notification copy.html b/notification copy.html new file mode 100644 index 0000000..523567f --- /dev/null +++ b/notification copy.html @@ -0,0 +1,234 @@ + + + + + + + SEO title + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + +
+
+
+ +
+ +
+ +
+
+
+ + + + +
+
+ +
+
+
+
+
+
+
+ Кошкам + +
+
+ Собакам + +
+
+
+ +
+
+ + ГЛАВНАЯ + +
+
+ + ПРОДУКЦИЯ + + Кошкам + + Собакам + +
+
+ + О COSMOPET + +
+
+ + ПРОИЗВОДСТВО + +
+
+ + БЛОГ + +
+
+
+
+ + +
+
+ + + + + \ No newline at end of file diff --git a/notification.html b/notification.html index 2da4bb6..523567f 100644 --- a/notification.html +++ b/notification.html @@ -225,99 +225,8 @@ - - +
+
diff --git a/registration.html b/registration.html index 6ea5717..4593efb 100644 --- a/registration.html +++ b/registration.html @@ -226,11 +226,11 @@
- - + +
-
+
@@ -350,7 +350,7 @@
-
+