Merge pull request #52 from Discours/topic-page

Topic page fixes

src/components/Feed/Beside.module.scss

@@ -12,6 +12,8 @@
   }
 
   li {
+    margin-bottom: 1em;
+
     &.top {
       border-bottom: 1px solid #e1e1e1;
       display: flex;

src/components/Nav/Modal.scss

@@ -1,11 +1,12 @@
 .modalwrap {
-  pointer-events: all;
   align-items: center;
   background: rgb(20 20 20 / 70%);
   display: flex;
   justify-content: center;
   height: 100%;
   left: 0;
+  overflow: auto;
+  pointer-events: all;
   position: fixed;
   top: 0;
   width: 100%;

src/components/Topic/Full.module.scss

@@ -1,11 +1,19 @@
-.topic__header {
+.topicHeader {
   @include font-size(1.7rem);
 
   padding-top: 5.8rem;
   text-align: center;
+
+  h1 {
+    color: #2638d9;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    @include font-size(2rem);
+  }
 }
 
-.topic__actions {
+.topicActions {
   margin-top: 2.8rem;
 
   button,

src/components/Topic/Full.tsx

@@ -1,10 +1,11 @@
 import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
-import './Full.scss'
+import styles from './Full.module.scss'
 import { useAuthStore } from '../../stores/auth'
 import { follow, unfollow } from '../../stores/zine/common'
 import { t } from '../../utils/intl'
+import { clsx } from 'clsx'
 
 type Props = {
   topic: Topic
@@ -15,37 +16,35 @@ export const FullTopic = (props: Props) => {
 
   const subscribed = createMemo(() => session()?.news?.topics?.includes(props.topic?.slug))
   return (
-    <div class="topic-full container">
-      <div class="row">
-        <Show when={!!props.topic?.slug}>
-          <div class="topic__header col-md-8 offset-md-2">
-            <h1>#{props.topic.title}</h1>
-            <p>{props.topic.body}</p>
-            <div class="topic__actions">
-              <Show when={!subscribed()}>
-                <button
-                  onClick={() => follow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
-                  class="button"
-                >
-                  {t('Follow the topic')}
-                </button>
-              </Show>
-              <Show when={subscribed()}>
-                <button
-                  onClick={() => unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
-                  class="button"
-                >
-                  {t('Unfollow the topic')}
-                </button>
-              </Show>
-              <a href={`/create/${props.topic.slug}`}>{t('Write about the topic')}</a>
-            </div>
-            <Show when={props.topic.pic}>
-              <img src={props.topic.pic} alt={props.topic.title} />
+    <div class={styles.topicFull}>
+      <Show when={!!props.topic?.slug}>
+        <div class={clsx(styles.topicHeader, 'col-md-8 offset-md-2')}>
+          <h1>#{props.topic.title}</h1>
+          <p>{props.topic.body}</p>
+          <div class={clsx(styles.topicActions)}>
+            <Show when={!subscribed()}>
+              <button
+                onClick={() => follow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
+                class="button"
+              >
+                {t('Follow the topic')}
+              </button>
             </Show>
+            <Show when={subscribed()}>
+              <button
+                onClick={() => unfollow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
+                class="button"
+              >
+                {t('Unfollow the topic')}
+              </button>
+            </Show>
+            <a href={`/create/${props.topic.slug}`}>{t('Write about the topic')}</a>
           </div>
-        </Show>
-      </div>
+          <Show when={props.topic.pic}>
+            <img src={props.topic.pic} alt={props.topic.title} />
+          </Show>
+        </div>
+      </Show>
     </div>
   )
 }

src/components/Views/Author.tsx

@@ -7,7 +7,6 @@ import { t } from '../../utils/intl'
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { loadAuthorArticles, useArticlesStore } from '../../stores/zine/articles'
 
-import '../../styles/Topic.scss'
 import { useTopicsStore } from '../../stores/zine/topics'
 import { useRouter } from '../../stores/router'
 import { Beside } from '../Feed/Beside'

src/components/Views/Topic.tsx

@@ -4,7 +4,7 @@ import { Row3 } from '../Feed/Row3'
 import { Row2 } from '../Feed/Row2'
 import { Beside } from '../Feed/Beside'
 import { ArticleCard } from '../Feed/Card'
-import '../../styles/Topic.scss'
+import styles from '../../styles/Topic.module.scss'
 import { FullTopic } from '../Topic/Full'
 import { t } from '../../utils/intl'
 import { useRouter } from '../../stores/router'
@@ -13,6 +13,9 @@ import { loadPublishedArticles, useArticlesStore } from '../../stores/zine/artic
 import { useAuthorsStore } from '../../stores/zine/authors'
 import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll'
 import { splitToPages } from '../../utils/splitToPages'
+import { clsx } from 'clsx'
+import Slider from '../Feed/Slider'
+import { Row1 } from '../Feed/Row1'
 
 type TopicsPageSearchParams = {
   by: 'comments' | '' | 'recent' | 'viewed' | 'rating' | 'commented'
@@ -70,94 +73,111 @@ export const TopicView = (props: TopicProps) => {
   )
 
   return (
-    <div class="topic-page container">
+    <div class={styles.topicPage}>
       <Show when={topic()}>
         <FullTopic topic={topic()} />
-        <div class="row group__controls">
-          <div class="col-md-8">
-            <ul class="view-switcher">
-              <li classList={{ selected: searchParams().by === 'recent' || !searchParams().by }}>
-                <button type="button" onClick={() => changeSearchParam('by', 'recent')}>
-                  {t('Recent')}
-                </button>
-              </li>
-              {/*TODO: server sort*/}
-              {/*<li classList={{ selected: getSearchParams().by === 'rating' }}>*/}
-              {/*  <button type="button" onClick={() => changeSearchParam('by', 'rating')}>*/}
-              {/*    {t('Popular')}*/}
-              {/*  </button>*/}
-              {/*</li>*/}
-              {/*<li classList={{ selected: getSearchParams().by === 'viewed' }}>*/}
-              {/*  <button type="button" onClick={() => changeSearchParam('by', 'viewed')}>*/}
-              {/*    {t('Views')}*/}
-              {/*  </button>*/}
-              {/*</li>*/}
-              {/*<li classList={{ selected: getSearchParams().by === 'commented' }}>*/}
-              {/*  <button type="button" onClick={() => changeSearchParam('by', 'commented')}>*/}
-              {/*    {t('Discussing')}*/}
-              {/*  </button>*/}
-              {/*</li>*/}
-            </ul>
-          </div>
-          <div class="col-md-4">
-            <div class="mode-switcher">
-              {`${t('Show')} `}
-              <span class="mode-switcher__control">{t('All posts')}</span>
+        <div class="container">
+          <div class={clsx(styles.groupControls, 'row group__controls')}>
+            <div class="col-md-8">
+              <ul class="view-switcher">
+                <li classList={{ selected: searchParams().by === 'recent' || !searchParams().by }}>
+                  <button type="button" onClick={() => changeSearchParam('by', 'recent')}>
+                    {t('Recent')}
+                  </button>
+                </li>
+                {/*TODO: server sort*/}
+                {/*<li classList={{ selected: getSearchParams().by === 'rating' }}>*/}
+                {/*  <button type="button" onClick={() => changeSearchParam('by', 'rating')}>*/}
+                {/*    {t('Popular')}*/}
+                {/*  </button>*/}
+                {/*</li>*/}
+                {/*<li classList={{ selected: getSearchParams().by === 'viewed' }}>*/}
+                {/*  <button type="button" onClick={() => changeSearchParam('by', 'viewed')}>*/}
+                {/*    {t('Views')}*/}
+                {/*  </button>*/}
+                {/*</li>*/}
+                {/*<li classList={{ selected: getSearchParams().by === 'commented' }}>*/}
+                {/*  <button type="button" onClick={() => changeSearchParam('by', 'commented')}>*/}
+                {/*    {t('Discussing')}*/}
+                {/*  </button>*/}
+                {/*</li>*/}
+              </ul>
+            </div>
+            <div class="col-md-4">
+              <div class="mode-switcher">
+                {`${t('Show')} `}
+                <span class="mode-switcher__control">{t('All posts')}</span>
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="row floor floor--important">
-          <div class="container">
-            <div class="row">
-              <h3 class="col-12">{title()}</h3>
-              <For each={sortedArticles().slice(0, 6)}>
-                {(article) => (
-                  <div class="col-md-6">
-                    <ArticleCard
-                      article={article}
-                      settings={{ isFloorImportant: true, isBigTitle: true }}
-                    />
-                  </div>
-                )}
-              </For>
+        <Row1 article={sortedArticles()[0]} />
+        <Row2 articles={sortedArticles().slice(1, 3)} />
+
+        <Beside
+          title={t('Topic is supported by')}
+          values={authorsByTopic()[topic().slug].slice(0, 6)}
+          beside={sortedArticles()[4]}
+          wrapper={'author'}
+        />
+
+        <Show when={searchParams().by === 'recent'}>
+          <Slider title={title()} articles={sortedArticles().slice(5, 11)} />
+        </Show>
+
+        <Beside
+          beside={sortedArticles()[12]}
+          title={t('Top viewed')}
+          values={sortedArticles().slice(0, 5)}
+          wrapper={'top-article'}
+        />
+
+        <Show when={searchParams().by !== 'recent'}>
+          <div class={clsx(styles.floorImportant, 'row floor floor--important')}>
+            <div class="container">
+              <div class="row">
+                <h3 class="col-12">{title()}</h3>
+                <For each={sortedArticles().slice(0, 6)}>
+                  {(article) => (
+                    <div class="col-md-6">
+                      <ArticleCard
+                        article={article}
+                        settings={{ isFloorImportant: true, isBigTitle: true }}
+                      />
+                    </div>
+                  )}
+                </For>
+              </div>
             </div>
           </div>
-        </div>
+        </Show>
 
-        <div class="row">
-          <Show when={sortedArticles().length > 5}>
-            <Beside
-              title={t('Topic is supported by')}
-              values={authorsByTopic()[topic().slug].slice(0, 7)}
-              beside={sortedArticles()[6]}
-              wrapper={'author'}
-            />
-            <Row3 articles={sortedArticles().slice(7, 10)} />
-            <Row2 articles={sortedArticles().slice(10, 12)} />
-            <Row3 articles={sortedArticles().slice(12, 15)} />
-            <Row3 articles={sortedArticles().slice(15, 18)} />
-            <Row3 articles={sortedArticles().slice(18, 21)} />
-          </Show>
+        <Show when={sortedArticles().length > 5}>
+          <Row3 articles={sortedArticles().slice(13, 16)} />
+          <Row2 articles={sortedArticles().slice(16, 18)} />
+          <Row3 articles={sortedArticles().slice(18, 21)} />
+          <Row3 articles={sortedArticles().slice(21, 24)} />
+          <Row3 articles={sortedArticles().slice(24, 27)} />
+        </Show>
 
-          <For each={pages()}>
-            {(page) => (
-              <>
-                <Row3 articles={page.slice(0, 3)} />
-                <Row3 articles={page.slice(3, 6)} />
-                <Row3 articles={page.slice(6, 9)} />
-              </>
-            )}
-          </For>
+        <For each={pages()}>
+          {(page) => (
+            <>
+              <Row3 articles={page.slice(0, 3)} />
+              <Row3 articles={page.slice(3, 6)} />
+              <Row3 articles={page.slice(6, 9)} />
+            </>
+          )}
+        </For>
 
-          <Show when={isLoadMoreButtonVisible()}>
-            <p class="load-more-container">
-              <button class="button" onClick={loadMore}>
-                {t('Load more')}
-              </button>
-            </p>
-          </Show>
-        </div>
+        <Show when={isLoadMoreButtonVisible()}>
+          <p class="load-more-container">
+            <button class="button" onClick={loadMore}>
+              {t('Load more')}
+            </button>
+          </p>
+        </Show>
       </Show>
     </div>
   )

src/styles/Topic.module.scss

@@ -1,11 +1,11 @@
-.topic-page {
-  .group__controls {
+.topicPage {
+  .groupControls {
     align-items: baseline;
     margin-bottom: 4rem;
     margin-top: 7rem;
   }
 
-  .floor--important {
+  .floorImportant {
     a:hover {
       background: #fff;
       color: #000 !important;