Merge pull request #47 from ViktorSvertoka/modal-exercise

Refactor: change styles for buttons in modal-exercise
ViktorSvertoka · Dec 17, 2023 · 8c36413 · 8c36413
2 parents 42d7a54 + 0c5cd2c
commit 8c36413
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/css/layout/05-modal-exercise.css b/src/css/layout/05-modal-exercise.css
@@ -219,12 +219,16 @@
 
 .modal-exercises__btn-container {
   display: flex;
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  gap: 4px;
+  gap: 10px;
 }
 
 @media screen and (min-width: 768px) {
   .modal-exercises__btn-container {
+    flex-direction: row;
+    justify-content: flex-end;
     gap: 7px;
   }
 }
@@ -235,6 +239,11 @@
   line-height: 1.28;
   border-radius: 30px;
 }
+@media screen and (max-width: 767px) {
+  .modal-exercises__btn {
+    width: 100%;
+  }
+}
 
 @media screen and (min-width: 768px) {
   .modal-exercises__btn {

diff --git a/src/js/05-modal-exercises.js b/src/js/05-modal-exercises.js
@@ -175,16 +175,16 @@ function createMarkup({
           </ul>
           <p class="modal-exercises__description">${description}</p>
         </div>
-      <div class="modal-exercises__btn-container">
+    </div>
+  </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>
-    </div>
   </div>
 `;
 }