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,13 +16,12 @@ export const FullTopic = (props: Props) => {
 
   const subscribed = createMemo(() => session()?.news?.topics?.includes(props.topic?.slug))
   return (
-    <div class="topic-full container">
-      <div class="row">
+    <div class={styles.topicFull}>
       <Show when={!!props.topic?.slug}>
-          <div class="topic__header col-md-8 offset-md-2">
+        <div class={clsx(styles.topicHeader, 'col-md-8 offset-md-2')}>
           <h1>#{props.topic.title}</h1>
           <p>{props.topic.body}</p>
-            <div class="topic__actions">
+          <div class={clsx(styles.topicActions)}>
             <Show when={!subscribed()}>
               <button
                 onClick={() => follow({ what: FollowingEntity.Topic, slug: props.topic.slug })}
@@ -46,6 +46,5 @@ export const FullTopic = (props: Props) => {
         </div>
       </Show>
     </div>
-    </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,10 +73,11 @@ 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="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 }}>
@@ -106,8 +110,31 @@ export const TopicView = (props: TopicProps) => {
               </div>
             </div>
           </div>
+        </div>
 
-        <div class="row floor floor--important">
+        <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>
@@ -124,20 +151,14 @@ export const TopicView = (props: TopicProps) => {
               </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(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()}>
@@ -157,7 +178,6 @@ export const TopicView = (props: TopicProps) => {
             </button>
           </p>
         </Show>
-        </div>
       </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;