Merge pull request #48 from ViktorSvertoka/bugfix

Bugfix
ViktorSvertoka · Dec 17, 2023 · e125ef3 · e125ef3
2 parents ec84c05 + 7a6c6d4
commit e125ef3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 8 deletions.
diff --git a/src/css/layout/03-exercises.css b/src/css/layout/03-exercises.css
@@ -289,7 +289,7 @@
   padding: 0;
   width: 58px;
   height: 24px;
-  font-size: 16;
+  font-size: 16px;
   transition: var(--transition-dur-and-func);
   border: none;
 }

diff --git a/src/css/layout/05-modal-exercise.css b/src/css/layout/05-modal-exercise.css
@@ -42,14 +42,24 @@
   position: relative;
   z-index: 100;
   overflow: auto;
-  max-width: 100%;
-
   max-height: 80vh;
   padding: 40px 20px;
   border-radius: 20px;
   background-color: var(--color-black);
 }
 
+@media screen and (max-width: 375px) {
+  .modal-exercises {
+    max-width: 80vw;
+  }
+}
+
+@media screen and (min-width: 375px) {
+  .modal-exercises {
+    width: 335px;
+  }
+}
+
 @media screen and (min-width: 768px) {
   .modal-exercises {
     padding: 32px;
@@ -220,15 +230,14 @@
 .modal-exercises__btn-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   gap: 10px;
 }
 
 @media screen and (min-width: 768px) {
   .modal-exercises__btn-container {
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: end;
     gap: 7px;
   }
 }
@@ -245,6 +254,12 @@
   }
 }
 
+@media screen and (max-width: 767px) {
+  .modal-exercises__btn {
+    width: 100%;
+  }
+}
+
 @media screen and (min-width: 768px) {
   .modal-exercises__btn {
     padding: 12px 24px;
@@ -285,6 +300,7 @@
   color: var(--color-white);
   transition: all var(--transition-dur-and-func);
 }
+
 @media screen and (min-width: 768px) {
   .modal-exercises__btn-rating {
     padding-left: 22px;

diff --git a/src/js/05-modal-exercises.js b/src/js/05-modal-exercises.js
@@ -178,6 +178,8 @@ function createMarkup({
           <p class="modal-exercises__description">${description}</p>
         </div>
     </div>
+<<<<<<< HEAD
+=======
   </div>
   <div class="modal-exercises__btn-container">
         <button class="modal-exercises__btn-favorites modal-exercises__btn" type="button" data-id="${_id}">
@@ -187,7 +189,17 @@ function createMarkup({
             </svg>
           </button>
         <button class="modal-exercises__btn-rating modal-exercises__btn" type="button">Give a rating</button>
+>>>>>>> 8c3641318954f88879c80815f488b558eacce8bc
   </div>
+  <div class="modal-exercises__btn-container">
+  <button class="modal-exercises__btn-favorites modal-exercises__btn" type="button" data-id="${_id}">
+      Add to favorites
+      <svg class="btn-favorites__icon">
+        <use href="${icons}#icon-favorites"></use>
+      </svg>
+    </button>
+  <button class="modal-exercises__btn-rating modal-exercises__btn" type="button">Give a rating</button>
+</div>
 `;
 }
 

diff --git a/src/partials/05-modal-exercise.html b/src/partials/05-modal-exercise.html
@@ -1,6 +1,4 @@
 <!-- modal-exercises -->
 <div class="overlay hidden">
-  <div class="container">
-    <div class="modal-exercises hidden"></div>
-  </div>
+  <div class="modal-exercises hidden"></div>
 </div>