loadby-refactored-merged

src/components/Author/Card.tsx

@@ -20,6 +20,7 @@ interface AuthorCardProps {
   isAuthorPage?: boolean
   noSocialButtons?: boolean
   isAuthorsList?: boolean
+  truncateBio?: boolean
 }
 
 export const AuthorCard = (props: AuthorCardProps) => {
@@ -63,7 +64,8 @@ export const AuthorCard = (props: AuthorCardProps) => {
           </Show>
 
           <Show when={!props.hideDescription}>
-            <div class={styles.authorAbout} classList={{ 'text-truncate': props.isAuthorsList }}>
+            {props.isAuthorsList}
+            <div class={styles.authorAbout} classList={{ 'text-truncate': props.truncateBio }}>
               {bio()}
             </div>
           </Show>
@@ -86,7 +88,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
                 >
                   <Show when={!props.isAuthorsList}>
                     <Icon name="author-subscribe" class={styles.icon} />
-                    &nbsp;
                   </Show>
                   <span class={styles.buttonLabel}>{t('Follow')}</span>
                 </button>
@@ -103,7 +104,6 @@ export const AuthorCard = (props: AuthorCardProps) => {
               >
                 <Show when={!props.isAuthorsList}>
                   <Icon name="author-unsubscribe" class={styles.icon} />
-                  &nbsp;
                 </Show>
                 <span class={styles.buttonLabel}>{t('Unfollow')}</span>
               </button>

src/components/Feed/Beside.module.scss

@@ -70,6 +70,7 @@
     @include font-size(1.5rem);
 
     font-weight: 500;
+    padding-right: 0.3em;
     white-space: nowrap;
 
     img {
@@ -108,3 +109,7 @@ button.follow {
   max-width: 2em;
   max-height: 2em;
 }
+
+.shoutCardContainer {
+  display: flex;
+}

src/components/Feed/Beside.tsx

@@ -4,10 +4,11 @@ import { For, Show } from 'solid-js'
 import { ArticleCard } from './Card'
 import { AuthorCard } from '../Author/Card'
 import { TopicCard } from '../Topic/Card'
-import style from './Beside.module.scss'
+import styles from './Beside.module.scss'
 import type { Author, Shout, Topic, User } from '../../graphql/types.gen'
 import { Icon } from '../_shared/Icon'
 import { t } from '../../utils/intl'
+import { clsx } from 'clsx'
 
 interface BesideProps {
   title?: string
@@ -29,21 +30,28 @@ export const Beside = (props: BesideProps) => {
           <Show when={!!props.values}>
             <div class="col-md-4">
               <Show when={!!props.title}>
-                <div class={style.besideColumnTitle}>
+                <div class={styles.besideColumnTitle}>
                   <h4>{props.title}</h4>
 
                   <Show when={props.wrapper === 'author'}>
                     <a href="/user/list">
                       {t('All authors')}
-                      <Icon name="arrow-right" />
+                      <Icon name="arrow-right" class={styles.icon} />
+                    </a>
+                  </Show>
+
+                  <Show when={props.wrapper === 'topic'}>
+                    <a href="/topics">
+                      {t('All topics')}
+                      <Icon name="arrow-right" class={styles.icon} />
                     </a>
                   </Show>
                 </div>
               </Show>
-              <ul class={style.besideColumn}>
+              <ul class={styles.besideColumn}>
                 <For each={[...props.values]}>
                   {(value: Partial<Shout | User | Topic>) => (
-                    <li classList={{ [style.top]: props.wrapper.startsWith('top-') }}>
+                    <li classList={{ [styles.top]: props.wrapper.startsWith('top-') }}>
                       <Show when={props.wrapper === 'topic'}>
                         <TopicCard
                           topic={value as Topic}
@@ -51,10 +59,16 @@ export const Beside = (props: BesideProps) => {
                           shortDescription={props.topicShortDescription}
                           isTopicInRow={props.isTopicInRow}
                           iconButton={props.iconButton}
+                          showPublications={true}
                         />
                       </Show>
                       <Show when={props.wrapper === 'author'}>
-                        <AuthorCard author={value as Author} compact={true} hasLink={true} />
+                        <AuthorCard
+                          author={value as Author}
+                          compact={true}
+                          hasLink={true}
+                          truncateBio={true}
+                        />
                       </Show>
                       <Show when={props.wrapper === 'article' && value?.slug}>
                         <ArticleCard article={value as Shout} settings={{ noimage: true }} />
@@ -71,8 +85,8 @@ export const Beside = (props: BesideProps) => {
               </ul>
             </div>
           </Show>
-          <div class="col-md-8">
-            <ArticleCard article={props.beside} settings={{ isBigTitle: true }} />
+          <div class={clsx('col-md-8', styles.shoutCardContainer)}>
+            <ArticleCard article={props.beside} settings={{ isBigTitle: true, isBeside: true }} />
           </div>
         </div>
       </div>

src/components/Feed/Card.module.scss

@@ -675,3 +675,19 @@
     @include font-size(2.4rem);
   }
 }
+
+.shoutCardBeside {
+  &,
+  .shoutCardCoverContainer {
+    flex: 1;
+  }
+
+  .shoutCardCover {
+    height: 100%;
+    padding: 0;
+  }
+
+  .shoutCardContent {
+    padding-top: 1.6rem;
+  }
+}

src/components/Feed/Card.tsx

@@ -29,6 +29,7 @@ interface ArticleCardProps {
     withBorder?: boolean
     isCompact?: boolean
     isSingle?: boolean
+    isBeside?: boolean
   }
   article: Shout
 }
@@ -82,7 +83,8 @@ export const ArticleCard = (props: ArticleCardProps) => {
         [styles.shoutCardVertical]: props.settings?.isVertical,
         [styles.shoutCardWithBorder]: props.settings?.withBorder,
         [styles.shoutCardCompact]: props.settings?.isCompact,
-        [styles.shoutCardSingle]: props.settings?.isSingle
+        [styles.shoutCardSingle]: props.settings?.isSingle,
+        [styles.shoutCardBeside]: props.settings?.isBeside
       }}
     >
       <Show when={!props.settings?.noimage && cover}>

src/components/Feed/Row2.tsx

@@ -23,7 +23,7 @@ export const Row2 = (props: { articles: Shout[]; isEqual?: boolean }) => {
                 <div class={`col-md-${props.isEqual ? '6' : x[y()][i()]}`}>
                   <ArticleCard
                     article={a}
-                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8' }}
+                    settings={{ isWithCover: props.isEqual || x[y()][i()] === '8', nodate: props.isEqual }}
                   />
                 </div>
               </Show>

src/components/Pages/HomePage.module.scss

@@ -0,0 +1,3 @@
+.mainContent {
+  padding-top: 100px;
+}

src/components/Pages/HomePage.tsx

@@ -5,6 +5,7 @@ import { createSignal, onCleanup, onMount, Show } from 'solid-js'
 import { loadShoutsBy, resetSortedArticles } from '../../stores/zine/articles'
 import { loadRandomTopics } from '../../stores/zine/topics'
 import { Loading } from '../Loading'
+import styles from './HomePage.module.scss'
 
 export const HomePage = (props: PageProps) => {
   const [isLoaded, setIsLoaded] = createSignal(Boolean(props.shouts) && Boolean(props.randomTopics))
@@ -23,7 +24,7 @@ export const HomePage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <PageWrap>
+    <PageWrap class={styles.mainContent}>
       <Show when={isLoaded()} fallback={<Loading />}>
         <HomeView randomTopics={props.randomTopics} shouts={props.shouts || []} />
       </Show>

src/components/Topic/Card.module.scss

@@ -28,6 +28,7 @@
   @include font-size(2.2rem);
 
   margin-bottom: 1.2rem;
+  margin-top: 0.5rem !important;
 }
 
 .topicAvatar {
@@ -104,3 +105,13 @@
     text-align: right;
   }
 }
+
+.topicCompact {
+  .topicTitle {
+    @include font-size(1.7rem);
+  }
+}
+
+.buttonCompact {
+  margin-top: 0.6rem;
+}

src/components/Topic/Card.tsx

@@ -21,6 +21,7 @@ interface TopicProps {
   additionalClass?: string
   isTopicInRow?: boolean
   iconButton?: boolean
+  showPublications?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -47,6 +48,7 @@ export const TopicCard = (props: TopicProps) => {
       class={styles.topic}
       classList={{
         row: !props.compact && !props.subscribeButtonBottom,
+        [styles.topicCompact]: props.compact,
         [styles.topicInRow]: props.isTopicInRow
       }}
     >
@@ -75,7 +77,7 @@ export const TopicCard = (props: TopicProps) => {
 
         <Show when={props.topic?.stat}>
           <div class={styles.topicDetails}>
-            <Show when={!props.compact}>
+            <Show when={props.showPublications}>
               <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.shouts +
                   ' ' +
@@ -85,6 +87,8 @@ export const TopicCard = (props: TopicProps) => {
                     locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                   )}
               </span>
+            </Show>
+            <Show when={!props.compact}>
               <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                 {props.topic.stat?.authors +
                   ' ' +
@@ -132,19 +136,30 @@ export const TopicCard = (props: TopicProps) => {
         class={styles.controlContainer}
         classList={{ 'col-md-3': !props.compact && !props.subscribeButtonBottom }}
       >
+        {}
         <Show
           when={subscribed()}
           fallback={
-            <button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
+            <button
+              onClick={() => subscribe(true)}
+              class="button--light button--subscribe-topic"
+              classList={{
+                [styles.buttonCompact]: props.compact
+              }}
+            >
               <Show when={props.iconButton}>+</Show>
-
               <Show when={!props.iconButton}>{t('Follow')}</Show>
             </button>
           }
         >
-          <button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
+          <button
+            onClick={() => subscribe(false)}
+            class="button--light button--subscribe-topic"
+            classList={{
+              [styles.buttonCompact]: props.compact
+            }}
+          >
             <Show when={props.iconButton}>-</Show>
-
             <Show when={!props.iconButton}>{t('Unfollow')}</Show>
           </button>
         </Show>

src/components/Topic/Full.module.scss

@@ -1,7 +1,7 @@
 .topicHeader {
   @include font-size(1.7rem);
 
-  padding-top: 5.8rem;
+  padding-top: 2.8rem;
   text-align: center;
 
   h1 {

src/components/Views/AllAuthors.tsx

@@ -109,6 +109,7 @@ export const AllAuthorsView = (props: Props) => {
                           subscribed={subscribed(author.slug)}
                           noSocialButtons={true}
                           isAuthorsList={true}
+                          truncateBio={true}
                         />
                       )}
                     </For>
@@ -118,7 +119,7 @@ export const AllAuthorsView = (props: Props) => {
                   <div class="row">
                     <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
                       <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                        {t('More')}
+                        {t('Load more')}
                       </button>
                     </div>
                   </div>

src/components/Views/AllTopics.tsx

@@ -113,7 +113,7 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                   <div class="row">
                     <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
                       <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                        {t('More')}
+                        {t('Load more')}
                       </button>
                     </div>
                   </div>

src/components/Views/Home.tsx

@@ -69,14 +69,7 @@ export const HomeView = (props: HomeProps) => {
 
     return (
       <Show when={Boolean(selectedRandomLayout)}>
-        <Group
-          articles={articlesByLayout()[selectedRandomLayout]}
-          header={
-            <div class="layout-icon">
-              <Icon name={selectedRandomLayout} />
-            </div>
-          }
-        />
+        <Group articles={articlesByLayout()[selectedRandomLayout]} header={''} />
       </Show>
     )
   })

src/components/_shared/PageWrap.tsx

@@ -4,12 +4,14 @@ import { Footer } from '../Discours/Footer'
 
 import '../../styles/app.scss'
 import { Show } from 'solid-js'
+import { clsx } from 'clsx'
 
 type PageWrapProps = {
   headerTitle?: string
   children: JSX.Element
   isHeaderFixed?: boolean
   hideFooter?: boolean
+  class?: string
 }
 
 export const PageWrap = (props: PageWrapProps) => {
@@ -18,7 +20,10 @@ export const PageWrap = (props: PageWrapProps) => {
   return (
     <>
       <Header title={props.headerTitle} isHeaderFixed={isHeaderFixed} />
-      <main class="main-content" classList={{ 'main-content--no-padding': !isHeaderFixed }}>
+      <main
+        class={clsx('main-content', props.class)}
+        classList={{ 'main-content--no-padding': !isHeaderFixed }}
+      >
         {props.children}
       </main>
       <Show when={props.hideFooter !== true}>

src/locales/ru.json

@@ -4,6 +4,7 @@
   "All": "Все",
   "All posts": "Все публикации",
   "All topics": "Все темы",
+  "All authors": "Все авторы",
   "Authors": "Авторы",
   "Back to mainpage": "Вернуться на главную",
   "Become an author": "Стать автором",

src/styles/AllTopics.module.scss

@@ -39,7 +39,7 @@
   text-align: center;
 
   .loadMoreButton {
-    padding: 0.6em 5em;
+    padding: 0.6em 3em;
     width: 100%;
 
     @include media-breakpoint-up(sm) {

src/styles/app.scss

@@ -232,7 +232,6 @@ button {
 
   font-weight: 400;
   height: auto;
-  margin-top: 0.6rem;
   padding: 0.6rem 1.2rem 0.6rem 1rem;
 }
 
@@ -641,7 +640,7 @@ astro-island {
 .main-content {
   flex: 1 100%;
   min-height: 300px;
-  padding-top: 100px;
+  padding-top: 120px;
   position: relative;
 }