From 2d0341a7d8472e47daff3913b8fa3025619177b0 Mon Sep 17 00:00:00 2001
From: Andrew Motko <andrew.motko@gmail.com>
Date: Fri, 15 Dec 2023 06:21:53 +0200
Subject: [PATCH] fix modal-exersice styles

---
 src/css/layout/05-modal-exercise.css | 194 ++++++++++++++++++++++-----
 src/js/05-modal-exercises.js         |  83 +++++++-----
 2 files changed, 208 insertions(+), 69 deletions(-)

diff --git a/src/css/layout/05-modal-exercise.css b/src/css/layout/05-modal-exercise.css
index cf6cc7b..8e19177 100644
--- a/src/css/layout/05-modal-exercise.css
+++ b/src/css/layout/05-modal-exercise.css
@@ -5,29 +5,63 @@
   bottom: 0;
   left: 0;
   right: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(4, 4, 4, 0.4);
-  backdrop-filter: blur(3px);
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(3px);
+  background: rgba(4, 4, 4, 0.4);
 }
 
 .hidden {
   display: none;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__container {
+    display: flex;
+    gap: 32px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
 .modal-exercises {
   position: relative;
   z-index: 100;
-  overflow-y: auto;
+  /* overflow-y: auto; */
+  overflow: auto;
   max-width: 100%;
-  max-height: 100%;
+
+  max-height: 80vh;
   padding: 40px 20px;
   border-radius: 20px;
-  background-color: #242424;
+  background-color: var(--color-black);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises {
+    padding: 32px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises {
+    width: 708px;
+    margin: 0 auto;
+  }
 }
 
 .modal-exercises__btn-close {
@@ -38,20 +72,36 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  stroke: #f4f4f4;
+  stroke: var(--color-white);
   background-color: rgba(0, 0, 0, 0);
   border: none;
+  transition: all var(--transition-dur-and-func);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn-close {
+    top: 16px;
+    right: 16px;
+  }
+}
+
+.modal-exercises__btn-close:hover {
+  transform: rotate(270deg);
 }
 
 .modal-exercises__img {
+  width: 100%;
+  height: 258px;
   margin-bottom: 20px;
   border-radius: 12px;
-  background: linear-gradient(
-      0deg,
-      rgba(4, 4, 4, 0.2) 0%,
-      rgba(4, 4, 4, 0.2) 100%
-    ),
-    url(<path-to-image>), lightgray -2px -6.558px / 105.185% 109.653% no-repeat;
+  filter: brightness(0.9);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__img {
+    height: 259px;
+    margin-bottom: 0;
+  }
 }
 
 .modal-exercises__name {
@@ -60,8 +110,17 @@
   font-weight: 500;
   line-height: 1;
   text-transform: none;
-  color: #f4f4f4;
+  color: var(--color-white);
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__name {
+    margin-bottom: 8px;
+    font-size: 24px;
+    line-height: 1.33;
+  }
 }
+
 .modal-exercises__name::first-letter {
   text-transform: uppercase;
 }
@@ -76,22 +135,36 @@
   color: var(--color-white);
 }
 
-.icon-star-empty {
-  width: 18px;
-  height: 18px;
-  fill: rgba(244, 244, 244, 0.2);
+@media screen and (min-width: 768px) {
+  .modal-exercises__rating {
+    margin-bottom: 24px;
+  }
 }
 
 .icon-star {
+  padding: 2px;
   width: 18px;
   height: 18px;
   fill: var(--color-yellow);
 }
 
+.icon-star-empty {
+  padding: 2px;
+  width: 18px;
+  height: 18px;
+  fill: rgba(244, 244, 244, 0.2);
+}
+
 .modal-exercises__block {
   margin-bottom: 40px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__block {
+    margin-bottom: 64px;
+  }
+}
+
 .modal-exercises__list {
   position: relative;
   display: flex;
@@ -100,10 +173,17 @@
   margin-bottom: 30px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__list {
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+}
+
 .modal-exercises__list::before,
 .modal-exercises__list::after {
   position: absolute;
-  height: 2px;
+  height: 1px;
   width: 100%;
   background-color: rgba(244, 244, 244, 0.2);
   content: '';
@@ -117,6 +197,15 @@
   left: 0;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__list::before {
+    top: -8px;
+  }
+  .modal-exercises__list::after {
+    bottom: -8px;
+  }
+}
+
 .modal-exercises__subtitle {
   margin-bottom: 4px;
   font-size: 12px;
@@ -128,8 +217,10 @@
 .modal-exercises__text {
   font-size: 14px;
   font-weight: 500;
-  color: #f4f4f4;
+  line-height: 1.28;
+  color: var(--color-white);
 }
+
 .modal-exercises__text::first-letter {
   text-transform: uppercase;
 }
@@ -143,36 +234,75 @@
 .modal-exercises__btn-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
+}
+
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn-container {
+    gap: 7px;
+  }
 }
 
 .modal-exercises__btn {
-  font-family: 'DM Sans', sans-serif;
+  padding: 12px 19px;
   font-size: 14px;
   line-height: 1.28;
-  padding: 12px 19px;
   border-radius: 30px;
 }
 
+@media screen and (min-width: 768px) {
+  .modal-exercises__btn {
+    padding: 12px 24px;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+}
+
 .modal-exercises__btn-favorites {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  border: none;
-  background-color: #f4f4f4;
-  color: #242424;
+  gap: 8px;
+  border: 1px solid var(--color-white);
+  background-color: var(--color-white);
+  color: var(--color-black);
+  transition: all var(--transition-dur-and-func);
 }
 
 .btn-favorites__icon {
-  stroke: #242424;
-  fill: #f4f4f4;
+  stroke: var(--color-black);
+  fill: var(--color-white);
   padding-left: 4px;
-  width: 22px;
+  width: 18px;
   height: 18px;
+  transition: all var(--transition-dur-and-func);
+}
+
+@media screen and (min-width: 768px) {
+  .btn-favorites__icon {
+    width: 20px;
+    height: 20px;
+  }
 }
 
 .modal-exercises__btn-rating {
-  border: 1px solid #f4f4f4;
+  border: 1px solid var(--color-white);
   background-color: transparent;
-  color: #f4f4f4;
+  color: var(--color-white);
+  transition: all var(--transition-dur-and-func);
+}
+
+.modal-exercises__btn-favorites:hover {
+  background-color: var(--color-black);
+  color: white;
+}
+
+.modal-exercises__btn-favorites:hover .btn-favorites__icon {
+  fill: var(--color-black);
+  stroke: var(--color-white);
+}
+
+.modal-exercises__btn-rating:hover {
+  background-color: var(--color-white);
+  color: var(--color-black);
 }
diff --git a/src/js/05-modal-exercises.js b/src/js/05-modal-exercises.js
index 0a39a75..20fc713 100644
--- a/src/js/05-modal-exercises.js
+++ b/src/js/05-modal-exercises.js
@@ -99,55 +99,64 @@ function createMarkup({
   const ratingStarsHTML = createRating(rating);
   return `
   <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>
-  </svg>
-  </button>
-  <img
+    <button class="modal-exercises__btn-close">
+      <svg width="24" height="24">
+        <use href="./img/sprite.svg#icon-menu-mobile-close"></use>
+      </svg>
+    </button>
+
+    <img
     class="modal-exercises__img"
     ${getExerciseGif}
     alt="Exercise video"
     loading="lazy"
-  />
-  <div class="modal-exercises__card">
-    <h2 class="modal-exercises__name">${name}</h2>
-    <div class="modal-exercises__rating">${ratingStarsHTML}</div>
-    <div class="modal-exercises__block">
-      <ul class="modal-exercises__list">
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Target</h3>
-          <p class="modal-exercises__text">${target}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Body Part</h3>
-          <p class="modal-exercises__text">${bodyPart}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Equipment</h3>
-          <p class="modal-exercises__text">${equipment}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Popular</h3>
-          <p class="modal-exercises__text">${popularity}</p>
-        </li>
-        <li class="modal-exercises__item">
-          <h3 class="modal-exercises__subtitle">Burned calories</h3>
-          <p class="modal-exercises__text">${burnedCalories}/${time}</p>
-        </li>
-      </ul>
-      <p class="modal-exercises__description">${description}</p>
-    </div>
-    <div class="modal-exercises__btn-container">
+    />
+
+    <div class="modal-exercises__card">
+      <h2 class="modal-exercises__name">${name}</h2>
+      <div class="modal-exercises__rating">${ratingStarsHTML}</div>
+
+        <div class="modal-exercises__block">
+          <ul class="modal-exercises__list">
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Target</h3>
+              <p class="modal-exercises__text">${target}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Body Part</h3>
+              <p class="modal-exercises__text">${bodyPart}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Equipment</h3>
+              <p class="modal-exercises__text">${equipment}</p>
+            </li>
+
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Popular</h3>
+              <p class="modal-exercises__text">${popularity}</p>
+            </li>
+            
+            <li class="modal-exercises__item">
+              <h3 class="modal-exercises__subtitle">Burned Calories</h3>
+              <p class="modal-exercises__text">${burnedCalories}/${time}</p>
+            </li>
+          </ul>
+          <p class="modal-exercises__description">${description}</p>
+        </div>
+
+      <div class="modal-exercises__btn-container">
         <button class="modal-exercises__btn-favorites modal-exercises__btn">
             Add to favorites
             <svg class="btn-favorites__icon">
               <use href="./img/sprite.svg#icon-favorites"></use>
             </svg>
           </button>
-          <button class="modal-exercises__btn-rating modal-exercises__btn">Give a rating</button>
+        <button class="modal-exercises__btn-rating modal-exercises__btn">Give a rating</button>
+      </div>
     </div>
   </div>
-</div>
 `;
 }