From 5b0d72a891c60526d75210c82c5af1a11c34cb6a Mon Sep 17 00:00:00 2001 From: Yaroslav Lukovetskyi Date: Tue, 13 Feb 2024 21:35:24 +0200 Subject: [PATCH] fix gallery --- care/index.html | 31 ++-- care/src/js/gallery.js | 137 +++++++++++++----- care/src/sass/base.scss | 6 +- care/src/sass/components/contacts.scss | 12 -- care/src/sass/components/gallery/gallery.scss | 97 ++++++++++--- 5 files changed, 198 insertions(+), 85 deletions(-) diff --git a/care/index.html b/care/index.html index f5aadeb..e8762d4 100644 --- a/care/index.html +++ b/care/index.html @@ -1085,41 +1085,41 @@

Find a Doctor near you

alt="doctor one" /> -
  • +
  • doctor two
    • -
  • +
  • doctor three
    • -
  • +
  • doctor four
    • -
  • +
  • doctor five
    • -
  • +
  • doctor sixFind a Doctor near you -
    diff --git a/care/src/js/gallery.js b/care/src/js/gallery.js index 2e76587..3c609e7 100644 --- a/care/src/js/gallery.js +++ b/care/src/js/gallery.js @@ -1,44 +1,115 @@ -const openModal = document.querySelector(".js-open-gallery"); -// const closeModal = document.querySelector(".js-close-gallery"); -const backdropJs = document.querySelector(".js-backdrop-gallery"); +// const openModal = document.querySelector(".js-open-gallery"); +// // const closeModal = document.querySelector(".js-close-gallery"); +// const backdropJs = document.querySelector(".js-backdrop-gallery"); -// Зробили клік на ссилку через деоегування подій -const link = document.querySelector(".gallery"); +// // Зробили клік на ссилку через деоегування подій +// const link = document.querySelector(".gallery"); -openModal.addEventListener("click", onOpenModal); -// closeModal.addEventListener("click", onCloseModal); -backdropJs.addEventListener("click", onBackdropClick); +// openModal.addEventListener("click", onOpenModal); +// // closeModal.addEventListener("click", onCloseModal); +// backdropJs.addEventListener("click", onBackdropClick); -link.addEventListener("click", onCloseLinkClick); +// link.addEventListener("click", onCloseLinkClick); -function onOpenModal() { - // backdropJs.classList.toggle("is-open"); - document.body.classList.add("show-modal-2"); - document.body.classList.add("is-hidden"); -} +// function onOpenModal() { +// // backdropJs.classList.toggle("is-open"); +// document.body.classList.add("show-modal-2"); +// document.body.classList.add("is-hidden"); +// } + +// function onCloseModal() { +// document.body.classList.remove("is-hidden"); +// // backdropJs.classList.toggle("is-open"); +// document.body.classList.remove("show-modal-2"); +// } + +// function onBackdropClick(event) { +// if (event.currentTarget === event.target) { +// onCloseModal(); +// } +// } + +// function onCloseLinkClick(event) { +// if (event.target.nodeName === "IMG") { +// // console.log(event.target.nodeName); +// // onCloseModal(); +// onOpenModal(); +// } +// } + +// function onEscKeyPress(event) { +// if (event.code === "Escape") { +// onCloseModal(); +// } +// } + +// Шаги логики +// 1 Получить ссылку на карточки на слайдер на кнопки +// 2 Перебарть циклом вор всю коллекцию чтобы получить доступ и повесить на них клик -function onCloseModal() { +const cards = document.querySelectorAll(".gallery__card"), + pictures = document.querySelectorAll(".gallery__image"), + slider = document.querySelector(".slider"), + sliderContainer = document.querySelector(".slider__container"), + sliderBtnLeft = document.querySelector(".slider__btn-left"), + sliderBtnRight = document.querySelector(".slider__btn-right"), + sliderClose = document.querySelector(".slider__btn-close"); + +let cardIndex = 0, + pictureFull = null, + newPictureFull = null; + +const closeSlider = () => { + pictureFull && pictureFull.remove(); + + newPictureFull && newPictureFull.remove(); + + slider.classList.add("hidden"); document.body.classList.remove("is-hidden"); - // backdropJs.classList.toggle("is-open"); - document.body.classList.remove("show-modal-2"); -} +}; -function onBackdropClick(event) { - if (event.currentTarget === event.target) { - onCloseModal(); - } -} +sliderBtnLeft.addEventListener("click", () => changePicture("left")); +sliderBtnRight.addEventListener("click", () => changePicture("right")); +sliderClose.addEventListener("click", () => closeSlider()); +slider.addEventListener("click", onBackdropClick); -function onCloseLinkClick(event) { - if (event.target.nodeName === "IMG") { - // console.log(event.target.nodeName); - // onCloseModal(); - onOpenModal(); - } -} +// Перебираем коллекцию карточек +// на каждую карточку вешам прослушиать клик и функцию при клике открыть модалку +cards.forEach((item, index) => { + item.addEventListener("click", () => { + cardIndex = index; + openModal(); + }); +}); + +const openModal = () => { + pictureFull = pictures[cardIndex].cloneNode(); + pictureFull.style.widht = "100%"; + sliderContainer.append(pictureFull); + slider.classList.remove("hidden"); + document.body.classList.add("is-hidden"); +}; + +// const changePicture = (dir) => { +// if ("left") { +// cardIndex > 0 ? cardIndex-- : (cardIndex = cards.length - 1); +// // cardIndex - 1; +// } else if ("right") { +// cardIndex < cards.length - 1 ? cardIndex++ : (cardIndex = 0); +// // cardIndex + 1; +// } else { +// return; +// } +// }; + +// newPictureFull = pictures[cardIndex].cloneNode(); +// newPictureFull.style.widht = "100%"; -function onEscKeyPress(event) { - if (event.code === "Escape") { - onCloseModal(); +// pictureFull.replaceWith(newPictureFull); +// pictureFull = newPictureFull; + +function onBackdropClick(event) { + if (event.currentTarget === event.target) { + closeSlider(); } } diff --git a/care/src/sass/base.scss b/care/src/sass/base.scss index e2e0e00..250ea09 100644 --- a/care/src/sass/base.scss +++ b/care/src/sass/base.scss @@ -107,6 +107,6 @@ body.is-hidden { padding-right: 15px; } -// .hidden { -// display: none !important; -// } +.hidden { + display: none !important; +} diff --git a/care/src/sass/components/contacts.scss b/care/src/sass/components/contacts.scss index d5b59b8..8e58eb2 100644 --- a/care/src/sass/components/contacts.scss +++ b/care/src/sass/components/contacts.scss @@ -180,15 +180,3 @@ legend { .form-btn:focus { background: $button-accent-color; } - -.gallery { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 10px; - margin-bottom: 120px; -} - -.gallery img { - height: 250px; -} diff --git a/care/src/sass/components/gallery/gallery.scss b/care/src/sass/components/gallery/gallery.scss index 5a127bb..40f8f98 100644 --- a/care/src/sass/components/gallery/gallery.scss +++ b/care/src/sass/components/gallery/gallery.scss @@ -51,17 +51,30 @@ display: flex; justify-content: center; flex-wrap: wrap; - // max-width: 900px; + max-width: 1171px; width: 100%; + gap: 10px; + margin-bottom: 120px; } +// .gallery img { +// height: 250px; +// } + .gallery__card { display: flex; width: 300px; } .gallery__image { - width: 300px; + width: 800px; + @media screen and (max-width: $tablet) { + width: 300px; + } + + @media screen and (min-width: $tablet) and (max-width: $desktop) { + width: 600px; + } } .gallery__card:hover .gallery__image { @@ -89,23 +102,69 @@ animation: anim 0.5s ease; } -.slider__btn { +// .slider__btn { +// display: none; +// @media screen and (min-width: $desktop) { +// position: absolute; +// top: 50%; +// transform: translateY(-50%); +// text-decoration: none; +// display: inline-block; +// padding: 14px 40px; +// margin: 10px 20px; +// border-radius: 30px; +// background-image: linear-gradient(#6ab1d7 0%, #33d9de 50%, #002878 100%); +// background-position: 100% 0; +// background-size: 200% 200%; +// font-family: inherit; +// font-size: 24px; +// font-weight: 300; +// color: $white-color; +// box-shadow: 0 16px 32px 0 rgba(0, 40, 120, 0.35); +// transition: 0.5s; +// } + +// // cursor: pointer; +// } + +// .slider__btn:hover { +// box-shadow: 0 0 0 0 rgba(0, 40, 120, 0); +// background-position: 0 0; +// } + +.slider__btn-left { + display: none; + @media screen and (min-width: $desktop) { + left: 75px; + } +} + +.slider__btn-right { + display: none; + @media screen and (min-width: $desktop) { + right: 75px; + } +} + +.slider__btn-close { position: absolute; - top: 50%; - transform: translateY(-50%); + top: 0; + right: 0; text-decoration: none; - display: inline-flex; - padding: 14px 40px; - border-radius: 30px; - background-image: linear-gradient(#6ab1d7 0%, #33d9de 50%, #002878 100%); - background-position: 100% 0; - background-size: 200% 200%; - font-size: inherit; - font-size: 24px; - font-weight: 300; + display: inline-block; + padding: 15px 30px; + margin: 10px 20px; + border-radius: 10px; + box-shadow: + 0 0 40px 40px #f137a6 inset, + 0 0 0 0 #f137a6; + font-family: inherit; + font-weight: bold; + letter-spacing: 2px; color: $white-color; - box-shadow: 0 16px 32px 0 rgba(0, 40, 120, 0.35); - transition: 0.5s; + transition: 0.15s ease-in-out; + + // cursor: pointer; } .slider__btn-close:hover { @@ -117,15 +176,15 @@ @keyframes anim { 0% { - border-radius: 100%; + // border-radius: 100%; transform: scale(0); } 50% { - border-radius: 50%; + // border-radius: 50%; transform: scale(1.2); } 100% { - border-radius: 0; + // border-radius: 0; transform: scale(1); } }