From e645fae8502bcc1c5b41d8194dfd2de0e06eec14 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 15 Nov 2022 00:58:33 +0300
Subject: [PATCH] Fixed all topics and all authors style

---
 src/components/Author/Card.module.scss |  5 +-
 src/components/Views/AllAuthors.tsx    | 68 ++++++++++++++------------
 src/components/Views/AllTopics.tsx     | 22 +++++----
 src/styles/AllTopics.module.scss       |  4 +-
 4 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/Author/Card.module.scss b/src/components/Author/Card.module.scss
index b51d4c13..8c26fd24 100644
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@@ -52,10 +52,7 @@
 .authorSubscribe {
   align-items: center;
   display: flex;
-
-  @include media-breakpoint-down(lg) {
-    padding: 0 0 0 42px;
-  }
+  padding: 0 0 0 42px;
 
   a {
     background: #f7f7f7;
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 1d0ba7bb..93a46f36 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -64,13 +64,10 @@ export const AllAuthorsView = (props: Props) => {
       <Show when={sortedAuthors().length > 0}>
         <div class="shift-content">
           <div class="row">
-            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
+            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
               <h1>{t('Authors')}</h1>
               <p>{t('Subscribe who you like to tune your personal feed')}</p>
-            </div>
-          </div>
-          <div class="row">
-            <div class="col-lg-10 col-xl-8">
+
               <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
                 <li classList={{ selected: searchParams().by === 'shouts' }}>
                   <a href="/authors?by=shouts" onClick={handleClientRouteLinkClick}>
@@ -94,10 +91,15 @@ export const AllAuthorsView = (props: Props) => {
                   </a>
                 </li>
               </ul>
-              <Show
-                when={!searchParams().by || searchParams().by === 'name'}
-                fallback={() => (
-                  <div class={styles.stats}>
+            </div>
+          </div>
+
+          <Show
+            when={!searchParams().by || searchParams().by === 'name'}
+            fallback={() => (
+              <div class={styles.stats}>
+                <div class="row">
+                  <div class="col-lg-10 col-xl-9">
                     <For each={sortedAuthors().slice(0, limit())}>
                       {(author) => (
                         <AuthorCard
@@ -110,27 +112,31 @@ export const AllAuthorsView = (props: Props) => {
                         />
                       )}
                     </For>
-                    <Show when={sortedAuthors().length > limit()}>
-                      <div class="row">
-                        <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
-                          <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                            {t('More')}
-                          </button>
-                        </div>
-                      </div>
-                    </Show>
                   </div>
-                )}
-              >
-                <For each={sortedKeys()}>
-                  {(letter) => (
-                    <div class={clsx(styles.group, 'group')}>
-                      <h2>{letter}</h2>
-                      <div class="container">
+                </div>
+                <Show when={sortedAuthors().length > limit()}>
+                  <div class="row">
+                    <div class={clsx(styles.loadMoreContainer, 'col-12 col-md-10')}>
+                      <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
+                        {t('More')}
+                      </button>
+                    </div>
+                  </div>
+                </Show>
+              </div>
+            )}
+          >
+            <For each={sortedKeys()}>
+              {(letter) => (
+                <div class={clsx(styles.group, 'group')}>
+                  <h2>{letter}</h2>
+                  <div class="container">
+                    <div class="row">
+                      <div class="col-lg-10">
                         <div class="row">
                           <For each={byLetter()[letter]}>
                             {(author: Author) => (
-                              <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
+                              <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
                                 <div class="topic-title">
                                   <a href={`/author/${author.slug}`}>{author.name}</a>
                                 </div>
@@ -140,11 +146,11 @@ export const AllAuthorsView = (props: Props) => {
                         </div>
                       </div>
                     </div>
-                  )}
-                </For>
-              </Show>
-            </div>
-          </div>
+                  </div>
+                </div>
+              )}
+            </For>
+          </Show>
         </div>
       </Show>
     </div>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index 8161dfc5..fd676ba6 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -127,15 +127,19 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                   <h2>{letter}</h2>
                   <div class="container">
                     <div class="row">
-                      <For each={byLetter()[letter]}>
-                        {(topic) => (
-                          <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
-                            <div class="topic-title">
-                              <a href={`/topic/${topic.slug}`}>{topic.title}</a>
-                            </div>
-                          </div>
-                        )}
-                      </For>
+                      <div class="col-lg-10">
+                        <div class="row">
+                          <For each={byLetter()[letter]}>
+                            {(topic) => (
+                              <div class={clsx(styles.topic, 'topic col-sm-6 col-md-4')}>
+                                <div class="topic-title">
+                                  <a href={`/topic/${topic.slug}`}>{topic.title}</a>
+                                </div>
+                              </div>
+                            )}
+                          </For>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss
index 83d4cd15..4129e8f2 100644
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@@ -17,9 +17,7 @@
     }
 
     .topic {
-      @include media-breakpoint-down(md) {
-        margin-top: 1.6rem;
-      }
+      margin-bottom: 1.6rem;
 
       @include media-breakpoint-down(sm) {
         margin-left: 2.6rem;