Fix/all topics page (#432)

* Fixed topics page * linted * Topics list fixes * Revert styles for user descriptions * Fixed author badge in the following modal --------- Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
2024-05-03 11:49:05 +03:00 · 2024-05-03 11:49:05 +03:00 · 6aa84c17be
commit 6aa84c17be
parent ad2f6be1ae
6 changed files with 94 additions and 36 deletions
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@ -532,7 +532,7 @@
  "resend confirmation link": "отправить ссылку ещё раз",
  "shout": "пост",
  "shout not found": "публикация не найдена",
-  "shoutsWithCount": "{count} {count, plural, one {пост} few {поста}  other {постов}}",
+  "shoutsWithCount": "{count} {count, plural, one {публикация} few {публикации}  other {публикаций}}",
  "sign in": "войти",
  "sign up or sign in": "зарегистрироваться или войти",
  "sign up": "зарегистрироваться",
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@ -27,6 +27,7 @@ type Props = {
  inviteView?: boolean
  onInvite?: (id: number) => void
  selected?: boolean
+  subscriptionsMode?: boolean
 }
 export const AuthorBadge = (props: Props) => {
  const { mediaMatches } = useMediaQuery()
@ -114,7 +115,7 @@ export const AuthorBadge = (props: Props) => {
                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
              </Match>
            </Switch>
-            <Show when={props.author?.stat}>
+            <Show when={props.author?.stat && !props.subscriptionsMode}>
              <div class={styles.bio}>
                <Show when={props.author?.stat.shouts > 0}>
                  <div>{t('PublicationsWithCount', { count: props.author.stat?.shouts ?? 0 })}</div>
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@ -312,9 +312,9 @@ export const AuthorCard = (props: Props) => {
                    <For each={authorSubs()}>
                      {(subscription) =>
                        isAuthor(subscription) ? (
-                          <AuthorBadge author={subscription} />
+                          <AuthorBadge author={subscription} subscriptionsMode={true} />
                        ) : (
-                          <TopicBadge topic={subscription} />
+                          <TopicBadge topic={subscription} subscriptionsMode={true} />
                        )
                      }
                    </For>
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@ -1,12 +1,11 @@
 .TopicBadge {
-  margin-bottom: 2rem;
+  margin-bottom: 4.8rem;
  gap: 1rem;

  .content {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
-    margin-bottom: .8rem;
  }

  .basicInfo {
@ -46,18 +45,64 @@

  .info {
    @include font-size(1.4rem);
-
    border: none;
-    display: flex;
-    flex-direction: column;
+    //display: flex;
+    //flex-direction: column;

    &:hover {
      background: unset;
+      color: inherit;
+
+      .title {
+        background: var(--background-color-invert);
+        color: var(--default-color-invert);
+      }
+    }
+
+    .title {
+      @include font-size(2.2rem);
+      font-weight: bold;
+    }
+
+    .description {
+      @include font-size(1.6rem);
+      line-height: 1.4;
+      margin: 0.8rem 0;
+      -webkit-line-clamp: 2;
+    }
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    margin-bottom: -1rem;
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
+  }
+}
+
+.TopicBadgeSubscriptionsMode {
+  margin-bottom: 2rem;
+
+  .content {
+    margin-bottom: 0.8rem;
+  }
+
+  .info {
+    &:hover {
+      .title {
+        background-color: var(--blue-500);
+        color: var(--white-500);
+      }
    }

    .title {
      @include font-size(1.4rem);
-
      font-weight: 500;
      line-height: 1em;
      color: var(--blue-500);
@ -66,7 +111,9 @@

    .description {
      color: var(--black-400);
+      @include font-size(1.2rem);
      font-weight: 500;
+      margin: 0;
    }
  }

@ -88,7 +135,6 @@

  color: var(--secondary-color);
  display: flex;
-  margin: 0 0 1em;

  @include media-breakpoint-down(md) {
    flex-wrap: wrap;
@ -101,6 +147,7 @@
  .statsItem {
    @include font-size(1.4rem);

+    font-weight: 500;
    margin-right: 1.6rem;
    white-space: nowrap;

--- a/src/components/Topic/TopicBadge/TopicBadge.tsx
+++ b/src/components/Topic/TopicBadge/TopicBadge.tsx
@ -15,6 +15,7 @@ type Props = {
  topic: Topic
  minimizeSubscribeButton?: boolean
  showStat?: boolean
+  subscriptionsMode?: boolean
 }

 export const TopicBadge = (props: Props) => {
@ -47,23 +48,27 @@ export const TopicBadge = (props: Props) => {
    lang() === 'en' ? capitalize(props.topic.slug.replaceAll('-', ' ')) : props.topic.title

  return (
-    <div class={styles.TopicBadge}>
+    <div class={clsx(styles.TopicBadge, { [styles.TopicBadgeSubscriptionsMode]: props.subscriptionsMode })}>
      <div class={styles.content}>
        <div class={styles.basicInfo}>
-          <a
-            href={`/topic/${props.topic.slug}`}
-            class={clsx(styles.picture, {
-              [styles.withImage]: props.topic.pic,
-              [styles.smallSize]: isMobileView(),
-            })}
-            style={
-              props.topic.pic && {
-                'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+          <Show when={props.subscriptionsMode}>
+            <a
+              href={`/topic/${props.topic.slug}`}
+              class={clsx(styles.picture, {
+                [styles.withImage]: props.topic.pic,
+                [styles.smallSize]: isMobileView(),
+              })}
+              style={
+                props.topic.pic && {
+                  'background-image': `url('${getImageUrl(props.topic.pic, { width: 40, height: 40 })}')`,
+                }
              }
-            }
-          />
+            />
+          </Show>
+
          <a href={`/topic/${props.topic.slug}`} class={styles.info}>
            <span class={styles.title}>{title()}</span>
+
            <Show
              when={props.topic.body}
              fallback={
@ -86,18 +91,23 @@ export const TopicBadge = (props: Props) => {
          />
        </div>
      </div>
-      <div class={styles.stats}>
-        <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
-        <span class={styles.statsItem}>{t('authorsWithCount', { count: props.topic?.stat?.authors })}</span>
-        <span class={styles.statsItem}>
-          {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
-        </span>
-        <Show when={props.topic?.stat?.comments}>
+
+      <Show when={!props.subscriptionsMode}>
+        <div class={styles.stats}>
+          <span class={styles.statsItem}>{t('shoutsWithCount', { count: props.topic?.stat?.shouts })}</span>
          <span class={styles.statsItem}>
-            {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            {t('authorsWithCount', { count: props.topic?.stat?.authors })}
          </span>
-        </Show>
-      </div>
+          <span class={styles.statsItem}>
+            {t('FollowersWithCount', { count: props.topic?.stat?.followers })}
+          </span>
+          <Show when={props.topic?.stat?.comments}>
+            <span class={styles.statsItem}>
+              {t('CommentsWithCount', { count: props.topic?.stat?.comments ?? 0 })}
+            </span>
+          </Show>
+        </div>
+      </Show>
    </div>
  )
 }
--- a/src/components/Views/AllTopics/AllTopics.tsx
+++ b/src/components/Views/AllTopics/AllTopics.tsx
@ -82,7 +82,7 @@ export const AllTopics = (props: Props) => {

  const AllTopicsHead = () => (
    <div class="row">
-      <div class="col-lg-20 col-xl-18">
+      <div class="col-lg-18 col-xl-15">
        <h1>{t('Topics')}</h1>
        <p>{t('Subscribe what you like to tune your personal feed')}</p>

@ -131,7 +131,7 @@ export const AllTopics = (props: Props) => {

            <Show when={filteredResults().length > 0}>
              <Show when={searchParams().by === 'title'}>
-                <div class="col-lg-20 col-xl-18">
+                <div class="col-lg-18 col-xl-15">
                  <ul class={clsx('nodash', styles.alphabet)}>
                    <For each={ALPHABET}>
                      {(letter, index) => (
@ -182,7 +182,7 @@ export const AllTopics = (props: Props) => {

              <Show when={searchParams().by && searchParams().by !== 'title'}>
                <div class="row">
-                  <div class="col-lg-20 col-xl-18 py-4">
+                  <div class="col-lg-18 col-xl-15 py-4">
                    <For each={filteredResults().slice(0, limit())}>
                      {(topic) => (
                        <>