Conversation
-added popup-js logic (show, hide) -added getCoords common js function -added template for popup-product card
-saved src html files of popup and form -improved template for product card (it`s now universal) -added separate templates for popup and form (they are both using temp for product card) -improved styles for form
Did position for options-container = absolute. Fixed bug with checked size in prepareToSubmit.
| @@ -0,0 +1,10 @@ | |||
| { | |||
There was a problem hiding this comment.
Заметки по недоработкам визуальным:
-
Сейчас, если выбрать один товар, потом кликнуть на другой — на другом выпадашка не появится, пока не исчезнет предыдущая. поэтому приходится кликать дважды.
-
У тебя не убрано базовое поведение селекта (выбора города) — за счет чего на айфоне выбрать город практически нельзя.
-
Было бы хорошо для формы иметь поддержку клавиатуры (например в том же селекте выбор сделать возможным с помощью клавиатуры)
There was a problem hiding this comment.
При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет
There was a problem hiding this comment.
Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то
There was a problem hiding this comment.
По пунктам:
- Исправлено. Также упростил код, доработал структуру кода и файлов js.
- Теперь доступно и по Tab (с ios тоже доступно переключение, но каретку там не победил). Также упростил код, доработал структуру кода и файлов js.
- Смотри пункт 2.
- При ресайзе выпадашка "едет" - исправил. Для Tablet/Desktop использую только css position. При пересечении границы для Mobile один раз перерисовываются.
При resize в границе Mobile - динамически меняется положение. - При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет -исправил.
- Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то - добавил. Теперь если пользователь не верно ввел данные в поле и ушел с него, то показывается попап с ошибками.
There was a problem hiding this comment.
-
попап лучше держать с описанием ошибки до момента, пока пользователь не поставит фокус на поле или уйдет с него. Иначе получается как на скриншоте.
-
Если вызвать селект и убрать с поля фокус, лучше, чтобы выпадашка пропадала. Иначе она загораживает пространство и мешает работать с сайтом
There was a problem hiding this comment.
Пока ситуация с resize еще не решилась
There was a problem hiding this comment.
- Теперь предупреждение показывается только тогда, когда пользователь работает с полем.
- Сделал, чтобы пропадал select при клике не на него.
- А зачем при самовывозе адрес? :) - теперь при самовывозе секция адреса скрывается.
- с resize решили, что по это по макету
| justify-content: center; | ||
| align-items: center; | ||
| display: none; | ||
| .orderForm { |
There was a problem hiding this comment.
где-то стили в-таком-стиле-описаны, где-то вСовершенноДругом. Лучше держать единый стиль, так как это структурирует код прививает его единое восприятие
There was a problem hiding this comment.
У меня часть блоков "осталась" от Леонида Феськова. Посыл понял.
css/common/input/input.less
Outdated
|
|
||
| .input { | ||
| &_invalid { | ||
| border: 1px solid #c52929; |
There was a problem hiding this comment.
не достаточно ли только border-color менять?
css/common/select/select.less
Outdated
| } | ||
|
|
||
| .select-field__option { | ||
| display: none; |
There was a problem hiding this comment.
Переделал select, уже не актуально.Но сделал выбор доставки доступным через клавиатуру(заменил display:none на clip: rect (0 0 0 0) ).
| <form class="form" action="/" method="post"> | ||
| <div class="columns-wrapper"> | ||
| <div class="form__button-close"> | ||
| <button class="button-close-icon button-close"> |
There was a problem hiding this comment.
А зачем на кнопку два разных блока навешивать? это вполне можно соорудить через кнопку + блок-иконка в ней
js/orderForm/hideOrderForm.js
Outdated
| export const hideOrderForm = e => { | ||
| let target = e.target; | ||
|
|
||
| while (!target.classList.contains("orderForm")) { |
There was a problem hiding this comment.
closest можно использовать https://developer.mozilla.org/ru/docs/Web/API/Element/closest
|
|
||
| if (currentForm) { | ||
| currentForm.classList.remove("orderForm_active"); | ||
| setTimeout(() => { |
|
|
||
| //Контакная информация и расширенный адрес - обязательные поля. | ||
| //проверить, все ли требуемые элементы прошли валидацию | ||
| for (let i = 0; i < inputs.length; i++) { |
There was a problem hiding this comment.
some возвращает true/false, мне же нужно не только понять, какое поле не прошло валидацию, но и получить само поле, чтобы сделать input.validation.checkValidities(input).
В целом идея понятна, но не слишком подходит сейчас...
js/orderForm/prepareToSubmit.js
Outdated
| //СМС уведомления | ||
| let smsNotification = false; | ||
| if (document.querySelector("input[name=smsNotification]:checked")) { | ||
| smsNotification = true; |
There was a problem hiding this comment.
сейчас тебе нужно частично дособирать данные руками. можно ли это свести к минимуму?
There was a problem hiding this comment.
свёл к минимуму. Собираю необходимые поля и сразу же сохраняю теперь в объект с данными формы
js/orderForm/showOrderForm.js
Outdated
| }); | ||
|
|
||
| //Обработать селектор города | ||
| const select = document.querySelector(".select__select-field"); |
There was a problem hiding this comment.
в этом файле собралась вся логика, которую не получилось отнести к чему-то конкретному. Это и логика самой формы (скрыть форму) и выборы города и так далее.
Лучше разделить на разные файлы, а в orderForm.js вызывать нужные методы
There was a problem hiding this comment.
разбил на файлы и функции
-improved click from active popup (if click on others products, then show them). Also if click on document -> hide active popup. -improved code structure and files structure
-reimplement select elem based on input (now availiable with Tab and IOS) -improved code and file structure
-improved code structure and did all logic
| } | ||
| } | ||
|
|
||
| .select_active > .input-select { |
There was a problem hiding this comment.
В БЭМ не рекомендуется модифицировать один блок через другой
| } | ||
| } | ||
|
|
||
| function getClassName(elem) { |
There was a problem hiding this comment.
Кажется, что этой функции не место в fieldValidation
И главная проблема ее в текущем виде — тебе придется постоянно ее дорабатывать — больно :(
| break; | ||
| } | ||
| //если клик на кнопку "Закрыть", то скрыть форму | ||
| if (target.classList.contains("form__button-close")) { |
There was a problem hiding this comment.
мы обсуждали на занятии, почему на css классы не стоит завязываться, и лучше использовать js классы
2 participants
ПР на проверку