Article card feed mode

src/components/Article/Article.module.scss

@@ -1,11 +1,11 @@
 h1 {
   @include font-size(4rem);
-
   line-height: 1.1;
   margin-top: 0.5em;
 }
 
 h2 {
+  @include font-size(4rem);
   line-height: 1.1;
 }
 

src/components/Author/AuthorCard.module.scss

@@ -353,7 +353,6 @@
 
   .authorName {
     @include font-size(1.2rem);
-
     margin-bottom: 0;
   }
 

src/components/Author/AuthorCard.tsx

@@ -105,6 +105,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
         hasLink={props.hasLink}
         isBig={props.isAuthorPage}
         isAuthorsList={props.isAuthorsList}
+        isFeedMode={props.isFeedMode}
         class={styles.circlewrap}
       />
 

src/components/Author/Userpic.module.scss

@@ -73,3 +73,10 @@
     line-height: 6.4rem;
   }
 }
+
+.feedMode {
+  .userpic {
+    min-width: 16px;
+    max-width: 16px;
+  }
+}

src/components/Author/Userpic.tsx

@@ -9,6 +9,7 @@ interface UserpicProps {
   isBig?: boolean
   class?: string
   isAuthorsList?: boolean
+  isFeedMode?: boolean
 }
 
 export default (props: UserpicProps) => {
@@ -23,7 +24,8 @@ export default (props: UserpicProps) => {
       class={clsx(styles.circlewrap, props.class)}
       classList={{
         [styles.big]: props.isBig,
-        [styles.authorsList]: props.isAuthorsList
+        [styles.authorsList]: props.isAuthorsList,
+        [styles.feedMode]: props.isFeedMode
       }}
     >
       <Show when={props.hasLink}>

src/components/Feed/ArticleCard.module.scss

@@ -114,11 +114,20 @@
 
 .shoutDetails {
   display: flex;
+  margin-bottom: 1rem;
+}
+
+.shoutDetailsFeedMode {
+  justify-content: space-between;
+
+  .shoutAuthor,
+  .shoutDate {
+    @include font-size(1.2rem);
+  }
 }
 
 .shoutCardTitle {
   @include font-size(2.2rem);
-
   font-weight: 700;
   line-height: 1.1;
   margin-bottom: 0.8rem;
@@ -136,11 +145,15 @@
     /* stylelint-disable-next-line */
     -webkit-box-decoration-break: clone;
   }
+
+  .shoutCardTitlesContainerFeedMode & {
+    @include font-size(3.2rem);
+    line-height: 1.1;
+  }
 }
 
 .shoutCardSubtitle {
   @include font-size(1.8rem);
-
   color: #141414;
   font-weight: 400;
   line-height: 1.3;

src/components/Feed/ArticleCard.tsx

@@ -16,6 +16,7 @@ import { getPagePath, openPage } from '@nanostores/router'
 import { router, useRouter } from '../../stores/router'
 import { imageProxy } from '../../utils/imageProxy'
 import { Popover } from '../_shared/Popover'
+import { AuthorCard } from '../Author/AuthorCard'
 
 interface ArticleCardProps {
   settings?: {
@@ -103,7 +104,7 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardBeside]: props.settings?.isBeside
       }}
     >
-      <Show when={!props.settings?.noimage && cover}>
+      <Show when={!props.settings?.noimage && cover && !props.settings?.isFeedMode}>
         <div class={styles.shoutCardCoverContainer}>
           <div class={styles.shoutCardCover}>
             <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
@@ -112,7 +113,14 @@ export const ArticleCard = (props: ArticleCardProps) => {
       </Show>
 
       <div class={styles.shoutCardContent}>
-        <Show when={layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)}>
+        <Show
+          when={
+            layout &&
+            layout !== 'article' &&
+            !(props.settings?.noicon || props.settings?.noimage) &&
+            !props.settings?.isFeedMode
+          }
+        >
           <div class={styles.shoutCardType}>
             <a href={`/expo/${layout}`}>
               <Icon name={layout} class={styles.icon} />
@@ -127,11 +135,16 @@ export const ArticleCard = (props: ArticleCardProps) => {
             }
             slug={mainTopic.slug}
             isFloorImportant={props.settings?.isFloorImportant}
+            isFeedMode={true}
             class={clsx(styles.shoutTopic, { [styles.shoutTopicTop]: props.settings.isShort })}
           />
         </Show>
 
-        <div class={styles.shoutCardTitlesContainer}>
+        <div
+          class={clsx(styles.shoutCardTitlesContainer, {
+            [styles.shoutCardTitlesContainerFeedMode]: props.settings?.isFeedMode
+          })}
+        >
           <a href={`/${slug || ''}`}>
             <div class={styles.shoutCardTitle}>
               <span class={styles.shoutCardLinkContainer}>{title}</span>
@@ -146,22 +159,21 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </div>
 
         <Show when={!props.settings?.noauthor || !props.settings?.nodate}>
-          <div class={styles.shoutDetails}>
+          <div
+            class={clsx(styles.shoutDetails, { [styles.shoutDetailsFeedMode]: props.settings?.isFeedMode })}
+          >
             <Show when={!props.settings?.noauthor}>
               <div class={styles.shoutAuthor}>
                 <For each={authors}>
-                  {(author, index) => {
+                  {(author) => {
-                    let name = author.name
-
-                    if (lang() !== 'ru') {
-                      name = name === 'Дискурс' ? 'Discours' : translit(name)
-                    }
-
                     return (
-                      <>
+                      <AuthorCard
-                        <Show when={index() > 0}>, </Show>
+                        author={author}
-                        <a href={`/author/${author.slug}`}>{name}</a>
+                        hideWriteButton={true}
-                      </>
+                        hideFollow={true}
+                        isFeedMode={true}
+                        hasLink={props.settings?.isFeedMode}
+                      />
                     )
                   }}
                 </For>
@@ -174,6 +186,25 @@ export const ArticleCard = (props: ArticleCardProps) => {
         </Show>
 
         <Show when={props.settings?.isFeedMode}>
+          <Show when={!props.settings?.noimage && cover}>
+            <div class={styles.shoutCardCoverContainer}>
+              <Show
+                when={
+                  layout && layout !== 'article' && !(props.settings?.noicon || props.settings?.noimage)
+                }
+              >
+                <div class={styles.shoutCardType}>
+                  <a href={`/expo/${layout}`}>
+                    <Icon name={layout} class={styles.icon} />
+                  </a>
+                </div>
+              </Show>
+              <div class={styles.shoutCardCover}>
+                <img src={imageProxy(cover)} alt={title || ''} loading="lazy" />
+              </div>
+            </div>
+          </Show>
+
           <section
             class={styles.shoutCardDetails}
             classList={{ [styles.shoutCardDetailsActive]: isActionPopupActive() }}

src/components/Feed/CardTopic.module.scss

@@ -32,3 +32,7 @@
     }
   }
 }
+
+.shoutTopicFeedMode {
+  font-size: 1.2rem;
+}

src/components/Feed/CardTopic.tsx

@@ -7,6 +7,7 @@ type CardTopicProps = {
   title: string
   slug: string
   isFloorImportant?: boolean
+  isFeedMode?: boolean
   class?: string
 }
 
@@ -14,7 +15,8 @@ export const CardTopic = (props: CardTopicProps) => {
   return (
     <div
       class={clsx(styles.shoutTopic, props.class, {
-        [styles.shoutTopicFloorImportant]: props.isFloorImportant
+        [styles.shoutTopicFloorImportant]: props.isFloorImportant,
+        [styles.shoutTopicFeedMode]: props.isFeedMode
       })}
     >
       <a href={getPagePath(router, 'topic', { slug: props.slug })}>{props.title}</a>

src/components/Nav/Header.module.scss

@@ -370,6 +370,7 @@
   }
 
   .userpic {
+    align-items: center;
     margin-right: 0;
 
     img {

src/styles/app.scss

@@ -123,13 +123,11 @@ h2 {
 
 h1 {
   @include font-size(4.8rem);
-
   line-height: 1.1;
 }
 
 h2 {
   @include font-size(4rem);
-
   line-height: 1.1;
   margin-bottom: 0.5em;
   margin-top: 1.5em;
@@ -137,7 +135,6 @@ h2 {
 
 h3 {
   @include font-size(3.2rem);
-
   line-height: 1.1;
   margin-bottom: 0.5em;
 }