Conversation
DmitryMakhnev
left a comment
DmitryMakhnev
left a comment
There was a problem hiding this comment.
Изучить разбор дз.
Перевести на scss
|
|
||
| <div class="todo-list"> | ||
| <div class="todo-item"> | ||
| <textarea class="todo-item_text" aria-label="Ввести текст">HTML</textarea> |
There was a problem hiding this comment.
будут проблемы с фаллбеком на флоатах
| <div class="todo-actions-bar"> | ||
| <div class="todo-actions-bar_counter" aria-label="Счетчик невыполненых">3 items left</div> | ||
|
|
||
| <a class="todo-filter __active" href="#" data-filter="all" aria-label="Выбрать все">All</a> |
| } | ||
|
|
||
| .__sublayer1 { | ||
| width: 556px; |
There was a problem hiding this comment.
Ширина не должна быть захардкожена см разбор дз
|
|
||
| .todos-title { | ||
| font-family: "Arial" serif; | ||
| font-size: 60pt; |
| } | ||
|
|
||
| .todos-title { | ||
| font-family: "Arial" serif; |
There was a problem hiding this comment.
Почему первым не стоит шрифт из макета?
| align-self: center; flex: 1 3; order: 2; | ||
| } | ||
|
|
||
| .todo-item_checkbox { |
There was a problem hiding this comment.
В следствии расположения элементов в html фикс на флоатах работать не будет
| align-self: center; order: 1; | ||
| } | ||
|
|
||
| .todo-item_checkbox_target { |
There was a problem hiding this comment.
чекбокс надо сделать как независимый компонент, смотри разбор дз
| border: 1px solid #E6E6E6; | ||
| } | ||
|
|
||
| .__checked { |
There was a problem hiding this comment.
Нельзя использовать модификаторы без компонента, т.к. в таком случае эти стили применятся к любому элементу с модификатором __checked, коих может быть гораздо больше одного
| } | ||
|
|
||
| .todo-item_checkbox_target:checked > .todo-item_checkbox_visual { | ||
|
|
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git@github.com:ok-technopolis/preprocessor-stub.git" |
| <div class="todo-body"> | ||
|
|
||
| <div class="todo-add"> | ||
| <div class="action todo-add_select-all-action"> |
| </div> | ||
| </div> | ||
|
|
||
| <div class="todo-item"> |
There was a problem hiding this comment.
Не вижу кейса с модификатором отмеченности айтема
There was a problem hiding this comment.
Исправил, добавил модификатор __checked.
| position: absolute; | ||
| @include absolute-full(); | ||
| } | ||
| button.action_target, input.action_target { |
There was a problem hiding this comment.
не надо указывать теги, это не имеет смысла в данном кейсе + усложняет выборку
| margin: $offset_2x; | ||
| padding: $offset; | ||
| // test | ||
| background: url('../../../images/icons/favorites-off.png'); |
| transition: opacity .2s; | ||
| } | ||
| .todo-add_select-all-action { | ||
| visibility: visible; |
There was a problem hiding this comment.
Тестировал, забыл убрать. Убрал.
| </div> | ||
|
|
||
| </div> | ||
| <div class="todo-body __sublayer1"></div> |
There was a problem hiding this comment.
Декоративный элемент после боди !== body
There was a problem hiding this comment.
Исправил, реализовал на псевдоэлементах :after и :before.
| z-index: 3; | ||
| } | ||
|
|
||
| .__sublayer1 { |
There was a problem hiding this comment.
- Нельзя обращаться по модификатору без класса блока или элемента, т.к. представьте сколько блоков могут иметь модификаторы
__active,__readyи т.д. - декрация
.todo-body!==.todo-body, посмотрите как это сделано в разборе д.з.
There was a problem hiding this comment.
Исправил, реализовал декорацию todo-body на псевдоэлементах как в разборе.
There was a problem hiding this comment.
Посему тогда остались стили для todo-sublayer ?
| margin: $offset_2x 0; | ||
| } | ||
|
|
||
| .todos-actions-bar .todos-filters { |
There was a problem hiding this comment.
нельзя в компоненте описывать его контекст использования, т.к. компонент не должен знать в каких контекстах он используется
DmitryMakhnev
left a comment
DmitryMakhnev
left a comment
There was a problem hiding this comment.
В целом ок, но замечания надо поправить
|
|
||
| <div class="todo-list"> | ||
| <div class="todo-item"> | ||
| <div class="input-checkbox"> |
There was a problem hiding this comment.
Нужно сделать чекбокс конкретным элементом todo-item, т.к. в противном случае, при добавлении второго чекбокса, будут проблемы
| </div> | ||
|
|
||
| <div class="todo-item"> | ||
| <div class="input-checkbox __checked"> |
There was a problem hiding this comment.
Чекбоксу модификатор не нужен, модификатор готовности должен быть у todo-item, т.к. от этого может зависеть очень многое внутри компонента
| transition: opacity .2s; | ||
| } | ||
| .todo-add_select-all-action { | ||
| } |
There was a problem hiding this comment.
видимо куда-то потерялось скрытие
| z-index: 3; | ||
| } | ||
|
|
||
| .__sublayer1 { |
There was a problem hiding this comment.
Посему тогда остались стили для todo-sublayer ?
2 participants
CSS homework
CSS привел в соответствие с образцом. Подключил sass.
Добавил ветку для GitHub pages: https://ok-technopolis.github.io/Kubrin-Georgiy/