Dz 02 html #2
Dz 02 html #2
Conversation
| </div> | ||
| <div class="todos-items-list"> | ||
| <div class="todos-item"> | ||
| <div class="todos-item_done-mark-wrap"> |
There was a problem hiding this comment.
Чекбокс должен быть вынесен в отдельные базовые компоненты и иметь класс элемента блока todos-item
There was a problem hiding this comment.
А в чем минус моего подхода? Сложнее потом до него добираться?
There was a problem hiding this comment.
Нужно научиться работать с базовыми компонентами и понять принцип их реиспользования
| <button class="todos-item_delete" aria-label="Delete item"> | ||
| <div class="todos-item_delete_icon"></div> | ||
| </button> | ||
| <div class="todos-item_text-wrap" > |
There was a problem hiding this comment.
Подумал, что логично распределить пространство с помощью оберток, а в них уже добавлять элементы. на случай, если придется к тексту добавить что-то еще
There was a problem hiding this comment.
Лучше избегать обёрток, пока они не понадобились
| <button class="todos-status-bar_filters_filter __active" aria-label="Show all items" data-filter="all"> | ||
| <div class="button-text">All</div> | ||
| </button> | ||
| <button class="todos-status-bar_filters_filter __active" aria-label="Show done items" data-filter="all"> |
There was a problem hiding this comment.
- Фильтры должны быть отдельным базовым компонентом
- В нашем вексе не может быть 2 модификатора
__active
There was a problem hiding this comment.
по поводу первого пункта - если я его вынесу за пределы todos-status-bar каким образом мне тогда все эти три div'a расположить на одном уровне?
There was a problem hiding this comment.
1 пункт про нейминг и отлеьный файл стилей
There was a problem hiding this comment.
«каким образом мне тогда все эти три div'a расположить на одном уровне?»
Посмотрите примеры разбора вёрстки элементов списка. Там такой же лайаут на самом деле
| @@ -0,0 +1,49 @@ | |||
| .todos-input { | |||
There was a problem hiding this comment.
наверное это не просто инпут, а больше похоже на добавление, к тому же при таком нейминге получается боль с todos-input_input-text
| overflow: hidden; | ||
| } | ||
|
|
||
| .todos-item_done-mark-wrap { |
There was a problem hiding this comment.
с помощью нее определяю положение элементов внутри. чтобы и невидимый, и видимый чекбоксы располагать относительно нее
There was a problem hiding this comment.
Чекбокс не бывает невидимым. Калочка бывает скрыта. Надо просто показывать и скрывать её по по псевдоклассу :checked
| border-bottom: 1px solid #e6e6e6; | ||
| min-height: 60px; | ||
| display: flex; | ||
| overflow: hidden; |
| } | ||
| .todos-item_done-mark { | ||
| opacity: 0; | ||
| width: 50%; |
There was a problem hiding this comment.
Очень странно: элемент в 50% ширины обёртки
There was a problem hiding this comment.
Я подумал, что тогда изменяя размер обертки, например, при изменении размеров всех элементов, за счет того, что они автоматически подстроятся будет проще.
В чем недостаток использования процентных высоты и ширины?
There was a problem hiding this comment.
А, кажется понял. Имеется в виду, что он должен быть полностью во всю обертку?
There was a problem hiding this comment.
Картинка же не резиновая. Поэтому и не может быть в данном чекбоксе резиновых элементов
| opacity: 0; | ||
| width: 50%; | ||
| height: 50%; | ||
| margin: 25%; |
There was a problem hiding this comment.
не должно быть ни каких процентных марджинов
| float: right; | ||
| background: none; | ||
| height: 20px; | ||
| width: auto; |
There was a problem hiding this comment.
Игрался с шириной, пытался понять логику работы. почищу
| } | ||
|
|
||
| .todos-status-bar_filters { | ||
| width: 100%; |
No description provided.