Skip to content

Commit f8d5efe

Browse files
matowdevmatowdev
committed
[PRAC/cont] Change "add-modal" window structure
Moving "Add contact" and "Save" elements/btn's to the "form" body/tag. Worth noting: - preparation for further realization.. to the dynamic addition of select/options. core: B-3 / JS-BL
1 parent d0990f7 commit f8d5efe

File tree

2 files changed

+97
-66
lines changed

2 files changed

+97
-66
lines changed

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

Lines changed: 52 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
.modal__add-content-wrap {
88
border: none;
99
border-radius: 0;
10-
padding: 25px 30px;
10+
padding-top: 25px;
11+
padding-bottom: 25px;
1112
max-width: 450px;
1213
outline: none;
1314
}
@@ -24,6 +25,8 @@
2425
}
2526

2627
.modal__add-header {
28+
padding-right: 30px;
29+
padding-left: 30px;
2730
margin-bottom: 17px;
2831
}
2932

@@ -46,22 +49,31 @@
4649
}
4750

4851
.modal__add-body {
49-
margin-bottom: 40px;
52+
margin-bottom: 1px;
5053
}
5154

5255
.modal__add-body-form {
5356
display: flex;
5457
flex-direction: column;
55-
row-gap: 20px;
5658
}
5759

58-
.modal__add-body-form .modal__add-body-input {
60+
.modal__add-body-inputs-wrap {
61+
display: flex;
62+
flex-direction: column;
63+
row-gap: 13px;
64+
margin-bottom: 23px;
65+
padding-right: 30px;
66+
padding-left: 30px;
67+
}
68+
69+
.modal__add-body-inputs-wrap .modal__add-body-input {
5970
font-family: var(--open-sans), sans-serif;
6071
font-weight: var(--semi-bold);
6172
font-size: var(--default-fs);
6273
}
6374

64-
.modal__add-body-input-wrap .modal__add-body-input {
75+
.modal__add-body-inputs-wrap .modal__add-body-input {
76+
margin: 0;
6577
border: none;
6678
border-bottom: 1px solid var(--gray);
6779
border-radius: 0;
@@ -104,22 +116,25 @@
104116
color: var(--text-gray);
105117
}
106118

107-
.modal__add-footer {
119+
.modal__add-body-add-contacts-wrap {
108120
display: flex;
109121
flex-direction: column;
110-
min-height: 110px;
111-
}
112-
113-
.modal__add-footer-add-btn-wrap {
114-
position: absolute;
115-
bottom: 113px;
116-
display: flex;
117122
justify-content: center;
123+
align-items: center;
118124
margin: 0;
125+
margin-bottom: 23px;
119126
width: 100%;
120127
background-color: rgba(200, 197, 209, .3);
121128
}
122129

130+
.modal__add-body-add-select-wrap {
131+
margin-bottom: 20px;
132+
padding-right: 30px;
133+
padding-left: 30px;
134+
width: 100%;
135+
136+
}
137+
123138
.modal__add-btn {
124139
margin: 0;
125140
border: none;
@@ -135,7 +150,7 @@
135150
transition-timing-function: ease;
136151
}
137152

138-
.modal__add-footer-add-btn {
153+
.modal__add-body-add-btn {
139154
position: relative;
140155
display: flex;
141156
justify-content: flex-end;
@@ -144,35 +159,35 @@
144159
min-width: 191px;
145160
}
146161

147-
.modal__add-footer-add-btn:focus-visible:not(:hover) {
162+
.modal__add-body-add-btn:focus-visible:not(:hover) {
148163
color: var(--main-purple);
149164
}
150165

151-
.modal__add-footer-add-btn:focus-visible:not(:hover) .stroke-add-modal-icon {
166+
.modal__add-body-add-btn:focus-visible:not(:hover) .stroke-add-modal-icon {
152167
opacity: 0;
153168
}
154169

155-
.modal__add-footer-add-btn:focus-visible:not(:hover) .fill-add-modal-icon {
170+
.modal__add-body-add-btn:focus-visible:not(:hover) .fill-add-modal-icon {
156171
opacity: 1;
157172
}
158173

159-
.modal__add-footer-add-btn:focus-visible:active {
174+
.modal__add-body-add-btn:focus-visible:active {
160175
color: var(--light-purple);
161176
}
162177

163-
.modal__add-footer-add-btn:active {
178+
.modal__add-body-add-btn:active {
164179
color: var(--light-purple);
165180
}
166181

167-
.modal__add-footer-add-btn:active .stroke-add-modal-icon {
182+
.modal__add-body-add-btn:active .stroke-add-modal-icon {
168183
opacity: 0;
169184
}
170185

171-
.modal__add-footer-add-btn:active .fill-add-modal-icon {
186+
.modal__add-body-add-btn:active .fill-add-modal-icon {
172187
opacity: 1;
173188
}
174189

175-
.modal__add-footer-btn-icon {
190+
.modal__add-body-btn-icon {
176191
position: absolute;
177192
left: 20px;
178193
width: 19px;
@@ -191,26 +206,32 @@
191206
}
192207

193208

194-
.modal__add-footer-save-btn {
209+
.modal__add-body-save-btn {
210+
align-self: center;
195211
margin-bottom: 5px;
196212
padding: 10px 35px;
197-
min-width: 150px;
213+
max-width: 150px;
198214
color: var(--white);
199215
background-color: var(--main-purple);
200216
}
201217

202-
.modal__add-footer-save-btn:focus-visible:not(:hover) {
218+
.modal__add-body-save-btn:focus-visible:not(:hover) {
203219
background-color: var(--dark-purple);
204220
}
205221

206-
.modal__add-footer-save-btn:focus-visible:active {
222+
.modal__add-body-save-btn:focus-visible:active {
207223
background-color: var(--gray);
208224
}
209225

210-
.modal__add-footer-save-btn:active {
226+
.modal__add-body-save-btn:active {
211227
background-color: var(--gray);
212228
}
213229

230+
.modal__add-footer {
231+
display: flex;
232+
flex-direction: column;
233+
}
234+
214235
.modal__add-footer-cancel-btn {
215236
font-weight: var(--regular);
216237
text-decoration-line: underline;
@@ -231,19 +252,19 @@
231252
/* media queries, any-hover */
232253

233254
@media (any-hover: hover) {
234-
.modal__add-footer-add-btn:hover:not(:active) {
255+
.modal__add-body-add-btn:hover:not(:active) {
235256
color: var(--main-purple);
236257
}
237258

238-
.modal__add-footer-add-btn:hover:not(:active) .stroke-add-modal-icon {
259+
.modal__add-body-add-btn:hover:not(:active) .stroke-add-modal-icon {
239260
opacity: 0;
240261
}
241262

242-
.modal__add-footer-add-btn:hover:not(:active) .fill-add-modal-icon {
263+
.modal__add-body-add-btn:hover:not(:active) .fill-add-modal-icon {
243264
opacity: 1;
244265
}
245266

246-
.modal__add-footer-save-btn:hover:not(:active) {
267+
.modal__add-body-save-btn:hover:not(:active) {
247268
background-color: var(--light-purple);
248269
}
249270
}

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

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@
236236
const addModalHeaderXBtn = document.createElement('button');
237237
const addModalBody = document.createElement('div');
238238
const addModalBodyForm = document.createElement('form');
239+
const addModalBodyInputsWrap = document.createElement('div');
239240
const addModalBodySurnameInputWrap = document.createElement('div');
240241
const addModalBodySurnameInput = document.createElement('input');
241242
const addModalBodySurnameInputLabel = document.createElement('label');
@@ -250,13 +251,14 @@
250251
const addModalBodyPatronymicInput = document.createElement('input');
251252
const addModalBodyPatronymicInputLabel = document.createElement('label');
252253
const addModalBodyPatronymicFeedback = document.createElement('div');
254+
const addModalBodyAddContactsWrap = document.createElement('div');
255+
const addModalBodyAddSelectWrap = document.createElement('div');
256+
const addModalBodyAddBtn = document.createElement('button');
257+
const addModalBodyAddBtnStrokeIcon = document.createElement('span');
258+
const addModalBodyAddBtnFillIcon = document.createElement('span');
259+
const addModalBodyAddBtnText = document.createElement('span');
260+
const addModalBodySaveBtn = document.createElement('button');
253261
const addModalFooter = document.createElement('div');
254-
const addModalFooterAddBtnWrap = document.createElement('div');
255-
const addModalFooterAddBtn = document.createElement('button');
256-
const addModalFooterAddBtnStrokeIcon = document.createElement('span');
257-
const addModalFooterAddBtnFillIcon = document.createElement('span');
258-
const addModalFooterAddBtnText = document.createElement('span');
259-
const addModalFooterSaveBtn = document.createElement('button');
260262
const addModalFooterCancelBtn = document.createElement('button');
261263

262264
addBtnWrap.classList.add('crm__add-btn-wrap');
@@ -273,6 +275,7 @@
273275
addModalHeaderXBtn.classList.add('modal__add-header-x-btn', 'btn-close');
274276
addModalBody.classList.add('modal__add-body', 'modal-body');
275277
addModalBodyForm.classList.add('modal__add-body-form', 'needs-validation');
278+
addModalBodyInputsWrap.classList.add('modal__add-body-inputs-wrap');
276279
addModalBodySurnameInputWrap.classList.add(
277280
'modal__add-body-input-wrap',
278281
'add-surname-input-wrap',
@@ -338,25 +341,28 @@
338341
'patronymic-input-feedback',
339342
'invalid-feedback'
340343
);
341-
addModalFooter.classList.add('modal__add-footer', 'modal-footer');
342-
addModalFooterAddBtnWrap.classList.add('modal__add-footer-add-btn-wrap');
343-
addModalFooterAddBtn.classList.add(
344-
'modal__add-footer-add-btn',
345-
'modal__add-btn'
344+
addModalBodyAddContactsWrap.classList.add(
345+
'modal__add-body-add-contacts-wrap'
346+
);
347+
addModalBodyAddSelectWrap.classList.add(
348+
'modal__add-body-add-select-wrap',
349+
'd-none'
346350
);
347-
addModalFooterAddBtnStrokeIcon.classList.add(
348-
'modal__add-footer-btn-icon',
351+
addModalBodyAddBtn.classList.add('modal__add-body-add-btn', 'modal__add-btn');
352+
addModalBodyAddBtnStrokeIcon.classList.add(
353+
'modal__add-body-btn-icon',
349354
'stroke-add-modal-icon'
350355
);
351-
addModalFooterAddBtnFillIcon.classList.add(
352-
'modal__add-footer-btn-icon',
356+
addModalBodyAddBtnFillIcon.classList.add(
357+
'modal__add-body-btn-icon',
353358
'fill-add-modal-icon'
354359
);
355-
addModalFooterAddBtnText.classList.add('modal__add-footer-add-btn-text');
356-
addModalFooterSaveBtn.classList.add(
357-
'modal__add-footer-save-btn',
360+
addModalBodyAddBtnText.classList.add('modal__add-body-add-btn-text');
361+
addModalBodySaveBtn.classList.add(
362+
'modal__add-body-save-btn',
358363
'modal__add-btn'
359364
);
365+
addModalFooter.classList.add('modal__add-footer', 'modal-footer');
360366
addModalFooterCancelBtn.classList.add(
361367
'modal__add-footer-cancel-btn',
362368
'modal__add-btn'
@@ -402,10 +408,10 @@
402408
'for',
403409
'add-patronymic-floating-input'
404410
);
405-
addModalFooterAddBtn.setAttribute('id', 'add-modal-footer-add-btn');
406-
addModalFooterAddBtn.setAttribute('type', 'button');
407-
addModalFooterSaveBtn.setAttribute('id', 'add-modal-footer-save-btn');
408-
addModalFooterSaveBtn.setAttribute('type', 'button');
411+
addModalBodyAddBtn.setAttribute('id', 'add-modal-body-add-btn');
412+
addModalBodyAddBtn.setAttribute('type', 'button');
413+
addModalBodySaveBtn.setAttribute('id', 'add-modal-body-save-btn');
414+
addModalBodySaveBtn.setAttribute('type', 'button');
409415
addModalFooterCancelBtn.setAttribute('id', 'add-modal-footer-cancel-btn');
410416
addModalFooterCancelBtn.setAttribute('type', 'button');
411417
addModalFooterCancelBtn.setAttribute('data-bs-dismiss', 'modal');
@@ -423,8 +429,8 @@
423429
addModalBodyPatronymicInputLabel.textContent = 'Отчество';
424430
addModalBodyPatronymicFeedback.textContent =
425431
'Введены не корректные данные.. исключите: английские буквы, цифры!';
426-
addModalFooterAddBtnText.textContent = 'Добавить контакт';
427-
addModalFooterSaveBtn.textContent = 'Сохранить';
432+
addModalBodyAddBtnText.textContent = 'Добавить контакт';
433+
addModalBodySaveBtn.textContent = 'Сохранить';
428434
addModalFooterCancelBtn.textContent = 'Отмена';
429435

430436
addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
@@ -447,23 +453,27 @@
447453
addModalBodyPatronymicInputLabel,
448454
addModalBodyPatronymicFeedback
449455
);
450-
addModalBodyForm.append(
456+
addModalBodyInputsWrap.append(
451457
addModalBodySurnameInputWrap,
452458
addModalBodyNameInputWrap,
453459
addModalBodyPatronymicInputWrap
454460
);
455-
addModalBody.append(addModalBodyForm);
456-
addModalFooterAddBtn.append(
457-
addModalFooterAddBtnStrokeIcon,
458-
addModalFooterAddBtnFillIcon,
459-
addModalFooterAddBtnText
461+
addModalBodyAddBtn.append(
462+
addModalBodyAddBtnStrokeIcon,
463+
addModalBodyAddBtnFillIcon,
464+
addModalBodyAddBtnText
465+
);
466+
addModalBodyAddContactsWrap.append(
467+
addModalBodyAddSelectWrap,
468+
addModalBodyAddBtn
460469
);
461-
addModalFooterAddBtnWrap.append(addModalFooterAddBtn);
462-
addModalFooter.append(
463-
addModalFooterAddBtnWrap,
464-
addModalFooterSaveBtn,
465-
addModalFooterCancelBtn
470+
addModalBodyForm.append(
471+
addModalBodyInputsWrap,
472+
addModalBodyAddContactsWrap,
473+
addModalBodySaveBtn
466474
);
475+
addModalBody.append(addModalBodyForm);
476+
addModalFooter.append(addModalFooterCancelBtn);
467477
addModalContent.append(addModalHeader, addModalBody, addModalFooter);
468478
addModalDialog.append(addModalContent);
469479
addModalWrap.append(addModalDialog);

0 commit comments

Comments
 (0)