Merge pull request #36 from ViktorSvertoka/modal-exercise

Refactor(IMG, CSS, JS) Add a stub for the picture and fixed modal window closing

src/css/layout/05-modal-exercise.css

@@ -98,6 +98,7 @@
 
 @media screen and (min-width: 768px) {
   .modal-exercises__img {
+    width: 270px;
     height: 259px;
     margin-bottom: 0;
   }
@@ -140,32 +141,6 @@
   }
 }
 
-/* .icon-star {
-  padding: 2px;
-  width: 18px;
-  height: 18px;
-  fill: rgba(244, 244, 244, 0.2);
-} */
-
-/* .icon-star-empty {
-  padding: 2px;
-  width: 18px;
-  height: 18px;
-  fill: rgba(244, 244, 244, 0.2);
-} */
-
-/* .icon-star:nth-child(3n + 1) {
-  fill: var(--color-yellow); 
-}
-
-.icon-star:nth-child(3n + 2) {
-  fill: var(--color-yellow); 
-}
-
-.icon-star:nth-child(3n) {
-  fill: var(--color-yellow);
-} */
-
 .modal-exercises__block {
   margin-bottom: 40px;
 }
@@ -283,7 +258,6 @@
 .btn-favorites__icon {
   stroke: var(--color-black);
   fill: var(--color-white);
-  padding-left: 4px;
   width: 18px;
   height: 18px;
   transition: all var(--transition-dur-and-func);
@@ -302,6 +276,12 @@
   color: var(--color-white);
   transition: all var(--transition-dur-and-func);
 }
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn-rating {
+    padding-left: 22px;
+    padding-right: 22px;
+  }
+}
 
 .modal-exercises__btn-favorites:hover {
   background-color: var(--color-black);

src/js/05-modal-exercises.js

@@ -63,7 +63,6 @@ function createRating(rating) {
       },
     ];
 
-    // Генерація linearGradient
     const linearGradient = `
         <linearGradient id="${gradientId}" x1="0%" y1="0%" x2="100%" y2="0%">
           ${gradientStops
@@ -105,8 +104,8 @@ function createMarkup({
   const getExerciseGif = getGif(gifUrl);
   function getGif(gifUrl) {
     if (gifUrl === null || !gifUrl) {
-      return;
-      // Треба заглушку
+      return `srcset = './img/modal-exercise-image.jpg 1x,./img/[email protected] 2x'
+      src = './img/modal-exercise-image.jpg'`;
     }
     return `src="${gifUrl}"`;
   }
@@ -115,14 +114,14 @@ function createMarkup({
   <div class="modal-exercises__container" data-id="${_id}">
     <button class="modal-exercises__btn-close">
       <svg width="24" height="24">
-        <use href="./img/sprite.svg#icon-menu-mobile-close"></use>
+        <use href="/img/sprite.svg#icon-menu-mobile-close"></use>
       </svg>
     </button>
 
     <img
     class="modal-exercises__img"
     ${getExerciseGif}
-    alt="Exercise video"
+    alt="Exercise image"
     loading="lazy"
     />
 
@@ -164,7 +163,7 @@ function createMarkup({
         <button class="modal-exercises__btn-favorites modal-exercises__btn" data-id="${_id}">
             Add to favorites
             <svg class="btn-favorites__icon">
-              <use href="./img/sprite.svg#icon-favorites"></use>
+              <use href="/img/sprite.svg#icon-favorites"></use>
             </svg>
           </button>
         <button class="modal-exercises__btn-rating modal-exercises__btn">Give a rating</button>
@@ -181,7 +180,11 @@ function closeModalExercises() {
   document.body.style.overflow = 'auto';
 }
 
-overlay.addEventListener('click', closeModalExercises);
+overlay.addEventListener('click', function (event) {
+  if (event.target === overlay) {
+    closeModalExercises();
+  }
+});
 window.addEventListener('keydown', function (event) {
   if (event.key === 'Escape' && !modalExercises.classList.contains('hidden')) {
     closeModalExercises();