On the article page make article footer same as on the feed page

src/components/Article/Article.module.scss

@@ -299,8 +299,9 @@ img {
   display: flex;
   justify-content: flex-start;
   padding: 3rem 0 0;
+  position: relative;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(lg) {
     flex-wrap: wrap;
   }
 }
@@ -311,11 +312,11 @@ img {
   align-items: center;
   font-weight: 500;
   display: flex;
-  margin: 0 6% 1em 0;
+  margin: 0 2rem 1em 0;
   vertical-align: baseline;
   cursor: pointer;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(xl) {
     margin-right: 3.2rem;
   }
 
@@ -359,6 +360,14 @@ img {
   }
 }
 
+.shoutStatsItemBookmarks {
+  margin-left: auto;
+
+  @include media-breakpoint-up(lg) {
+    margin-left: 0;
+  }
+}
+
 .shoutStatsItemInner {
   cursor: pointer;
 
@@ -382,32 +391,41 @@ img {
 
 .shoutStatsItemAdditionalData {
   color: rgb(0 0 0 / 40%);
+  cursor: default;
   font-weight: normal;
   justify-self: flex-end;
-  margin-right: 0;
-  margin-left: auto;
   white-space: nowrap;
-  cursor: default;
 
   .icon {
     opacity: 0.4;
     height: 2rem;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(lg) {
-    flex: 1 40%;
+    flex: 1 100%;
+    order: 9;
+
+    .shoutStatsItemAdditionalDataItem {
+      margin-left: 0;
+    }
   }
 }
 
 .shoutStatsItemViews {
+  color: rgb(0 0 0 / 0.4);
   cursor: default;
+  font-weight: normal;
+  margin-left: auto;
+  white-space: nowrap;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(lg) {
-    color: rgb(0 0 0 / 40%);
+    bottom: 0;
     flex: 1 40%;
     justify-content: end;
     margin-right: 0;
     order: 10;
+    position: absolute;
+    right: 0;
 
     .icon {
       display: none !important;
@@ -416,15 +434,20 @@ img {
 }
 
 .shoutStatsItemLabel {
+  font-weight: normal;
   margin-left: 0.3em;
+}
+
+.commentsTextLabel {
+  display: none;
 
   @include media-breakpoint-up(sm) {
-    display: none;
+    display: block;
   }
 }
 
 .shoutStatsItemCount {
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(lg) {
     display: none;
   }
 }
@@ -432,7 +455,7 @@ img {
 .shoutStatsItemAdditionalDataItem {
   font-weight: normal;
   display: inline-block;
-  margin-left: 2rem;
+  //margin-left: 2rem;
   margin-right: 0;
   margin-bottom: 0;
   cursor: default;
@@ -486,8 +509,10 @@ img {
 }
 
 .commentsHeaderWrapper {
+  @include media-breakpoint-up(sm) {
     display: flex;
     justify-content: space-between;
+  }
 }
 
 .commentsHeader {
@@ -623,3 +648,19 @@ a[data-toggle='tooltip'] {
     font-weight: 700;
   }
 }
+
+.articlePopupOpener {
+  .iconHover {
+    display: none;
+  }
+
+  &:hover {
+    .icon {
+      display: none;
+    }
+
+    .iconHover {
+      display: inline-block;
+    }
+  }
+}

src/components/Article/Comment/Comment.module.scss

@@ -4,16 +4,17 @@
   transition: background-color 0.3s;
   position: relative;
   list-style: none;
+  background: rgb(0 0 0 / 0.1);
+
+  @include media-breakpoint-down(sm) {
+    padding-right: 0;
+  }
 
   &.isNew {
     border-radius: 6px;
     background: rgb(38 56 217 / 5%);
   }
 
-  @include media-breakpoint-down(sm) {
-    margin-right: -1.2rem;
-  }
-
   .comment {
     margin-right: -1rem;
 
@@ -66,6 +67,8 @@
 }
 
 .commentContent {
+  padding: 0 1rem 1rem 0;
+
   &:hover {
     .commentControlReply,
     .commentControlShare,
@@ -76,6 +79,10 @@
       opacity: 1;
     }
   }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .commentControlReply,

src/components/Article/FullArticle.tsx

@@ -12,7 +12,7 @@ import { DEFAULT_HEADER_OFFSET, router, useRouter } from '../../stores/router'
 import { getDescription } from '../../utils/meta'
 import { TableOfContents } from '../TableOfContents'
 import { AudioPlayer } from './AudioPlayer'
-import { SharePopup } from './SharePopup'
+import { getShareUrl, SharePopup } from './SharePopup'
 import { ShoutRatingControl } from './ShoutRatingControl'
 import { CommentsTree } from './CommentsTree'
 import stylesHeader from '../Nav/Header/Header.module.scss'
@@ -26,6 +26,7 @@ import { CardTopic } from '../Feed/CardTopic'
 import { createPopper } from '@popperjs/core'
 import { AuthorBadge } from '../Author/AuthorBadge'
 import { getImageUrl } from '../../utils/getImageUrl'
+import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
 
 type Props = {
   article: Shout
@@ -229,6 +230,8 @@ export const FullArticle = (props: Props) => {
     })
   })
 
+  const [isActionPopupActive, setIsActionPopupActive] = createSignal(false)
+
   return (
     <>
       <Title>{props.article.title}</Title>
@@ -348,25 +351,43 @@ export const FullArticle = (props: Props) => {
 
               <Popover content={t('Comment')}>
                 {(triggerRef: (el) => void) => (
-                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={scrollToComments}>
+                  <div class={clsx(styles.shoutStatsItem)} ref={triggerRef} onClick={scrollToComments}>
                     <Icon name="comment" class={styles.icon} />
                     <Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
-                    {props.article.stat?.commented ?? ''}
+                    <span class={styles.commentsTextLabel}>
+                      {props.article.stat?.commented || t('Add' + ' comment')}
+                    </span>
                   </div>
                 )}
               </Popover>
 
               <Show when={props.article.stat?.viewed}>
                 <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemViews)}>
-                  <Icon name="eye" class={styles.icon} />
-                  <Icon name="eye" class={clsx(styles.icon, styles.iconHover)} />
-                  <span class={styles.shoutStatsItemCount}>{props.article.stat?.viewed}</span>
-                  <span class={styles.shoutStatsItemLabel}>
                   {t('viewsWithCount', { count: props.article.stat?.viewed })}
-                  </span>
                 </div>
               </Show>
 
+              <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
+                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+                  {formattedDate()}
+                </div>
+              </div>
+
+              <Popover content={t('Add to bookmarks')}>
+                {(triggerRef: (el) => void) => (
+                  <div
+                    class={clsx(styles.shoutStatsItem, styles.shoutStatsItemBookmarks)}
+                    ref={triggerRef}
+                    onClick={handleBookmarkButtonClick}
+                  >
+                    <div class={styles.shoutStatsItemInner}>
+                      <Icon name="bookmark" class={styles.icon} />
+                      <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
+                    </div>
+                  </div>
+                )}
+              </Popover>
+
               <Popover content={t('Share')}>
                 {(triggerRef: (el) => void) => (
                   <div class={styles.shoutStatsItem} ref={triggerRef}>
@@ -385,16 +406,7 @@ export const FullArticle = (props: Props) => {
                   </div>
                 )}
               </Popover>
-              <Popover content={t('Add to bookmarks')}>
+
-                {(triggerRef: (el) => void) => (
-                  <div class={styles.shoutStatsItem} ref={triggerRef} onClick={handleBookmarkButtonClick}>
-                    <div class={styles.shoutStatsItemInner}>
-                      <Icon name="bookmark" class={styles.icon} />
-                      <Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
-                    </div>
-                  </div>
-                )}
-              </Popover>
               <Show when={canEdit()}>
                 <Popover content={t('Edit')}>
                   {(triggerRef: (el) => void) => (
@@ -410,20 +422,34 @@ export const FullArticle = (props: Props) => {
                   )}
                 </Popover>
               </Show>
-              <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalData)}>
+
-                <div class={clsx(styles.shoutStatsItem, styles.shoutStatsItemAdditionalDataItem)}>
+              <FeedArticlePopup
-                  {formattedDate()}
+                isOwner={canEdit()}
+                containerCssClass={clsx(stylesHeader.control, styles.articlePopupOpener)}
+                title={props.article.title}
+                description={getDescription(props.article.body)}
+                imageUrl={props.article.cover}
+                shareUrl={getShareUrl({ pathname: `/${props.article.slug}` })}
+                isVisible={(value) => setIsActionPopupActive(value)}
+                trigger={
+                  <button>
+                    <Icon name="ellipsis" class={clsx(styles.icon)} />
+                    <Icon name="ellipsis" class={clsx(styles.icon, styles.iconHover)} />
+                  </button>
+                }
+              />
             </div>
-              </div>
+
-            </div>
-            <div class={styles.help}>
             <Show when={isAuthenticated() && !canEdit()}>
+              <div class={styles.help}>
                 <button class="button">{t('Cooperate')}</button>
+              </div>
             </Show>
             <Show when={canEdit()}>
+              <div class={styles.help}>
                 <button class="button button--light">{t('Invite to collab')}</button>
-              </Show>
               </div>
+            </Show>
 
             <Show when={props.article.topics.length}>
               <div class={styles.topicsList}>

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -42,7 +42,6 @@
     display: flex;
     flex-direction: column;
     line-height: 1.3;
-    margin-bottom: 1rem;
 
     @include media-breakpoint-up(sm) {
       flex: 1 100%;

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -579,6 +579,12 @@
   }
 }
 
+.shoutCardDetailsItemLabel {
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
+
 .shoutCardComments,
 .shoutCardDetailsViewed {
   align-items: center;

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -230,7 +230,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
                     name="comment-hover"
                     class={clsx(styles.icon, styles.iconHover, styles.feedControlIcon)}
                   />
-                  <span class={styles.shoutCardLinkContainer}>
+                  <span class={clsx(styles.shoutCardLinkContainer, styles.shoutCardDetailsItemLabel)}>
                     {props.article.stat?.commented || t('Add comment')}
                   </span>
                 </a>

src/components/Feed/FeedArticlePopup.module.scss

@@ -3,8 +3,9 @@
   border: 1px solid rgb(0 0 0 / 15%);
   border-radius: 1.6rem;
   padding: 1.6rem !important;
+  text-align: left;
 
-  @include media-breakpoint-between(sm, md) {
+  @include media-breakpoint-down(md) {
     left: auto !important;
     right: 0;
     transform: none !important;
@@ -13,6 +14,8 @@
   button {
     font-size: inherit;
     font-weight: 500;
+    text-align: left;
+    white-space: nowrap;
 
     &:hover {
       background: #000;

src/components/Nav/Header/Header.module.scss

@@ -575,7 +575,7 @@
 }
 
 .userControlItemVerbose {
-  margin-left: 1.2em !important;
+  margin-left: 0.9em !important;
 
   &:first-child {
     margin-left: 0 !important;

src/context/localize.tsx

@@ -73,7 +73,7 @@ export const LocalizeProvider = (props: { children: JSX.Element }) => {
 
     let result = date.toLocaleDateString(lang(), opts)
     if (lang() === 'ru') {
-      result = result.replace(' г.', '')
+      result = result.replace(' г.', '').replace('г.', '')
     }
 
     return result