Dz 02 html #2
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| .idea/ | ||
| *.iml |
Empty file.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| body, input, button, textarea { | ||
| font-family: Helvetica Neue, Arial, sans-serif; | ||
| font-size: 24px; | ||
| } | ||
|
|
||
| body { | ||
| background: #f5f5f5; | ||
| } | ||
|
|
||
| .main-wrapper { | ||
| max-width: 560px; | ||
| min-width: 280px; | ||
| margin: 0 auto; | ||
| padding: 0 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @import "reset.css"; | ||
| @import "base.css"; | ||
| @import "./project/todos-wrapper/todos-wrapper.css"; | ||
| @import "./project/todos-header/todos-header.css"; | ||
| @import "./project/todos-input/todos-input.css"; | ||
| @import "./project/todos-item.css"; | ||
| @import "./project/todos-status-bar.css"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .todos-header { | ||
| font-size: 100px; | ||
| font-weight: 100; | ||
| color : rgba(175,47,47,0.15); | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| .todos-input { | ||
|
There was a problem hiding this comment. наверное это не просто инпут, а больше похоже на добавление, к тому же при таком нейминге получается боль с |
||
| border-bottom : 1px solid #e6e6e6; | ||
| } | ||
| .todos-input:after { | ||
| content: ''; | ||
| display: block; | ||
| clear: both; | ||
| width: 100%; | ||
| } | ||
| .todos-input_select-all { | ||
| width: 60px; | ||
| height: 64px; | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| position: relative; | ||
| float: left; | ||
| outline: none; | ||
| } | ||
| .todos-input_select-all_icon { | ||
| width: 24px; | ||
| height: 12px; | ||
| background: url('../../../img/icons/select-all.png') no-repeat 0 0; | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 50%; | ||
| margin: -6px -12px; | ||
| } | ||
| .todos-input_input-text-wrap { | ||
| overflow: hidden; | ||
| } | ||
| .todos-input_input-text { | ||
| width: 100%; | ||
| border: 0; | ||
| background: none; | ||
| color: #666; | ||
| font-size: 19px; | ||
| font-weight: 200; | ||
| margin: 19px 0 0 0; | ||
| padding-right: 10px; | ||
| outline: none; | ||
| box-sizing: border-box; | ||
| } | ||
| .todos-input_input-text::placeholder { | ||
| color : #ccc; | ||
| font-style: italic; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| .todos-item { | ||
| border-bottom: 1px solid #e6e6e6; | ||
| min-height: 60px; | ||
| display: flex; | ||
| overflow: hidden; | ||
|
|
||
| } | ||
|
|
||
| .todos-item_done-mark-wrap { | ||
|
There was a problem hiding this comment. с помощью нее определяю положение элементов внутри. чтобы и невидимый, и видимый чекбоксы располагать относительно нее There was a problem hiding this comment. Чекбокс не бывает невидимым. Калочка бывает скрыта. Надо просто показывать и скрывать её по по псевдоклассу |
||
| width: 60px; | ||
| height: 60px; | ||
| background: none; | ||
| float:left; | ||
| box-sizing: border-box; | ||
| position: relative; | ||
| overflow: hidden; | ||
| align-self: center; | ||
| order: 1; | ||
| } | ||
| .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. Картинка же не резиновая. Поэтому и не может быть в данном чекбоксе резиновых элементов |
||
| height: 50%; | ||
| margin: 25%; | ||
|
There was a problem hiding this comment. не должно быть ни каких процентных марджинов |
||
| } | ||
|
|
||
| .todos-item_done-mark_visible { | ||
| position: absolute; | ||
| box-sizing: border-box; | ||
| width: 60%; | ||
| height: 60%; | ||
| margin: 20%; | ||
| top: 0; | ||
| padding: 10%; | ||
| background: none; | ||
| border: 1px solid #ccc; | ||
| border-radius: 50%; | ||
| } | ||
| .todos-item.__done .todos-item_done-mark_visible { | ||
| background: url("../../img/icons/completed.png") no-repeat center; | ||
| /*content: url("../../img/icons/completed.png");*/ | ||
| border-color: #5dc2af; | ||
|
|
||
| } | ||
|
|
||
| .todos-item_text-wrap { | ||
| overflow: hidden; | ||
| position: relative; | ||
| align-self: flex-start; | ||
| flex: 1 0; | ||
| order: 59; | ||
| } | ||
|
|
||
| .todos-item_text { | ||
| resize: none; | ||
| width: 100%; | ||
| border: 0; | ||
| background: none; | ||
| color: #666; | ||
| font-size: 20px; | ||
| font-weight: 200; | ||
| padding: 20px 10px 20px 0; | ||
| outline: none; | ||
| box-sizing: border-box; | ||
| } | ||
| .todos-item.__done .todos-item_text { | ||
| text-decoration:line-through; | ||
| color: #ccc; | ||
| } | ||
| .todos-item_delete { | ||
| width: 60px; | ||
| height: 60px; | ||
| background: none; | ||
| border: none; | ||
| padding: 0; | ||
| margin: 0; | ||
| position: relative; | ||
| float: right; | ||
| align-self: flex-end; | ||
| order: 60; | ||
| outline: none; | ||
| } | ||
| .todos-item:hover{ | ||
| background: #fafafa; | ||
| } | ||
| .todos-item:hover .todos-item_delete_icon { | ||
| opacity: 100; | ||
| width: 16px; | ||
| height: 16px; | ||
| background: url('../../img/icons/close.png') no-repeat 0 0; | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 50%; | ||
| margin: -8px -8px; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| .todos-status-bar { | ||
| position: relative; | ||
| bottom: 0; | ||
| min-height: 40px; | ||
| } | ||
|
|
||
| .todos-status-bar_counter { | ||
|
|
||
| float: left; | ||
| font-size: 12px; | ||
| height: 20px; | ||
| color: #888; | ||
| margin: 10px; | ||
| box-sizing: border-box; | ||
| line-height: 20px; | ||
| } | ||
|
|
||
| .todos-status-bar_delete-completed { | ||
| float: right; | ||
| background: none; | ||
| height: 20px; | ||
| width: auto; | ||
|
There was a problem hiding this comment. Игрался с шириной, пытался понять логику работы. почищу |
||
| border: none; | ||
| padding: 0; | ||
| margin: 10px; | ||
| outline: none; | ||
| font-size: 12px; | ||
| color: #888; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .todos-status-bar_filters { | ||
| width: 100%; | ||
|
|
||
| text-align: center; | ||
| } | ||
|
|
||
| .todos-status-bar_filters_filter { | ||
| color: #888; | ||
| font-size: 12px; | ||
| background: none; | ||
| height: 20px; | ||
| border: none; | ||
| padding: 0; | ||
| margin: 10px; | ||
| outline: none; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .button-text { | ||
| margin: 0 7px; | ||
| } | ||
|
|
||
| .todos-status-bar_filters_filter.__active { | ||
| border: 1px solid #ebdfdf; | ||
| border-radius: 3px; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .todos-wrapper { | ||
| background: #fff; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, .2); | ||
| position: relative; | ||
| } | ||
|
|
||
| .todos-wrapper:after, .todos-wrapper:before { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 100%; | ||
| background: #fff; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, .2); | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .todos-wrapper:before { | ||
| height: 10px; | ||
| left: 4px; | ||
| right: 4px; | ||
| } | ||
|
|
||
| .todos-wrapper:after { | ||
| height: 5px; | ||
| left: 2px; | ||
| right: 2px; | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Чекбокс должен быть вынесен в отдельные базовые компоненты и иметь класс элемента блока
todos-itemThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
А в чем минус моего подхода? Сложнее потом до него добираться?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Нужно научиться работать с базовыми компонентами и понять принцип их реиспользования