diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 0b6965b4..97824a78 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -447,5 +447,6 @@ "user already exist": "user already exists", "video": "video", "view": "view", + "viewsWithCount": "{count} {count, plural, one {view} other {views}}", "yesterday": "yesterday" } diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index eaaeb3c2..87576d99 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -471,5 +471,6 @@ "user already exist": "пользователь уже существует", "video": "видео", "view": "просмотр", + "viewsWithCount": "{count} {count, plural, one {просмотр} few {просмотрa} other {просмотров}}", "yesterday": "вчера" } diff --git a/src/components/Article/Article.module.scss b/src/components/Article/Article.module.scss index 0d2a8b66..27c7039a 100644 --- a/src/components/Article/Article.module.scss +++ b/src/components/Article/Article.module.scss @@ -390,12 +390,38 @@ img { } @include media-breakpoint-down(sm) { - flex: 1 100%; + flex: 1 40%; } } .shoutStatsItemViews { cursor: default; + + @include media-breakpoint-down(sm) { + color: rgb(0 0 0 / 0.4); + flex: 1 40%; + justify-content: end; + margin-right: 0; + order: 10; + + .icon { + display: none !important; + } + } +} + +.shoutStatsItemLabel { + margin-left: 0.3em; + + @include media-breakpoint-up(sm) { + display: none; + } +} + +.shoutStatsItemCount { + @include media-breakpoint-down(sm) { + display: none; + } } .shoutStatsItemAdditionalDataItem { diff --git a/src/components/Article/FullArticle.tsx b/src/components/Article/FullArticle.tsx index 35ec0935..4986b99b 100644 --- a/src/components/Article/FullArticle.tsx +++ b/src/components/Article/FullArticle.tsx @@ -360,7 +360,10 @@ export const FullArticle = (props: Props) => {
- {props.article.stat?.viewed} + {props.article.stat?.viewed} + + {t('viewsWithCount', { count: props.article.stat?.viewed })} +