Skip to content

Commit

Permalink
Merge pull request #64 from GeorgiySergeev/fix-order-modal
Browse files Browse the repository at this point in the history 
Fixed modals
  • Loading branch information
@GeorgiySergeev
GeorgiySergeev authored May 28, 2023
2 parents c9d3dda + 0ed1009 commit 48b6160
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 173 deletions.
6 changes: 6 additions & 0 deletions src/js/thanks-modal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ const form = document.querySelector('.thank-form');
const backdrop = document.querySelector('.overlay');
const openModalBtn = document.querySelector('.contacts-button');
const closeBtns = document.querySelectorAll('.close-btn');
const overlay = document.querySelector('.js-overlay-modal');

const openSuccessModal = () => {
backdrop.classList.add(MODAL_ACTIVE_CLASS_NAME);
thankModal.classList.add(MODAL_ACTIVE_CLASS_NAME);
Expand All @@ -24,3 +26,7 @@ form.addEventListener('submit', e => {
e.preventDefault();
setTimeout(openSuccessModal, 300);
});

overlay.addEventListener('click', function () {
closeSuccessModal();
});
300 changes: 127 additions & 173 deletions src/partials/order-mod.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@ <h2 class="order-modal-title">Your Order</h2>
<ul class="order-list">
<li class="order-item">
<div class="order-block">
<h3 class="order-item-name">Strawberry Basket</h3>
<p class="order-item-type">Plant</p>
<label
class="order-choise-strawberry"
for="order-choise-strawberry"
>
<h3 class="order-item-name">Strawberry Basket</h3>
<p class="order-item-type">Plant</p>

<input
class="strawberry-checkbox"
type="checkbox"
Expand All @@ -27,71 +28,55 @@ <h3 class="order-item-name">Strawberry Basket</h3>
<svg class="strawberry-checkbox-icon" width="8" height="8">
<use href="./img/svg/symbol-defs.svg#icon-pick"></use>
</svg>
<div class="order-strawberry-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Strawberry basket"
width="173"
height="196"
loading="lazy"
/>
</picture>
</div>
</label>
</div>

<div class="order-strawberry-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Strawberry basket"
width="173"
height="196"
loading="lazy"
/>
</picture>
<!-- <img srcset="
./img/modal-window-img/[email protected] 88w,
./img/modal-window-img/[email protected] 133w,
./img/modal-window-img/[email protected] 173w,
./img/modal-window-img/[email protected] 176w,
./img/modal-window-img/[email protected] 266w,
./img/modal-window-img/[email protected] 346w"
sizes="(min-width: 1280px) 173px, (min-width: 768px) 133px,
(min-width: 375px) 88px, 100wv"
src="./img/modal-window-img/[email protected]"
alt="apple basket"
width="173"
height="196"
loading="lazy"> -->
</div>
</li>

<li class="order-item">
<div class="order-block">
<h3 class="order-item-name">Apple Basket</h3>
<p class="order-item-type">Plant</p>
<label class="order-choise-apple" for="order-choise-apple">
<h3 class="order-item-name">Apple Basket</h3>
<p class="order-item-type">Plant</p>
<input
class="apple-checkbox"
type="checkbox"
Expand All @@ -100,70 +85,55 @@ <h3 class="order-item-name">Apple Basket</h3>
<svg class="apple-checkbox-icon" width="8" height="8">
<use href="./img/svg/symbol-defs.svg#icon-pick"></use>
</svg>
<div class="order-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Apple basket"
width="229"
height="196"
loading="lazy"
/>
</picture>
</div>
</label>
</div>

<div class="order-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Apple basket"
width="229"
height="196"
loading="lazy"
/>
</picture>
<!-- <img srcset="
./img/modal-window-img/[email protected] 106w,
./img/modal-window-img/[email protected] 172w,
./img/modal-window-img/[email protected] 212w,
./img/modal-window-img/[email protected] 229w,
./img/modal-window-img/[email protected] 352w,
./img/modal-window-img/[email protected] 458w"
sizes="(min-width: 1280px) 229px, (min-width: 768px) 172px,
(min-width: 375px) 88px, 100wv"
src="./img/modal-window-img/[email protected]"
alt="apple basket"
width="229"
height="196"
loading="lazy"> -->
</div>
</li>

<li class="order-item">
<div class="order-block">
<h3 class="order-item-name">Fruits Basket</h3>
<p class="order-item-type">Plant</p>
<label class="order-choise-fruit" for="order-choise-fruit">
<h3 class="order-item-name">Fruits Basket</h3>
<p class="order-item-type">Plant</p>
<input
class="fruit-checkbox"
type="checkbox"
Expand All @@ -172,64 +142,48 @@ <h3 class="order-item-name">Fruits Basket</h3>
<svg class="fruit-checkbox-icon" width="8" height="8">
<use href="./img/svg/symbol-defs.svg#icon-pick"></use>
</svg>
<div class="order-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Fruits basket"
width="229"
height="196"
loading="lazy"
/>
</picture>
</div>
</label>
</div>

<div class="order-image">
<picture>
<!-- Desktop -->
<source
media="(min-width: 1280px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Tablet -->
<source
media="(min-width: 768px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>

<!-- Phone -->
<source
media="(max-width: 767px)"
srcset="
./img/modal-window-img/[email protected] 1x,
./img/modal-window-img/[email protected] 2x
"
type="image/png"
/>
<img
src="./img/modal-window-img/[email protected]"
alt="Fruits basket"
width="229"
height="196"
loading="lazy"
/>
</picture>

<!-- <img srcset="
./img/modal-window-img/[email protected] 106w,
./img/modal-window-img/[email protected] 172w,
./img/modal-window-img/[email protected] 212w,
./img/modal-window-img/[email protected] 229w,
./img/modal-window-img/[email protected] 352w,
./img/modal-window-img/[email protected] 458w"
sizes="(min-width: 1280px) 229px, (min-width: 768px) 172px,
(min-width: 375px) 88px, 100wv"
src="./img/modal-window-img/[email protected]"
alt="apple basket"
width="229"
height="196"
loading="lazy"> -->
</div>
</li>
</ul>
</div>
Expand Down

0 comments on commit 48b6160

Please sign in to comment.