DEAD-3: implement card component #3
Conversation
AlexNov03
changed the title
public/variables.css
Outdated
| :root { | ||
| --background-color: #edeef0; | ||
| --accent-color: #9950f6; | ||
| --main-color: #ffffff; | ||
| --hover-color: #551aa0; | ||
| --active-color: #b47cfb; | ||
| --disabled-color: #dbbfff; | ||
| --text-color: #000000; | ||
| --text-font: 'Poppins', sans-serif; | ||
| } |
There was a problem hiding this comment.
Нужно обновить, на фигме изменения
public/variables.css
Outdated
| :root { | ||
| --background-color: #edeef0; | ||
| --accent-color: #9950f6; | ||
| --main-color: #ffffff; | ||
| --hover-color: #551aa0; | ||
| --active-color: #b47cfb; | ||
| --disabled-color: #dbbfff; | ||
| --text-color: #000000; | ||
| --text-font: 'Play', sans-serif; | ||
| --card-min-height: 120px; | ||
| --card-max-height: 150px; | ||
| --card-gap: 10px; | ||
| --card-padding: 10px; | ||
| --card-border-radius: 10px; | ||
| --card-img-min-width: 150px; | ||
| --card-img-max-width: 150px; | ||
| --card-img-height: 150px; | ||
| --card-img-border-radius: 10px; | ||
| --card-content-padding-bottom: 10px; | ||
| --card-content-p-line-height: 1.4; | ||
| --card-content-p-margin-top: 0; | ||
| --card-content-header-font-weight: 600; | ||
| --card-content-header-font-size: 20px; | ||
| --card-content-header-margin-bottom: 20px; | ||
| --card-content-text-font-weight: 300; | ||
| --card-content-text-font-size: 16px; | ||
| --main-content-feed-margin: 20px; | ||
| --main-content-feed-gap: 10px; | ||
| --main-content-feed-margin-left: 30vw; | ||
| --main-content-feed-margin-right: 30vw; | ||
| --main-content-feed-max-width: 500px; |
There was a problem hiding this comment.
Мне кажется это уже перебор... Прям все в переменные не надо выносить, а то непонятно, как теперь это переиспользовать, а самое главное менять
Переменные круто можно так использовать, например:
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
| --card-min-height: 120px; | ||
| --card-max-height: 150px; | ||
| --card-img-min-width: 150px; | ||
| --card-img-max-width: 150px; | ||
| --card-img-height: 150px; |
There was a problem hiding this comment.
нужно ли это выносить отдельно?
у @VladislavKirpichov нужно это уточнить
|
|
||
| render() { | ||
| const template = Handlebars.templates['cards.hbs']; | ||
| this.parent.innerHTML = template({ items: this.items }); |
There was a problem hiding this comment.
innerHTML лучше заменить на один из аналогов, так как он уязвим к XSS атакам
There was a problem hiding this comment.
тут его нечем заменить, это же темплейт хендлбарса. XSS опасен когда есть какие-то пользовательские данные, в данном случае контент карточки. Если его отсанитайзить то проблемы с xss быть не должно
|
|
||
| render() { | ||
| const template = Handlebars.templates['cards.hbs']; | ||
| this.parent.innerHTML = template({ items: this.items }); |
There was a problem hiding this comment.
тут его нечем заменить, это же темплейт хендлбарса. XSS опасен когда есть какие-то пользовательские данные, в данном случае контент карточки. Если его отсанитайзить то проблемы с xss быть не должно
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
There was a problem hiding this comment.
шрифты лучше положить как статику и не использовать ссылки на гугл фонтс
| font-size: var(--text-size); | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| width: 95%; |
There was a problem hiding this comment.
width 95% довольно странное значение, текст должен по всей ширине блока разъезжаться до паддингов. Просто задай паддинги корректные чтобы текст норм смотрелся
No description provided.