From 50dfab425453b773090f687a856d2ce4c1412064 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 15 Nov 2022 00:17:20 +0300
Subject: [PATCH] Fixed topics page style

---
 src/components/Topic/Card.tsx       |  2 +-
 src/components/Views/AllAuthors.tsx | 10 ++++++----
 src/components/Views/AllTopics.tsx  | 20 +++++++++-----------
 src/styles/AllTopics.module.scss    |  7 ++++++-
 src/styles/app.scss                 | 12 ++----------
 5 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/Topic/Card.tsx b/src/components/Topic/Card.tsx
index 0b153cbe..d8fbff48 100644
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@@ -50,7 +50,7 @@ export const TopicCard = (props: TopicProps) => {
         [styles.topicInRow]: props.isTopicInRow
       }}
     >
-      <div classList={{ 'col-md-9 col-lg-7': !props.compact && !props.subscribeButtonBottom }}>
+      <div classList={{ 'col-md-9 col-lg-7 col-xl-6': !props.compact && !props.subscribeButtonBottom }}>
         <Show when={props.topic.title}>
           <h3 class={styles.topicTitle}>
             <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 99fedb64..1d0ba7bb 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -111,10 +111,12 @@ export const AllAuthorsView = (props: Props) => {
                       )}
                     </For>
                     <Show when={sortedAuthors().length > limit()}>
-                      <div class={styles.loadMoreContainer}>
-                        <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                          {t('More')}
-                        </button>
+                      <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>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index d94461f4..8161dfc5 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -63,15 +63,11 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
       <Show when={sortedTopics().length > 0}>
         <div class="shift-content">
           <div class="row">
-            <div class={clsx(styles.pageHeader, 'col-lg-9')}>
+            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-9')}>
               <h1>{t('Topics')}</h1>
-              <div class="col-lg-10">
-                <p>{t('Subscribe what you like to tune your personal feed')}</p>
-              </div>
-            </div>
+              <p>{t('Subscribe what you like to tune your personal feed')}</p>
 
-            <div class="col-12">
-              <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
+              <ul class={clsx(styles.viewSwitcher, 'view-switcher')}>
                 <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
                   <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
                     {t('By shouts')}
@@ -114,10 +110,12 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
                   )}
                 </For>
                 <Show when={sortedTopics().length > limit()}>
-                  <div class={styles.loadMoreContainer}>
-                    <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                      {t('More')}
-                    </button>
+                  <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>
               </>
diff --git a/src/styles/AllTopics.module.scss b/src/styles/AllTopics.module.scss
index c146af9e..83d4cd15 100644
--- a/src/styles/AllTopics.module.scss
+++ b/src/styles/AllTopics.module.scss
@@ -41,6 +41,11 @@
   text-align: center;
 
   .loadMoreButton {
-    padding: 0.6em 1.5em;
+    padding: 0.6em 5em;
+    width: 100%;
+
+    @include media-breakpoint-up(sm) {
+      width: auto;
+    }
   }
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 7bb2d4b7..fa894ebc 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -471,15 +471,9 @@ figcaption {
   flex-wrap: wrap;
   font-weight: bold;
   list-style: none;
-  margin: 2.4rem 0 0;
+  margin: 3.6rem 0 0;
   padding: 0;
 
-  .all-topics-page & {
-    @include media-breakpoint-down(sm) {
-      margin-left: 1.3rem;
-    }
-  }
-
   li {
     display: inline-block;
     margin-right: 1em;
@@ -628,12 +622,10 @@ figcaption {
     padding-left: divide($container-padding-x, 2);
     padding-right: divide($container-padding-x, 2);
 
-    /*
-    .row {
+    > .row {
       margin-left: divide(-$container-padding-x, 2);
       margin-right: divide(-$container-padding-x, 2);
     }
-    */
   }
 }