From 1fb84173e6ded99e5b3de17c4c913f91b06eec7d Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Mon, 12 Jun 2023 20:58:02 +0300
Subject: [PATCH] Fix article comments style on the feed page

---
 src/components/Article/Comment.tsx            | 11 ++----
 .../Article/CommentDate.module.scss           | 27 +++++++++++++++
 src/components/Article/CommentDate.tsx        | 34 +++++++++++++++++++
 src/components/Feed/ArticleCard.tsx           |  8 ++---
 src/components/Views/Feed.module.scss         | 17 ++++++++--
 src/components/Views/Feed.tsx                 | 16 +++++----
 6 files changed, 90 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Article/CommentDate.module.scss
 create mode 100644 src/components/Article/CommentDate.tsx

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) => {
                 </div>
               </Show>
 
-              <div class={styles.commentDates}>
-                <div class={styles.date}>{formattedDate(comment()?.createdAt)()}</div>
-                <Show when={comment()?.updatedAt}>
-                  <div class={styles.date}>
-                    <Icon name="edit" class={styles.icon} />
-                    {t('Edited')} {formattedDate(comment()?.updatedAt)()}
-                  </div>
-                </Show>
-              </div>
+              <CommentDate comment={comment()} isShort={true} />
 
               <CommentRatingControl comment={comment()} />
             </div>
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 (
+    <div class={clsx(styles.commentDates, { [styles.commentDatesLastInRow]: props.isLastInRow })}>
+      <time class={styles.date}>{formattedDate(props.comment.createdAt)()}</time>
+      <Show when={props.comment.updatedAt}>
+        <time class={styles.date}>
+          <Icon name="edit" class={styles.icon} />
+          {t('Edited')} {formattedDate(props.comment.updatedAt)()}
+        </time>
+      </Show>
+    </div>
+  )
+}
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<string>(() => {
-    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) => {
               </div>
             </Show>
             <Show when={!props.settings?.nodate}>
-              <div class={styles.shoutDate}>{formattedDate()}</div>
+              <time class={styles.shoutDate}>{formattedDate()}</time>
             </Show>
           </div>
         </Show>
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}
                         />
                       </div>
-                      <AuthorCard
-                        author={comment.createdBy as Author}
-                        isFeedMode={true}
-                        hideWriteButton={true}
-                        hideFollow={true}
-                      />
+                      <div class={styles.commentDetails}>
+                        <AuthorCard
+                          author={comment.createdBy as Author}
+                          isFeedMode={true}
+                          hideWriteButton={true}
+                          hideFollow={true}
+                        />
+                        <CommentDate comment={comment} isShort={true} isLastInRow={true} />
+                      </div>
                       <div class={clsx('text-truncate', styles.commentArticleTitle)}>
                         <a href={`/${comment.shout.slug}`}>{comment.shout.title}</a>
                       </div>