all-topics-styling-fix

src/components/Views/AllTopics/AllTopics.module.scss

@@ -1,5 +1,4 @@
-.allTopicsPage {
+.group {
-  .group {
   @include font-size(1.6rem);
 
   margin: 3em 0 9.6rem;
@@ -16,22 +15,22 @@
       margin-bottom: 1.6rem;
     }
   }
+}
 
-    .topic {
+.topicTitle {
   margin-bottom: 2.4rem;
-    }
+}
-  }
 
-  .container {
+.container {
   width: auto;
 
   .search-input {
     display: inline-block;
     width: 100px !important;
   }
-  }
 }
 
+
 .loadMoreContainer {
   margin-top: 48px;
   text-align: center;

src/components/Views/AllTopics/AllTopics.tsx

@@ -7,7 +7,6 @@ import { useLocalize } from '~/context/localize'
 import { useTopics } from '~/context/topics'
 import type { Topic } from '~/graphql/schema/core.gen'
 import { dummyFilter } from '~/lib/dummyFilter'
-import { capitalize } from '~/utils/capitalize'
 import { scrollHandler } from '~/utils/scroll'
 import { TopicBadge } from '../../Topic/TopicBadge'
 import styles from './AllTopics.module.scss'
@@ -57,10 +56,6 @@ export const AllTopics = (props: Props) => {
     return keys
   })
 
-  // limit/offset based pagination aka 'show more' logic
-  const [limit, setLimit] = createSignal(TOPICS_PER_PAGE)
-  const showMore = () => setLimit((oldLimit) => oldLimit + TOPICS_PER_PAGE)
-
   // filter
   const [searchQuery, setSearchQuery] = createSignal('')
   const [filteredResults, setFilteredResults] = createSignal<Topic[]>([])
@@ -94,16 +89,7 @@ export const AllTopics = (props: Props) => {
       </div>
     </div>
   )
-  return (
+  const AllTopicAlphabeticallyHead = () => (
-    <>
-      <h1>{t('Themes and plots')}</h1>
-      <Show when={Boolean(filteredResults())} fallback={<Loading />}>
-        <div class="row">
-          <div class="col-md-19 offset-md-5">
-            <AllTopicsHead />
-
-            <Show when={filteredResults().length > 0}>
-              <Show when={searchParams?.by === 'title'}>
     <div class="col-lg-18 col-xl-15">
       <ul class={clsx('nodash', styles.alphabet)}>
         <For each={Array.from(alphabet())}>
@@ -125,7 +111,8 @@ export const AllTopics = (props: Props) => {
         </For>
       </ul>
     </div>
-
+  )
+  const AllTopicAlphabetically = () => (
     <For each={sortedKeys()}>
       {(letter) => (
         <div class={clsx(styles.group, 'group')}>
@@ -135,13 +122,11 @@ export const AllTopics = (props: Props) => {
               <div class="row">
                 <For each={byLetter()[letter]}>
                     {(topic) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
+                      <div class={clsx(styles.topicTitle, 'col-sm-12 col-md-8')}>
-                                  <A href={`/topic/${topic.slug}`}>
+                        <A href={`/topic/${topic.slug}`}>{topic.title || topic.slug}</A>
-                                    {lang() === 'en'
+                        <Show when={topic.stat?.shouts || 0}>
-                                      ? capitalize(topic.slug.replaceAll('-', ' '))
-                                      : topic.title}
-                                  </A>
                           <span class={styles.articlesCounter}>{topic.stat?.shouts || 0}</span>
+                        </Show>
                       </div>
                     )}
                 </For>
@@ -151,29 +136,30 @@ export const AllTopics = (props: Props) => {
         </div>
       )}
     </For>
+  )
+  return (
+    <>
+      <Show when={Boolean(filteredResults())} fallback={<Loading />}>
+        <div class="row">
+          <div class="col-md-19 offset-md-5">
+            <AllTopicsHead />
+
+            <Show when={filteredResults().length > 0}>
+              <Show when={searchParams?.by === 'title'}>
+                <AllTopicAlphabeticallyHead />
+                <AllTopicAlphabetically />
               </Show>
 
               <Show when={searchParams?.by && searchParams?.by !== 'title'}>
                 <div class="row">
                   <div class="col-lg-18 col-xl-15 py-4">
-                    <For each={filteredResults().slice(0, limit())}>
+                    <For each={filteredResults()}>
-                      {(topic) => (
+                      {(topic) => <TopicBadge topic={topic} showStat={true} />}
-                        <>
-                          <TopicBadge topic={topic} showStat={true} />
-                        </>
-                      )}
                     </For>
                   </div>
                 </div>
               </Show>
 
-              <Show when={filteredResults().length > limit() && searchParams?.by !== 'title'}>
-                <div class={clsx(styles.loadMoreContainer, 'col-24 col-md-20 col-lg-14 offset-md-2')}>
-                  <button class={clsx('button', styles.loadMoreButton)} onClick={showMore}>
-                    {t('Load more')}
-                  </button>
-                </div>
-              </Show>
             </Show>
           </div>
         </div>

src/components/_shared/PageLayout.tsx

@@ -46,7 +46,6 @@ export const PageLayout = (props: PageLayoutProps) => {
         })
       : imageUrl
   )
-  const ogTitle = createMemo(() => t(props.title))
   const description = createMemo(() => (props.desc ? t(props.desc) : ''))
   const keypath = createMemo(() => (props.key || loc?.pathname.split('/')[0]) as keyof typeof ruKeywords)
   const keywords = createMemo(
@@ -58,7 +57,7 @@ export const PageLayout = (props: PageLayoutProps) => {
   createEffect(() => props.scrollToComments?.(scrollToComments()))
   return (
     <>
-      <Title>{props.title}</Title>
+      <Title>{props.article?.title || t(props.title)}</Title>
       <Header
         slug={props.slug}
         title={props.headerTitle}
@@ -70,12 +69,12 @@ export const PageLayout = (props: PageLayoutProps) => {
       <Meta name="descprition" content={description() || ''} />
       <Meta name="keywords" content={keywords()} />
       <Meta name="og:type" content="article" />
-      <Meta name="og:title" content={ogTitle() || ''} />
+      <Meta name="og:title" content={props.article?.title || t(props.title) || ''} />
       <Meta name="og:image" content={ogImage() || ''} />
       <Meta name="twitter:image" content={ogImage() || ''} />
       <Meta name="og:description" content={description() || ''} />
       <Meta name="twitter:card" content="summary_large_image" />
-      <Meta name="twitter:title" content={ogTitle() || ''} />
+      <Meta name="twitter:title" content={props.article?.title || t(props.title) || ''} />
       <Meta name="twitter:description" content={description() || ''} />
       <main
         class={clsx('main-content', {

src/routes/topic/(all-topics).tsx

@@ -25,7 +25,8 @@ export default (props: RouteSectionProps<{ topics: Topic[] }>) => {
     <PageLayout
       withPadding={true}
       key="topics"
-      title={`${t('Discours')} :: ${t('All topics')}`}
+      title='Themes and plots'
+      headerTitle={`${t('Discours')} :: ${t('All topics')}`}
       desc="Thematic table of contents of the magazine. Here you can find all the topics that the community authors wrote about"
     >
       <ReactionsProvider>