Skip to content

Commit e744aa5

Browse files
matowdevmatowdev
committed
[PRAC/cont] Add "floating" inputs/labels
Corrections in "add-modal" window, switching to "floating" input/label. Worth noting: - difficulty in positioning the "floating" label, the overall settings of the "floating" input height. core: B-3 / JS-BL
1 parent ef6d832 commit e744aa5

File tree

2 files changed

+80
-53
lines changed

2 files changed

+80
-53
lines changed

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

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525

2626
.modal__add-header {
27-
margin-bottom: 23px;
27+
margin-bottom: 17px;
2828
}
2929

3030
.modal__add-header-title {
@@ -52,50 +52,22 @@
5252
.modal__add-body-form {
5353
display: flex;
5454
flex-direction: column;
55-
row-gap: 28px;
55+
row-gap: 20px;
5656
}
5757

58-
.modal__add-body-form .modal__add-body-input[type="text"] {
58+
.modal__add-body-form .modal__add-body-input {
5959
font-family: var(--open-sans), sans-serif;
6060
font-weight: var(--semi-bold);
6161
font-size: var(--default-fs);
6262
}
6363

64-
.modal__add-body-form .modal__add-body-input::placeholder {
65-
color: var(--text-gray);
66-
}
67-
68-
.modal__add-body-input-wrap {
69-
position: relative;
70-
}
71-
72-
.modal__add-body-input-wrap .modal__add-body-span {
73-
position: absolute;
74-
top: 50%;
75-
font-size: 16px;
76-
color: #a86cf3;
77-
transform: translateY(-50%);
78-
pointer-events: none;
79-
visibility: hidden;
80-
}
81-
82-
.modal__add-body-input-wrap input:placeholder-shown+.modal__add-body-span {
83-
visibility: visible;
84-
}
85-
86-
.modal__add-body-input-wrap .add-surname-input-span {
87-
left: 67px;
88-
}
89-
90-
.modal__add-body-input-wrap .add-name-input-span {
91-
left: 31px;
92-
}
93-
94-
.modal__add-body-input {
64+
.modal__add-body-input-wrap .modal__add-body-input {
9565
border: none;
9666
border-bottom: 1px solid var(--gray);
9767
border-radius: 0;
98-
padding: 4px 2px 4px 1px;
68+
padding: 5px 3px;
69+
height: 45px;
70+
min-height: 45px;
9971
caret-color: var(--main-purple);
10072
}
10173

@@ -113,6 +85,25 @@
11385
outline: none;
11486
}
11587

88+
.modal__add-body-input-wrap .modal__add-body-input-label {
89+
top: -8px;
90+
left: -2px;
91+
padding-left: 1px;
92+
color: var(--text-gray);
93+
}
94+
95+
.modal__add-body-label-span {
96+
font-size: 16px;
97+
color: var(--main-purple);
98+
}
99+
100+
.form-floating>.form-control-plaintext~label,
101+
.form-floating>.form-control:focus~label,
102+
.form-floating>.form-control:not(:placeholder-shown)~label,
103+
.form-floating>.form-select~label {
104+
color: var(--text-gray);
105+
}
106+
116107
.modal__add-footer {
117108
display: flex;
118109
flex-direction: column;

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

Lines changed: 54 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -238,14 +238,17 @@
238238
const addModalBodyForm = document.createElement('form');
239239
const addModalBodySurnameInputWrap = document.createElement('div');
240240
const addModalBodySurnameInput = document.createElement('input');
241-
const addModalBodySurnameSpan = document.createElement('span');
241+
const addModalBodySurnameInputLabel = document.createElement('label');
242+
const addModalBodySurnameLabelSpan = document.createElement('span');
242243
const addModalBodySurnameFeedback = document.createElement('div');
243244
const addModalBodyNameInputWrap = document.createElement('div');
244245
const addModalBodyNameInput = document.createElement('input');
245-
const addModalBodyNameSpan = document.createElement('span');
246+
const addModalBodyNameInputLabel = document.createElement('label');
247+
const addModalBodyNameInputLabelSpan = document.createElement('span');
246248
const addModalBodyNameFeedback = document.createElement('div');
247249
const addModalBodyPatronymicInputWrap = document.createElement('div');
248250
const addModalBodyPatronymicInput = document.createElement('input');
251+
const addModalBodyPatronymicInputLabel = document.createElement('label');
249252
const addModalBodyPatronymicFeedback = document.createElement('div');
250253
const addModalFooter = document.createElement('div');
251254
const addModalFooterAddBtnWrap = document.createElement('div');
@@ -272,16 +275,21 @@
272275
addModalBodyForm.classList.add('modal__add-body-form', 'needs-validation');
273276
addModalBodySurnameInputWrap.classList.add(
274277
'modal__add-body-input-wrap',
275-
'add-surname-input-wrap'
278+
'add-surname-input-wrap',
279+
'form-floating'
276280
);
277281
addModalBodySurnameInput.classList.add(
278282
'modal__add-body-input',
279283
'add-surname-input',
280284
'form-control'
281285
);
282-
addModalBodySurnameSpan.classList.add(
283-
'modal__add-body-span',
284-
'add-surname-input-span'
286+
addModalBodySurnameInputLabel.classList.add(
287+
'modal__add-body-input-label',
288+
'add-surname-input-labe'
289+
);
290+
addModalBodySurnameLabelSpan.classList.add(
291+
'modal__add-body-label-span',
292+
'add-surname-input-label-span'
285293
);
286294
addModalBodySurnameFeedback.classList.add(
287295
'modal__add-body-input-feedback',
@@ -290,16 +298,21 @@
290298
);
291299
addModalBodyNameInputWrap.classList.add(
292300
'modal__add-body-input-wrap',
293-
'add-name-input-wrap'
301+
'add-name-input-wrap',
302+
'form-floating'
294303
);
295304
addModalBodyNameInput.classList.add(
296305
'modal__add-body-input',
297306
'add-name-input',
298307
'form-control'
299308
);
300-
addModalBodyNameSpan.classList.add(
301-
'modal__add-body-span',
302-
'add-name-input-span'
309+
addModalBodyNameInputLabel.classList.add(
310+
'modal__add-body-input-label',
311+
'add-name-input-labe'
312+
);
313+
addModalBodyNameInputLabelSpan.classList.add(
314+
'modal__add-body-label-span',
315+
'add-name-input-label-span'
303316
);
304317
addModalBodyNameFeedback.classList.add(
305318
'modal__add-body-input-feedback',
@@ -308,13 +321,18 @@
308321
);
309322
addModalBodyPatronymicInputWrap.classList.add(
310323
'modal__add-body-input-wrap',
311-
'add-patronymic-input-wrap'
324+
'add-patronymic-input-wrap',
325+
'form-floating'
312326
);
313327
addModalBodyPatronymicInput.classList.add(
314328
'modal__add-body-input',
315329
'add-patronymic-input',
316330
'form-control'
317331
);
332+
addModalBodyPatronymicInputLabel.classList.add(
333+
'modal__add-body-input-label',
334+
'add-patronymic-input-labe'
335+
);
318336
addModalBodyPatronymicFeedback.classList.add(
319337
'modal__add-body-input-feedback',
320338
'patronymic-input-feedback',
@@ -357,21 +375,33 @@
357375
addModalBodyForm.setAttribute('id', 'add-modal-form');
358376
addModalBodyForm.setAttribute('action', '#');
359377
addModalBodyForm.setAttribute('novalidate', '');
360-
addModalBodySurnameInput.setAttribute('id', 'add-surname-input');
378+
addModalBodySurnameInput.setAttribute('id', 'add-surname-floating-input');
361379
addModalBodySurnameInput.setAttribute('type', 'text');
362380
addModalBodySurnameInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
363381
addModalBodySurnameInput.setAttribute('placeholder', 'Фамилия');
364382
addModalBodySurnameInput.setAttribute('required', '');
365-
addModalBodyNameInput.setAttribute('id', 'add-name-input');
383+
addModalBodySurnameInputLabel.setAttribute(
384+
'for',
385+
'add-surname-floating-input'
386+
);
387+
addModalBodyNameInput.setAttribute('id', 'add-name-floating-input');
366388
addModalBodyNameInput.setAttribute('type', 'text');
367389
addModalBodyNameInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
368390
addModalBodyNameInput.setAttribute('placeholder', 'Имя');
369391
addModalBodyNameInput.setAttribute('required', '');
370-
addModalBodyPatronymicInput.setAttribute('id', 'add-patronymic-input');
392+
addModalBodyNameInputLabel.setAttribute('for', 'add-name-floating-input');
393+
addModalBodyPatronymicInput.setAttribute(
394+
'id',
395+
'add-patronymic-floating-input'
396+
);
371397
addModalBodyPatronymicInput.setAttribute('type', 'text');
372398
addModalBodyPatronymicInput.setAttribute('pattern', '[А-Яа-яЁё\\-]+');
373399
addModalBodyPatronymicInput.setAttribute('placeholder', 'Отчество');
374400
addModalBodyPatronymicInput.setAttribute('required', '');
401+
addModalBodyPatronymicInputLabel.setAttribute(
402+
'for',
403+
'add-patronymic-floating-input'
404+
);
375405
addModalFooterAddBtn.setAttribute('id', 'add-modal-footer-add-btn');
376406
addModalFooterAddBtn.setAttribute('type', 'button');
377407
addModalFooterSaveBtn.setAttribute('id', 'add-modal-footer-save-btn');
@@ -382,33 +412,39 @@
382412

383413
addBtnText.textContent = 'Добавить клиента';
384414
addModalHeaderTitle.textContent = 'Новый клиент';
415+
addModalBodySurnameInputLabel.textContent = 'Фамилия';
416+
addModalBodySurnameLabelSpan.textContent = '*';
385417
addModalBodySurnameFeedback.textContent =
386418
'Введены не корректные данные.. исключите: английские буквы, цифры!';
419+
addModalBodyNameInputLabel.textContent = 'Имя';
420+
addModalBodyNameInputLabelSpan.textContent = '*';
387421
addModalBodyNameFeedback.textContent =
388422
'Введены не корректные данные.. исключите: английские буквы, цифры!';
423+
addModalBodyPatronymicInputLabel.textContent = 'Отчество';
389424
addModalBodyPatronymicFeedback.textContent =
390425
'Введены не корректные данные.. исключите: английские буквы, цифры!';
391-
addModalBodySurnameSpan.textContent = '*';
392-
addModalBodyNameSpan.textContent = '*';
393426
addModalFooterAddBtnText.textContent = 'Добавить контакт';
394427
addModalFooterSaveBtn.textContent = 'Сохранить';
395428
addModalFooterCancelBtn.textContent = 'Отмена';
396429

397430
addBtn.append(addBtnDefaultIcon, addBtnWhiteIcon, addBtnGrayIcon, addBtnText);
398431
addBtnWrap.append(addBtn);
399432
addModalHeader.append(addModalHeaderTitle, addModalHeaderXBtn);
433+
addModalBodySurnameInputLabel.append(addModalBodySurnameLabelSpan);
400434
addModalBodySurnameInputWrap.append(
401435
addModalBodySurnameInput,
402-
addModalBodySurnameSpan,
436+
addModalBodySurnameInputLabel,
403437
addModalBodySurnameFeedback
404438
);
439+
addModalBodyNameInputLabel.append(addModalBodyNameInputLabelSpan);
405440
addModalBodyNameInputWrap.append(
406441
addModalBodyNameInput,
407-
addModalBodyNameSpan,
442+
addModalBodyNameInputLabel,
408443
addModalBodyNameFeedback
409444
);
410445
addModalBodyPatronymicInputWrap.append(
411446
addModalBodyPatronymicInput,
447+
addModalBodyPatronymicInputLabel,
412448
addModalBodyPatronymicFeedback
413449
);
414450
addModalBodyForm.append(

0 commit comments

Comments
 (0)