[PRAC/cont] Add margin for "add-modal" btn

Organiz margin-bottom when adding/including contact rows (none, delete).

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/modal-add.css

@@ -131,7 +131,7 @@
   display: flex;
   flex-direction: column;
   row-gap: 15px;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   padding: 25px 30px 0 30px;
   width: 100%;
 
@@ -189,6 +189,10 @@
   opacity: 1;
 }
 
+.add-modal-btn-margin {
+  margin-bottom: 15px;
+}
+
 .modal__add-body-btn-icon {
   position: absolute;
   left: 20px;

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -662,6 +662,11 @@
 
     addBodySelectWrap.append(addModalContactElement); // добавление в DOM строки контактов
 
+    // добавление отступа/margin-bottom кнопке
+    if (addModalContactsArr.length === 0) {
+      addModalBodyAddBtn.classList.add('add-modal-btn-margin');
+    }
+
     // добавление "не большого" эффекта/задержки появления для "новой" строки контактов (элемента)
     addModalContactElement.style.opacity = '0';
     setTimeout(() => {
@@ -732,7 +737,7 @@
             addModalBodyAddBtn.disabled = false;
           }
 
-          // проверка на количество строк контактов (нет, скрытие обвёртки/родителя)
+          // проверка на количество строк контактов (нет, скрытие обвёртки/родителя и удаление отступа у кнопки)
           if (
             document.querySelectorAll('.modal__add-body-add-contact-element')
               .length === 0
@@ -741,6 +746,7 @@
               '.modal__add-body-add-select-wrap'
             );
             addBodySelectWrap.classList.add('d-none');
+            addModalBodyAddBtn.classList.remove('add-modal-btn-margin');
           }
         }
       }