From 2341e8377255af6e4eaa9deb6025811d31be6055 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 17 Nov 2022 00:08:04 +0300
Subject: [PATCH] Home page fixes

---
 public/icons/audio.svg                    |  4 +++
 public/icons/literature.svg               |  1 +
 src/components/Author/Card.tsx            |  6 ++---
 src/components/Feed/Beside.module.scss    |  5 ++++
 src/components/Feed/Beside.tsx            | 30 +++++++++++++++++------
 src/components/Feed/Card.module.scss      | 16 ++++++++++++
 src/components/Feed/Card.tsx              |  4 ++-
 src/components/Feed/Row2.tsx              |  2 +-
 src/components/Layouts/MainLayout.tsx     |  7 +++++-
 src/components/Pages/HomePage.module.scss |  3 +++
 src/components/Pages/HomePage.tsx         |  3 ++-
 src/components/Topic/Card.module.scss     | 11 +++++++++
 src/components/Topic/Card.tsx             | 25 +++++++++++++++----
 src/components/Topic/Full.module.scss     |  2 +-
 src/components/Views/AllAuthors.tsx       |  1 +
 src/components/Views/Home.tsx             |  9 +------
 src/locales/ru.json                       |  1 +
 src/styles/app.scss                       |  3 +--
 18 files changed, 102 insertions(+), 31 deletions(-)
 create mode 100644 public/icons/audio.svg
 create mode 100644 public/icons/literature.svg
 create mode 100644 src/components/Pages/HomePage.module.scss

diff --git a/public/icons/audio.svg b/public/icons/audio.svg
new file mode 100644
index 00000000..87621cb9
--- /dev/null
+++ b/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>
diff --git a/public/icons/literature.svg b/public/icons/literature.svg
new file mode 100644
index 00000000..8888804f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Author/Card.tsx b/src/components/Author/Card.tsx
index 4115eda1..82b18b10 100644
--- a/src/components/Author/Card.tsx
+++ b/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>
diff --git a/src/components/Feed/Beside.module.scss b/src/components/Feed/Beside.module.scss
index fb3d7b66..5b1c4235 100644
--- a/src/components/Feed/Beside.module.scss
+++ b/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;
+}
diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx
index 2a3a7ce2..ca8bdeda 100644
--- a/src/components/Feed/Beside.tsx
+++ b/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">
-            <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>
diff --git a/src/components/Feed/Card.module.scss b/src/components/Feed/Card.module.scss
index 09ba51d8..a61aa9d3 100644
--- a/src/components/Feed/Card.module.scss
+++ b/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;
+  }
+}
diff --git a/src/components/Feed/Card.tsx b/src/components/Feed/Card.tsx
index 56f53f7e..1978cab3 100644
--- a/src/components/Feed/Card.tsx
+++ b/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}>
diff --git a/src/components/Feed/Row2.tsx b/src/components/Feed/Row2.tsx
index 1c0c8b2c..ac3a3a5a 100644
--- a/src/components/Feed/Row2.tsx
+++ b/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>
diff --git a/src/components/Layouts/MainLayout.tsx b/src/components/Layouts/MainLayout.tsx
index d2f4659d..ab86ac4a 100644
--- a/src/components/Layouts/MainLayout.tsx
+++ b/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}>
diff --git a/src/components/Pages/HomePage.module.scss b/src/components/Pages/HomePage.module.scss
new file mode 100644
index 00000000..bdf8a768
--- /dev/null
+++ b/src/components/Pages/HomePage.module.scss
@@ -0,0 +1,3 @@
+.mainContent {
+  padding-top: 100px;
+}
diff --git a/src/components/Pages/HomePage.tsx b/src/components/Pages/HomePage.tsx
index 392280bb..3c14550d 100644
--- a/src/components/Pages/HomePage.tsx
+++ b/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>
diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 4d68d697..617d77c1 100644
--- a/src/components/Topic/Card.module.scss
+++ b/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;
+}
diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index d8fbff48..01e48246 100644
--- a/src/components/Topic/Card.tsx
+++ b/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>
diff --git a/src/components/Topic/Full.module.scss b/src/components/Topic/Full.module.scss
index f0c39156..3e953571 100644
--- a/src/components/Topic/Full.module.scss
+++ b/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 {
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 93a46f36..fa935bdb 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/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>
diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx
index d1246a86..4d45592f 100644
--- a/src/components/Views/Home.tsx
+++ b/src/components/Views/Home.tsx
@@ -76,14 +76,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>
     )
   })
diff --git a/src/locales/ru.json b/src/locales/ru.json
index a7644c70..979fffde 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4,6 +4,7 @@
   "All": "Все",
   "All posts": "Все публикации",
   "All topics": "Все темы",
+  "All authors": "Все авторы",
   "Authors": "Авторы",
   "Back to mainpage": "Вернуться на главную",
   "Become an author": "Стать автором",
diff --git a/src/styles/app.scss b/src/styles/app.scss
index fa894ebc..79ba81cb 100644
--- a/src/styles/app.scss
+++ b/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;
 }