Home page fixes

public/icons/audio.svg

@@ -0,0 +1,4 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M11.1853 7.68061L11.1746 2.64865L5.05266 3.68025C5.04861 8.28981 5.04659 10.9099 5.04659 11.5405L5.04077 11.5326C4.95203 12.9109 3.85883 14 2.52329 14C1.12972 14 0 12.8142 0 11.3514C0 9.88854 1.12972 8.7027 2.52329 8.7027C2.77381 8.7027 3.0158 8.74102 3.24423 8.81239V1.7027L12.9769 0C13.0077 6.85087 13.0077 10.3193 12.9769 10.4054L12.9711 10.398C12.8821 11.776 11.789 12.8649 10.4536 12.8649C9.06007 12.8649 7.93035 11.679 7.93035 10.2162C7.93035 8.75341 9.06007 7.56757 10.4536 7.56757C10.7081 7.56757 10.9537 7.60709 11.1853 7.68061Z" fill="currentColor"/>
+</svg>

public/icons/literature.svg

@@ -0,0 +1 @@
+<svg width="12" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.969 1.688l6.181 2.18v12.88H12V2.722L4.2 0 0 1.47v13.668L7.436 18H8.55V4.532L2.147 2.265l1.822-.577z" fill="currentColor"/></svg>

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 '../Nav/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">
+          <div class={clsx('col-md-8', styles.shoutCardContainer)}>
-            <ArticleCard article={props.beside} settings={{ isBigTitle: true }} />
+            <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/Layouts/MainLayout.tsx

@@ -4,12 +4,14 @@ import { Footer } from '../Discours/Footer'
 
 import '../../styles/app.scss'
 import { Show } from 'solid-js'
+import { clsx } from 'clsx'
 
 type MainLayoutProps = {
   headerTitle?: string
   children: JSX.Element
   isHeaderFixed?: boolean
   hideFooter?: boolean
+  class?: string
 }
 
 export const MainLayout = (props: MainLayoutProps) => {
@@ -18,7 +20,10 @@ export const MainLayout = (props: MainLayoutProps) => {
   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/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 { loadPublishedArticles, 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.homeArticles) && Boolean(props.randomTopics))
@@ -23,7 +24,7 @@ export const HomePage = (props: PageProps) => {
   onCleanup(() => resetSortedArticles())
 
   return (
-    <MainLayout>
+    <MainLayout class={styles.mainContent}>
       <Show when={isLoaded()} fallback={<Loading />}>
         <HomeView randomTopics={props.randomTopics} recentPublishedArticles={props.homeArticles || []} />
       </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>

src/components/Views/Home.tsx

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

src/locales/ru.json

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

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;
 }