all-topics-styling-fix

2024-07-09 12:56:56 +03:00 · 2024-07-09 12:56:56 +03:00 · 7e3499fbb3
commit 7e3499fbb3
parent e3ac3cc406
4 changed files with 81 additions and 96 deletions
--- a/src/components/Views/AllTopics/AllTopics.module.scss
+++ b/src/components/Views/AllTopics/AllTopics.module.scss
@ -1,37 +1,36 @@
-.allTopicsPage {
-  .group {
-    @include font-size(1.6rem);
+.group {
+  @include font-size(1.6rem);

-    margin: 3em 0 9.6rem;
+  margin: 3em 0 9.6rem;

-    @include media-breakpoint-down(sm) {
-      margin-bottom: 6.4rem;
-    }
-
-    h2 {
-      margin-bottom: 3.2rem;
-      text-transform: capitalize;
-
-      @include media-breakpoint-down(sm) {
-        margin-bottom: 1.6rem;
-      }
-    }
-
-    .topic {
-      margin-bottom: 2.4rem;
-    }
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 6.4rem;
  }

-  .container {
-    width: auto;
+  h2 {
+    margin-bottom: 3.2rem;
+    text-transform: capitalize;

-    .search-input {
-      display: inline-block;
-      width: 100px !important;
+    @include media-breakpoint-down(sm) {
+      margin-bottom: 1.6rem;
    }
  }
 }

+.topicTitle {
+  margin-bottom: 2.4rem;
+}
+
+.container {
+  width: auto;
+
+  .search-input {
+    display: inline-block;
+    width: 100px !important;
+  }
+}
+
+
 .loadMoreContainer {
  margin-top: 48px;
  text-align: center;
--- a/src/components/Views/AllTopics/AllTopics.tsx
+++ b/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,9 +89,56 @@ export const AllTopics = (props: Props) => {
      </div>
    </div>
  )
+  const AllTopicAlphabeticallyHead = () => (
+    <div class="col-lg-18 col-xl-15">
+      <ul class={clsx('nodash', styles.alphabet)}>
+        <For each={Array.from(alphabet())}>
+          {(letter, index) => (
+            <li>
+              <Show when={letter in byLetter()} fallback={letter}>
+                <A
+                  href={`/topic?by=title#letter-${index()}`}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    scrollHandler(`letter-${index()}`)
+                  }}
+                >
+                  {letter}
+                </A>
+              </Show>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  )
+  const AllTopicAlphabetically = () => (
+    <For each={sortedKeys()}>
+      {(letter) => (
+        <div class={clsx(styles.group, 'group')}>
+          <h2 id={`letter-${alphabet().indexOf(letter)}`}>{letter}</h2>
+          <div class="row">
+            <div class="col-lg-20">
+              <div class="row">
+                <For each={byLetter()[letter]}>
+                    {(topic) => (
+                      <div class={clsx(styles.topicTitle, 'col-sm-12 col-md-8')}>
+                        <A href={`/topic/${topic.slug}`}>{topic.title || topic.slug}</A>
+                        <Show when={topic.stat?.shouts || 0}>
+                          <span class={styles.articlesCounter}>{topic.stat?.shouts || 0}</span>
+                        </Show>
+                      </div>
+                    )}
+                </For>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </For>
+  )
  return (
    <>
-      <h1>{t('Themes and plots')}</h1>
      <Show when={Boolean(filteredResults())} fallback={<Loading />}>
        <div class="row">
          <div class="col-md-19 offset-md-5">
@ -104,76 +146,20 @@ export const AllTopics = (props: Props) => {

            <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())}>
-                      {(letter, index) => (
-                        <li>
-                          <Show when={letter in byLetter()} fallback={letter}>
-                            <A
-                              href={`/topic?by=title#letter-${index()}`}
-                              onClick={(event) => {
-                                event.preventDefault()
-                                scrollHandler(`letter-${index()}`)
-                              }}
-                            >
-                              {letter}
-                            </A>
-                          </Show>
-                        </li>
-                      )}
-                    </For>
-                  </ul>
-                </div>
-
-                <For each={sortedKeys()}>
-                  {(letter) => (
-                    <div class={clsx(styles.group, 'group')}>
-                      <h2 id={`letter-${alphabet().indexOf(letter)}`}>{letter}</h2>
-                      <div class="row">
-                        <div class="col-lg-20">
-                          <div class="row">
-                            <For each={byLetter()[letter]}>
-                              {(topic) => (
-                                <div class={clsx(styles.topic, 'topic col-sm-12 col-md-8')}>
-                                  <A href={`/topic/${topic.slug}`}>
-                                    {lang() === 'en'
-                                      ? capitalize(topic.slug.replaceAll('-', ' '))
-                                      : topic.title}
-                                  </A>
-                                  <span class={styles.articlesCounter}>{topic.stat?.shouts || 0}</span>
-                                </div>
-                              )}
-                            </For>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </For>
+                <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())}>
-                      {(topic) => (
-                        <>
-                          <TopicBadge topic={topic} showStat={true} />
-                        </>
-                      )}
+                    <For each={filteredResults()}>
+                      {(topic) => <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>
--- a/src/components/_shared/PageLayout.tsx
+++ b/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', {
--- a/src/routes/topic/(all-topics).tsx
+++ b/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>