diff --git a/src/components/Article/Comment.module.scss b/src/components/Article/Comment.module.scss index e5c93741..7a48dec2 100644 --- a/src/components/Article/Comment.module.scss +++ b/src/components/Article/Comment.module.scss @@ -37,6 +37,7 @@ display: none; } } + .shout-body { @include font-size(1.5rem); margin-bottom: 1em; @@ -44,11 +45,13 @@ margin-bottom: 0; } } + .author { align-items: center; margin-bottom: 1.4rem; } } + .commentContent { &:hover { .commentControlReply, @@ -60,11 +63,13 @@ } } } + .commentControls { @include font-size(1.2rem); margin-bottom: 0.5em; } + .commentControlReply, .commentControlShare, .commentControlDelete, @@ -75,6 +80,7 @@ transition: opacity 0.3s; } } + .commentControlReply, .commentControlShare, .commentControlDelete, @@ -84,6 +90,7 @@ width: 1.2rem; } } + .commentControl { border: none; color: #696969; @@ -94,6 +101,7 @@ padding: 0.2em 0.3em; transition: opacity 0.2s, color 0.3s, background-color 0.3s; vertical-align: top; + &:hover { background: #000; color: #fff; @@ -102,6 +110,7 @@ opacity: 1; } } + .icon { filter: invert(0); margin-right: 0.3em; @@ -112,12 +121,14 @@ } } } + .commentControlReply { .icon { height: 1.2em; width: 1.2em; } } + .commentBody { @include font-size(1.5rem); @@ -137,16 +148,19 @@ } } } + .commentAuthor, .commentDate, .commentRating { @include font-size(1.2rem); } + .articleAuthor { color: #2638d9; font-size: 12px; margin-right: 12px; } + .commentDate { color: rgb(0 0 0 / 30%); flex: 1; @@ -154,33 +168,41 @@ margin-left: 1rem; } } + .commentDetails { display: flex; margin-bottom: 1.2rem; } + .commentRating { align-items: center; display: flex; font-weight: bold; } + .commentRatingValue { padding: 0 0.3em; } + .commentRatingPositive { color: #2bb452; } + .commentRatingNegative { color: #d00820; } + .commentRatingControl { border-left: 6px solid transparent; border-right: 6px solid transparent; height: 0; width: 0; } + .commentRatingControlUp { border-bottom: 8px solid rgb(0 0 0 / 40%); } + .commentRatingControlDown { border-top: 8px solid rgb(0 0 0 / 40%); } diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx index 8de609db..ccc8de07 100644 --- a/src/components/Feed/Card.tsx +++ b/src/components/Feed/Card.tsx @@ -1,5 +1,5 @@ import { t } from '../../utils/intl' -import { createMemo, createSignal, For, onMount, Show } from 'solid-js' +import { createMemo, For, Show } from 'solid-js' import type { Shout } from '../../graphql/types.gen' import { capitalize } from '../../utils' import { translit } from '../../utils/ru2en' @@ -72,7 +72,7 @@ export const ArticleCard = (props: ArticleCardProps) => { const { title, subtitle } = getTitleAndSubtitle(props.article) - const { cover, layout, slug, authors, stat } = props.article + const { cover, layout, slug, authors, stat, body } = props.article return (
{
@@ -210,9 +210,9 @@ export const ArticleCard = (props: ArticleCardProps) => {
diff --git a/src/components/Feed/FeedArticlePopup.tsx b/src/components/Feed/FeedArticlePopup.tsx index 133ab3fe..c3525a43 100644 --- a/src/components/Feed/FeedArticlePopup.tsx +++ b/src/components/Feed/FeedArticlePopup.tsx @@ -1,6 +1,7 @@ import styles from './FeedArticlePopup.module.scss' import type { PopupProps } from '../_shared/Popup' import { Popup } from '../_shared/Popup' +import { t } from '../../utils/intl' type FeedArticlePopupProps = { title: string @@ -20,38 +21,73 @@ export const FeedArticlePopup = (props: FeedArticlePopupProps) => {
  • -
  • -
  • -
  • -
  • -
  • -
  • -
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index 68515649..f1e08220 100644 --- a/src/components/_shared/Button/Button.module.scss +++ b/src/components/_shared/Button/Button.module.scss @@ -8,9 +8,11 @@ &.primary { background: #000; color: #fff; + &:hover { color: #ccc; } + &:active { color: #9fa1a7; } @@ -19,9 +21,11 @@ &.secondary { background: #f7f7f7; color: #141414; + &:hover { background: #e8e8e8; } + &:active { background: #ccc; } @@ -33,6 +37,7 @@ color: #9fa1a7; background: #f6f6f6; } + &.loading, &.loading:hover { background: #f6f6f6; diff --git a/src/locales/ru.json b/src/locales/ru.json index 6164cfaf..cd78234d 100644 --- a/src/locales/ru.json +++ b/src/locales/ru.json @@ -222,5 +222,9 @@ "Write a comment...": "Написать комментарий...", "Add comment": "Комментировать", "My subscriptions": "Подписки", - "Nothing here yet": "Здесь пока ничего нет" + "Nothing here yet": "Здесь пока ничего нет", + "Invite experts": "Пригласить экспертов", + "Subscribe to comments": "Подписаться на комментарии", + "Add to bookmarks": "Добавить в закладки", + "Get notifications": "Получать уведомления" }