From 613617da0b99ad551937c2a6b4fb72f762e178b8 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 11 Nov 2022 13:22:07 +0300
Subject: [PATCH] Minor layout fixes

---
 src/components/Topic/Card.module.scss |   4 -
 src/components/Views/AllAuthors.tsx   | 140 +++++++++++++-------------
 src/components/Views/AllTopics.tsx    | 140 ++++++++++++--------------
 src/styles/app.scss                   |   3 +-
 4 files changed, 135 insertions(+), 152 deletions(-)

diff --git a/src/components/Topic/Card.module.scss b/src/components/Topic/Card.module.scss
index 0f499cdd..4d68d697 100644
--- a/src/components/Topic/Card.module.scss
+++ b/src/components/Topic/Card.module.scss
@@ -3,10 +3,6 @@
   margin-top: 3.2rem;
 
   .stats & {
-    @include media-breakpoint-down(sm) {
-      margin-left: 0;
-    }
-
     .topicDetailsItem {
       margin-bottom: 1.2rem;
     }
diff --git a/src/components/Views/AllAuthors.tsx b/src/components/Views/AllAuthors.tsx
index 576bc1b9..2ba33ed0 100644
--- a/src/components/Views/AllAuthors.tsx
+++ b/src/components/Views/AllAuthors.tsx
@@ -57,82 +57,80 @@ export const AllAuthorsView = (props: Props) => {
   // log.debug(getSearchParams())
 
   return (
-    <div class={styles.allTopicsPage}>
+    <div class={clsx(styles.allTopicsPage, 'container')}>
       <Show when={sortedAuthors().length > 0}>
-        <div class="wide-container">
-          <div class="shift-content container">
-            <div class="row">
-              <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
-                <h1>{t('Authors')}</h1>
-                <p>{t('Subscribe who you like to tune your personal feed')}</p>
-              </div>
+        <div class="shift-content">
+          <div class="row">
+            <div class={clsx(styles.pageHeader, 'col-lg-10 col-xl-8')}>
+              <h1>{t('Authors')}</h1>
+              <p>{t('Subscribe who you like to tune your personal feed')}</p>
             </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}>
-                      {t('By shouts')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: searchParams().by === 'rating' }}>
-                    <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
-                      {t('By rating')}
-                    </a>
-                  </li>
-                  <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
-                    <a href="/authors" onClick={handleClientRouteLinkClick}>
-                      {t('By alphabet')}
-                    </a>
-                  </li>
-                  <li class="view-switcher__search">
-                    <a href="/authors/search">
-                      <Icon name="search" />
-                      {t('Search author')}
-                    </a>
-                  </li>
-                </ul>
-                <Show
-                  when={!searchParams().by || searchParams().by === 'name'}
-                  fallback={() => (
-                    <div class={styles.stats}>
-                      <For each={sortedAuthors()}>
-                        {(author) => (
-                          <AuthorCard
-                            author={author}
-                            compact={false}
-                            hasLink={true}
-                            subscribed={subscribed(author.slug)}
-                            noSocialButtons={true}
-                            isAuthorsList={true}
-                          />
-                        )}
-                      </For>
-                    </div>
-                  )}
-                >
-                  <For each={sortedKeys()}>
-                    {(letter) => (
-                      <div class={clsx(styles.group, 'group')}>
-                        <h2>{letter}</h2>
-                        <div class="container">
-                          <div class="row">
-                            <For each={byLetter()[letter]}>
-                              {(author: Author) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
-                                  <div class="topic-title">
-                                    <a href={`/author/${author.slug}`}>{author.name}</a>
-                                  </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}>
+                    {t('By shouts')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'rating' }}>
+                  <a href="/authors?by=rating" onClick={handleClientRouteLinkClick}>
+                    {t('By rating')}
+                  </a>
+                </li>
+                <li classList={{ selected: !searchParams().by || searchParams().by === 'name' }}>
+                  <a href="/authors" onClick={handleClientRouteLinkClick}>
+                    {t('By alphabet')}
+                  </a>
+                </li>
+                <li class="view-switcher__search">
+                  <a href="/authors/search">
+                    <Icon name="search" />
+                    {t('Search author')}
+                  </a>
+                </li>
+              </ul>
+              <Show
+                when={!searchParams().by || searchParams().by === 'name'}
+                fallback={() => (
+                  <div class={styles.stats}>
+                    <For each={sortedAuthors()}>
+                      {(author) => (
+                        <AuthorCard
+                          author={author}
+                          compact={false}
+                          hasLink={true}
+                          subscribed={subscribed(author.slug)}
+                          noSocialButtons={true}
+                          isAuthorsList={true}
+                        />
+                      )}
+                    </For>
+                  </div>
+                )}
+              >
+                <For each={sortedKeys()}>
+                  {(letter) => (
+                    <div class={clsx(styles.group, 'group')}>
+                      <h2>{letter}</h2>
+                      <div class="container">
+                        <div class="row">
+                          <For each={byLetter()[letter]}>
+                            {(author: Author) => (
+                              <div class={clsx(styles.topic, 'topic col-sm-6 col-md-3')}>
+                                <div class="topic-title">
+                                  <a href={`/author/${author.slug}`}>{author.name}</a>
                                 </div>
-                              )}
-                            </For>
-                          </div>
+                              </div>
+                            )}
+                          </For>
                         </div>
                       </div>
-                    )}
-                  </For>
-                </Show>
-              </div>
+                    </div>
+                  )}
+                </For>
+              </Show>
             </div>
           </div>
         </div>
