Conversation
- change `button` to `checkbox` - add hover effect - correct some styles at the whole document
Fix a bug when the slider switched when clicking on the text "Только подтвержденные нарушения"
| <div class="form__info"> | ||
| <h3 class="form__info-title"> | ||
| Источники | ||
| <span class="form__info-title--newline">и события</span> |
There was a problem hiding this comment.
Тут не нужно было текст оборачивать в дополнительную обертку, текст должен переноситься скорее из-за ограниченной ширины в блоке, а не специально
| <body> | ||
| <form class="form" name="sending" method="#" action="#"> | ||
| <h1 class="form__title">График отправки</h1> | ||
| <fieldset class="form__section section1"> |
There was a problem hiding this comment.
Не должно быть цифр в именовании классов
| </button> | ||
| <p class="form__info-txt"> | ||
| Выбрано | ||
| <span class="form__info-txt--highlight" |
There was a problem hiding this comment.
Ошибка в использовании БЭМ. Класс-модификатор может присутствовать только на самом элементе, а не на его потомке, т.е. возможно только такое использование p class="form__info-txt form__info-txt--highlight"
span стоило назвать как отдельный элемент блока form
| <input class="form__toggle-checkbox" type="checkbox" /> | ||
| <span class="form__toggle-slider" class="slider"></span> | ||
| </label> | ||
| <h3 class="form__toggle-text">Только подтверждённые нарушения</h3> |
There was a problem hiding this comment.
Это не заголовок. По хорошему этот текст необходимо было положить внутрь верхнего label, чтобы при клике по тексту переключался чекбокс
| <div class="form__info"> | ||
| <h3 class="form__info-title"> | ||
| Источники | ||
| <span class="form__info-title--newline">и события</span> |
There was a problem hiding this comment.
Аналогичная ошибка в БЭМ при использовании модификатора
| position: absolute; | ||
| opacity: 0; | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
В таких случаях нужно просто вешать display: none на чекбокс, а не пытаться его спрятать за стилями родителя
| color: #2f80ed; | ||
| padding: 5px 10px; | ||
| border-radius: 4px; | ||
| margin-left: 16px; |
There was a problem hiding this comment.
Не совсем понятно, зачем тут и у .form__info-txt margin, корректнее поставить gap у родителя (.form__info) значением больше https://i.imgur.com/HMy6geA.png
|
|
||
| .form__toggle-slider::before { | ||
| content: ""; | ||
| position: absolute; |
There was a problem hiding this comment.
Не нужно злоупотреблять абсолютным позиционированием, когда есть возможность сделать без него, поскольку это вырывает элемент из общего потока документа + в некоторых случаях могут быть проблемы с отображением верстки на разных разрешениях
| } | ||
|
|
||
| .form__add-schedule-btn:hover .form__add-schedule-btn-pic { | ||
| fill: #fff; |
There was a problem hiding this comment.
Если на 316 строчке указать fill: currentColor, то цвет картинки будет автоматически подстраиваться под цвет текста, и не придется дополнительно его менять по hover
| <title>График отправки</title> | ||
| <link rel="stylesheet" href="styles.css" /> | ||
| </head> | ||
| <body> |
There was a problem hiding this comment.
Отсутствует адаптив + иконки, которые ты добавляешь в разметку не нужно выгружать дополнительно и в папку images, они и без этого будут отображаться :)
L1s-is
left a comment
L1s-is
left a comment
There was a problem hiding this comment.
Все хорошо, но не забывай про адаптив, на интерактивные элементы стоит добавлять cursor: pointer, внимательнее с БЭМ
2 participants
This code is a web page with a form for creating a sending schedule. The HTML markup defines form elements such as checkboxes, buttons, and time entry fields. They are organized into sections (section1 and section2) with appropriate headers and containers for information and schedules. There are also buttons for deleting a graph and adding a new one.
CSS styles define the appearance of the form and its elements. The form is designed as a grid with specific areas for the header, sections, trash to delete and buttons to add a new graph. There are styles for various form elements such as checkboxes, buttons, input fields, etc. In addition, animations and effects are implemented when the mouse cursor hovers over various elements of the form, which makes the user interface more interactive.