Author page fixes

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -14,9 +14,12 @@
 }
 
 .authorDetails {
+  flex: 1;
+
+  @include media-breakpoint-up(sm) {
     align-items: baseline;
     display: flex;
-  flex: 1;
+  }
 
   &.authorDetailsShrinked {
     flex: 0 0 auto;
@@ -62,7 +65,7 @@
 
 .authorAbout {
   color: rgb(0 0 0 / 60%);
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   line-height: 1.4;
   word-break: break-word;
 }
@@ -442,11 +445,19 @@
   }
 }
 
+.subscribersContainer {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 1.4rem;
+  margin-top: 1em;
+}
+
 .subscribers {
+  align-items: center;
   cursor: pointer;
   display: inline-flex;
+  margin-right: 3rem;
   vertical-align: top;
-  align-items: center;
 
   .userpic {
     background: var(--background-color);
@@ -459,7 +470,12 @@
   }
 }
 
-.listWrapper {
+.subscribersCounter {
-  overflow: auto;
+  margin-left: -0.6rem;
-  max-height: 70vh;
+}
+
+.listWrapper {
+  max-height: 70vh;
+  overflow: auto;
+  padding-right: 2rem;
 }

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -39,6 +39,7 @@ type AuthorCardProps = {
   class?: string
   followers?: Author[]
   subscriptions?: Array<Author | Topic>
+  showPublicationsCounter?: boolean
 }
 
 function isAuthor(value: Author | Topic): value is Author {
@@ -115,6 +116,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
   })
 
   return (
+    <>
       <div
         class={clsx(styles.author, props.class)}
         classList={{
@@ -174,7 +176,16 @@ export const AuthorCard = (props: AuthorCardProps) => {
               </ConditionalWrapper>
             </div>
             {/*TODO: implement plurals by i18n*/}
-          <Show when={props.author.bio} fallback={<div>{props.author.stat?.shouts} публикаций</div>}>
+            <Show
+              when={props.author.bio}
+              fallback={
+                props.showPublicationsCounter ? (
+                  <div class={styles.authorAbout}>{props.author.stat?.shouts} публикаций</div>
+                ) : (
+                  ''
+                )
+              }
+            >
               <div
                 class={styles.authorAbout}
                 classList={{ 'text-truncate': props.truncateBio }}
@@ -182,12 +193,19 @@ export const AuthorCard = (props: AuthorCardProps) => {
               />
             </Show>
 
+            <Show
+              when={
+                (props.followers && props.followers.length > 0) ||
+                (props.subscriptions && props.subscriptions.length > 0)
+              }
+            >
+              <div class={styles.subscribersContainer}>
                 <Show when={props.followers && props.followers.length > 0}>
                   <div class={styles.subscribers} onClick={() => showModal('followers')}>
                     <For each={props.followers.slice(0, 3)}>
                       {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
                     </For>
-              <div>
+                    <div class={styles.subscribersCounter}>
                       {props.followers.length}&nbsp;
                       {getNumeralsDeclension(props.followers.length, [
                         t('subscriber'),
@@ -198,7 +216,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
                   </div>
                 </Show>
                 <Show when={props.subscriptions && props.subscriptions.length > 0}>
-            <div>
                   <div class={styles.subscribers} onClick={() => showModal('subscriptions')}>
                     <For each={props.subscriptions.slice(0, 3)}>
                       {(f) => {
@@ -210,7 +227,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
                         return null
                       }}
                     </For>
-                <div>
+                    <div class={styles.subscribersCounter}>
                       {props.subscriptions.length}&nbsp;
                       {getNumeralsDeclension(props.subscriptions.length, [
                         t('subscription'),
@@ -219,6 +236,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
                       ])}
                     </div>
                   </div>
+                </Show>
               </div>
             </Show>
           </div>
@@ -318,24 +336,35 @@ export const AuthorCard = (props: AuthorCardProps) => {
             </Show>
           </ShowOnlyOnClient>
         </div>
+      </div>
+
       <Show when={props.followers}>
         <Modal variant="wide" name="followers">
           <>
             <h2>{t('Followers')}</h2>
             <div class={styles.listWrapper}>
               <div class="row">
+                <div class="col-24">
                   <For each={props.followers}>
                     {(follower: Author) => (
-                    <div class="col-xs-12">
+                      <AuthorCard
-                      <AuthorCard author={follower} hideWriteButton={true} hasLink={true} />
+                        author={follower}
-                    </div>
+                        hideWriteButton={true}
+                        hasLink={true}
+                        isTextButton={true}
+                        liteButtons={true}
+                        truncateBio={true}
+                        showPublicationsCounter={true}
+                      />
                     )}
                   </For>
                 </div>
               </div>
+            </div>
           </>
         </Modal>
       </Show>
+
       <Show when={props.subscriptions}>
         <Modal variant="wide" name="subscriptions">
           <>
@@ -357,29 +386,32 @@ export const AuthorCard = (props: AuthorCardProps) => {
                 </button>
               </li>
             </ul>
+            <br />
             <div class={styles.listWrapper}>
               <div class="row">
+                <div class="col-24">
                   <For each={subscriptions()}>
-                  {(subscription: Author | Topic) => (
+                    {(subscription: Author | Topic) =>
-                    <div class="col-xs-12">
+                      isAuthor(subscription) ? (
-                      {isAuthor(subscription) ? (
                         <AuthorCard
                           author={subscription}
                           hideWriteButton={true}
                           hasLink={true}
                           isTextButton={true}
+                          truncateBio={true}
+                          showPublicationsCounter={true}
                         />
                       ) : (
-                        <TopicCard compact isTopicInRow showDescription topic={subscription} />
+                        <TopicCard compact isTopicInRow showDescription isCardMode topic={subscription} />
-                      )}
+                      )
-                    </div>
+                    }
-                  )}
                   </For>
                 </div>
               </div>
+            </div>
           </>
         </Modal>
       </Show>
-    </div>
+    </>
   )
 }

src/components/Feed/ArticleCard.module.scss

@@ -398,8 +398,10 @@
   padding: 0 2.4rem;
   width: 100%;
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(xl) {
-    padding-top: 100%;
+    aspect-ratio: auto;
+    height: 100%;
+    padding-top: 30%;
   }
 
   &.swiper-slide {
@@ -450,6 +452,12 @@
     justify-content: end;
     padding: 2.4rem;
     z-index: 1;
+
+    @include media-breakpoint-down(xl) {
+      padding-left: 0;
+      padding-right: 0;
+      position: relative;
+    }
   }
 
   .shoutCardCover {

src/components/Topic/Card.module.scss

@@ -19,6 +19,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  margin-top: 0;
 
   button {
     margin-top: 0;