diff --git a/src/components/Views/AllTopics.tsx b/src/components/Views/AllTopics.tsx
index 618811a4..687385eb 100644
--- a/src/components/Views/AllTopics.tsx
+++ b/src/components/Views/AllTopics.tsx
@@ -54,90 +54,80 @@ export const AllTopicsView = (props: AllTopicsViewProps) => {
   const subscribed = (s) => Boolean(session()?.news?.topics && session()?.news?.topics?.includes(s || ''))
 
   return (
-    <div class={styles.allTopicsPage}>
+    <div class={clsx(styles.allTopicsPage, 'container')}>
       <Show when={sortedTopics().length > 0}>
-        <div class="wide-container">
-          <div class="shift-content">
-            <div class="row">
-              <div class={clsx(styles.pageHeader, 'col-lg-9')}>
-                <h1>{t('Topics')}</h1>
-                <div class="col-lg-10">
-                  <p>{t('Subscribe what you like to tune your personal feed')}</p>
-                </div>
+        <div class="shift-content">
+          <div class="row">
+            <div class={clsx(styles.pageHeader, 'col-lg-9')}>
+              <h1>{t('Topics')}</h1>
+              <div class="col-lg-10">
+                <p>{t('Subscribe what you like to tune your personal feed')}</p>
               </div>
             </div>
 
-            <div class="row">
-              <div class="col">
-                <div class="row">
-                  <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
-                    <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
-                      <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
-                        {t('By shouts')}
-                      </a>
-                    </li>
-                    <li classList={{ selected: searchParams().by === 'authors' }}>
-                      <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
-                        {t('By authors')}
-                      </a>
-                    </li>
-                    <li classList={{ selected: searchParams().by === 'title' }}>
-                      <a
-                        href="/topics?by=title"
-                        onClick={(ev) => {
-                          // just an example
-                          ev.preventDefault()
-                          changeSearchParam('by', 'title')
-                        }}
-                      >
-                        {t('By alphabet')}
-                      </a>
-                    </li>
-                    <li class="view-switcher__search">
-                      <a href="/topic/search">
-                        <Icon name="search" />
-                        {t('Search topic')}
-                      </a>
-                    </li>
-                  </ul>
-                </div>
+            <div class="col-12">
+              <ul class={clsx(styles.viewSwitcher, 'view-switcher col-lg-10')}>
+                <li classList={{ selected: searchParams().by === 'shouts' || !searchParams().by }}>
+                  <a href="/topics?by=shouts" onClick={handleClientRouteLinkClick}>
+                    {t('By shouts')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'authors' }}>
+                  <a href="/topics?by=authors" onClick={handleClientRouteLinkClick}>
+                    {t('By authors')}
+                  </a>
+                </li>
+                <li classList={{ selected: searchParams().by === 'title' }}>
+                  <a
+                    href="/topics?by=title"
+                    onClick={(ev) => {
+                      // just an example
+                      ev.preventDefault()
+                      changeSearchParam('by', 'title')
+                    }}
+                  >
+                    {t('By alphabet')}
+                  </a>
+                </li>
+                <li class="view-switcher__search">
+                  <a href="/topic/search">
+                    <Icon name="search" />
+                    {t('Search topic')}
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
 
-                <Show
-                  when={searchParams().by === 'title'}
-                  fallback={() => (
-                    <div class={cardStyles.stats}>
-                      <For each={sortedTopics()}>
+          <Show
+            when={searchParams().by === 'title'}
+            fallback={() => (
+              <For each={sortedTopics()}>
+                {(topic) => <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />}
+              </For>
+            )}
+          >
+            <For each={sortedKeys()}>
+              {(letter) => (
+                <div class={clsx(styles.group, 'group')}>
+                  <h2>{letter}</h2>
+                  <div class="container">
+                    <div class="row">
+                      <For each={byLetter()[letter]}>
                         {(topic) => (
-                          <TopicCard topic={topic} compact={false} subscribed={subscribed(topic.slug)} />
+                          <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>
-                  )}
-                >
-                  <For each={sortedKeys()}>
-                    {(letter) => (
-                      <div class={clsx(styles.group, 'group')}>
-                        <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>
-                        </div>
-                      </div>
-                    )}
-                  </For>
-                </Show>
-              </div>
-            </div>
-          </div>
+                  </div>
+                </div>
+              )}
+            </For>
+          </Show>
         </div>
       </Show>
     </div>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index f8566695..18ef91a6 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -660,11 +660,10 @@ astro-island {
 
 .container {
   max-width: 1400px;
-  padding: 0;
   width: auto;
 
   @include media-breakpoint-down(sm) {
-    padding: 0 $container-padding-x * 0.5;
+    //padding: 0 $container-padding-x * 0.5;
   }
 }