diff --git a/src/components/Article/Comment.tsx b/src/components/Article/Comment.tsx
index 254a32ba..1f6e2197 100644
--- a/src/components/Article/Comment.tsx
+++ b/src/components/Article/Comment.tsx
@@ -16,6 +16,7 @@ import { useLocalize } from '../../context/localize'
import { CommentRatingControl } from './CommentRatingControl'
import { getPagePath } from '@nanostores/router'
import { router } from '../../stores/router'
+import { CommentDate } from './CommentDate'
const CommentEditor = lazy(() => import('../_shared/CommentEditor'))
@@ -155,15 +156,7 @@ export const Comment = (props: Props) => {
-
+
diff --git a/src/components/Article/CommentDate.module.scss b/src/components/Article/CommentDate.module.scss
new file mode 100644
index 00000000..e827bdb9
--- /dev/null
+++ b/src/components/Article/CommentDate.module.scss
@@ -0,0 +1,27 @@
+.commentDates {
+ flex: 1;
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ justify-content: flex-start;
+ font-size: 1.2rem;
+ margin: 0 1em 4px 0;
+ color: rgb(0 0 0 / 30%);
+ @include font-size(1.2rem);
+
+ .date {
+ .icon {
+ line-height: 1;
+ width: 1rem;
+ display: inline-block;
+ opacity: 0.6;
+ margin-right: 0.5rem;
+ vertical-align: middle;
+ }
+ }
+}
+
+.commentDatesLastInRow {
+ margin-right: 0;
+ white-space: nowrap;
+}
diff --git a/src/components/Article/CommentDate.tsx b/src/components/Article/CommentDate.tsx
new file mode 100644
index 00000000..5ade0d23
--- /dev/null
+++ b/src/components/Article/CommentDate.tsx
@@ -0,0 +1,34 @@
+import styles from './CommentDate.module.scss'
+import { Icon } from '../_shared/Icon'
+import { Show, createMemo } from 'solid-js'
+import type { Reaction } from '../../graphql/types.gen'
+import { formatDate } from '../../utils'
+import { useLocalize } from '../../context/localize'
+import { clsx } from 'clsx'
+
+type Props = {
+ comment: Reaction
+ isShort?: boolean
+ isLastInRow?: boolean
+}
+
+export const CommentDate = (props: Props) => {
+ const { t } = useLocalize()
+
+ const formattedDate = (date) =>
+ props.isShort
+ ? formatDate(new Date(date), { month: 'long', day: 'numeric', year: 'numeric' })
+ : createMemo(() => formatDate(new Date(date), { hour: 'numeric', minute: 'numeric' }))
+
+ return (
+
+ )
+}
diff --git a/src/components/Feed/ArticleCard.tsx b/src/components/Feed/ArticleCard.tsx
index aa4db4b9..538b0cff 100644
--- a/src/components/Feed/ArticleCard.tsx
+++ b/src/components/Feed/ArticleCard.tsx
@@ -1,6 +1,6 @@
import { createMemo, createSignal, For, Show } from 'solid-js'
import type { Shout } from '../../graphql/types.gen'
-import { capitalize } from '../../utils'
+import { capitalize, formatDate } from '../../utils'
import { translit } from '../../utils/ru2en'
import { Icon } from '../_shared/Icon'
import styles from './ArticleCard.module.scss'
@@ -70,9 +70,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
props.article.topics[0]
const formattedDate = createMemo(() => {
- return new Date(props.article.createdAt)
- .toLocaleDateString(lang(), { month: 'long', day: 'numeric', year: 'numeric' })
- .replace(' г.', '')
+ return formatDate(new Date(props.article.createdAt), { month: 'long', day: 'numeric', year: 'numeric' })
})
const { title, subtitle } = getTitleAndSubtitle(props.article)
@@ -170,7 +168,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
- {formattedDate()}
+
diff --git a/src/components/Views/Feed.module.scss b/src/components/Views/Feed.module.scss
index 954aa191..d8b48a3e 100644
--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@@ -39,10 +39,8 @@
.feedAside {
h4 {
@include font-size(2.2rem);
-
font-weight: bold;
margin-bottom: 2.4rem;
- text-transform: lowercase;
}
}
@@ -120,18 +118,31 @@
}
}
+.commentDetails {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
.commentBody {
+ @include font-size(1.4rem);
margin-bottom: 1.2rem;
line-clamp: 3;
-webkit-line-clamp: 3;
+
+ a {
+ border: none;
+ padding-bottom: 0.2em;
+ }
}
.commentArticleTitle {
- @include font-size(1.2rem);
line-clamp: 1;
-webkit-line-clamp: 1;
}
+.commentArticleTitle,
.commentAuthor {
@include font-size(1.2rem);
+ font-weight: 500;
}
diff --git a/src/components/Views/Feed.tsx b/src/components/Views/Feed.tsx
index 6513463a..4b254742 100644
--- a/src/components/Views/Feed.tsx
+++ b/src/components/Views/Feed.tsx
@@ -17,6 +17,7 @@ import { useLocalize } from '../../context/localize'
import styles from './Feed.module.scss'
import stylesTopic from '../Feed/CardTopic.module.scss'
import stylesBeside from '../../components/Feed/Beside.module.scss'
+import { CommentDate } from '../Article/CommentDate'
export const FEED_PAGE_SIZE = 20
@@ -156,12 +157,15 @@ export const FeedView = () => {
innerHTML={comment.body}
/>
-
+