HAR-63: Верстаю страницу профиля #12
Conversation
| @@ -6,7 +6,7 @@ | |||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> | |||
| </head> | |||
| <body> | |||
| <div id="navbar"></div> | |||
| <div id="root"></div> | |||
| <header id="navbar"></header> | |||
There was a problem hiding this comment.
для навбара лучше назвать блок тэгом nav
source/app/App.js
Outdated
| import {Profile} from '../pages/profile/ui/profile.js'; | ||
|
|
||
|
|
||
| // class Mediator { |
There was a problem hiding this comment.
если захочешь такую штуку написать, выноси ее в отдельный файл - а еще лучше в отдельный каталог в app
glebkos
changed the title
glebkos
changed the title
Кроме верстки добавил JSDoc документацию
source/app/App.css
Outdated
| .button{ | ||
| width: fit-content; | ||
| height: fit-content; | ||
| padding: 10px 20px; | ||
| border-radius: var(--element-border-radius); | ||
| } | ||
|
|
||
| .button:hover{ | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .button_focus-font-size{ | ||
| font-size: var(--focus-font-size); | ||
| } | ||
|
|
||
| .button-active{ | ||
| background-color: var(--primary-button-color); | ||
| } | ||
|
|
||
| .button-passive{ | ||
| background-color: var(--secondary-button-color); | ||
| } |
There was a problem hiding this comment.
в app этот код лежать не должен - перенеси его в shared, например, в каталог styles (либо придумай другое название, которое бы давало понимание, что здесь лежат стили переиспользуемых компонентов)
source/app/App.css
Outdated
| .input-fields{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 400px; | ||
| gap: 20px; | ||
| } | ||
|
|
||
| .input-block{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 5px; | ||
| width: auto; | ||
| } |
There was a problem hiding this comment.
аналогично предыдущему, но в другой файл - input.css
source/app/App.css
Outdated
| .window{ | ||
| width: 300px; | ||
| margin: 30px auto; | ||
| background-color: var(--window-color); | ||
| background-color: var(--background-color); | ||
| box-shadow: 0 0 15px var(--window-color); | ||
| border-radius: var(--element-border-radius); | ||
| padding: 10px 20px; | ||
| display: flex; |
There was a problem hiding this comment.
а это, вероятно, в каталог pages (либо в widgets, не пойму, к чему он относится)
There was a problem hiding this comment.
к тому компоненту, который этот стиль использует. если таких много - то тоже в shared
| @@ -11,6 +11,8 @@ | |||
| visibility: hidden; | |||
| } | |||
|
|
|||
|
|
|||
| /*Поменять этот блок на input-block*/ | |||
There was a problem hiding this comment.
для таких комментариев используй слово TODO - по нему легко искать в коде то, что запланировано исправить, и IDE его часто выделяет для наглядности. так сказать, совет
Jira