Fixed topics page

public/locales/ru/translation.json

@@ -531,7 +531,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": "зарегистрироваться",

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -1,12 +1,12 @@
 .TopicBadge {
-  margin-bottom: 2rem;
+  margin-bottom: 4.8rem;
   gap: 1rem;
 
   .content {
     align-items: flex-start;
     display: flex;
     flex-direction: row;
-    margin-bottom: .8rem;
+    margin-bottom: 1.6rem;
   }
 
   .basicInfo {
@@ -17,33 +17,6 @@
     gap: 1rem;
   }
 
-  .picture {
-    display: block;
-    width: 40px;
-    height: 40px;
-    min-width: 40px;
-    border-radius: 8px;
-    background-color: var(--black-50);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjUgMTQuMjVDMTkuOTE0MSAxNC4yNSAyMC4yNSAxNC41ODU5IDIwLjI1IDE1QzIwLjI1IDE1LjQxNDEgMTkuOTE0MSAxNS43NSAxOS41IDE1Ljc1SDE1Ljc1VjE5LjVDMTUuNzUgMTkuOTE0MSAxNS40MTQxIDIwLjI1IDE1IDIwLjI1QzE0LjU4NTkgMjAuMjUgMTQuMjUgMTkuOTE0MSAxNC4yNSAxOS41VjE1Ljc1SDkuNzVWMTkuNUM5Ljc1IDE5LjkxNDEgOS40MTQwNiAyMC4yNSA5IDIwLjI1QzguNTg1OTQgMjAuMjUgOC4yNSAxOS45MTQxIDguMjUgMTkuNVYxNS43NUg0LjVDNC4wODU5NCAxNS43NSAzLjc1IDE1LjQxNDEgMy43NSAxNUMzLjc1IDE0LjU4NTkgNC4wODU5NCAxNC4yNSA0LjUgMTQuMjVIOC4yNVY5Ljc1SDQuNUM0LjA4NTk0IDkuNzUgMy43NSA5LjQxNDA2IDMuNzUgOUMzLjc1IDguNTg1OTQgNC4wODU5NCA4LjI1IDQuNSA4LjI1SDguMjVWNC41QzguMjUgNC4wODU5NCA4LjU4NTk0IDMuNzUgOSAzLjc1QzkuNDE0MDYgMy43NSA5Ljc1IDQuMDg1OTQgOS43NSA0LjVWOC4yNUgxNC4yNVY0LjVDMTQuMjUgNC4wODU5NCAxNC41ODU5IDMuNzUgMTUgMy43NUMxNS40MTQxIDMuNzUgMTUuNzUgNC4wODU5NCAxNS43NSA0LjVWOC4yNUgxOS41QzE5LjkxNDEgOC4yNSAyMC4yNSA4LjU4NTk0IDIwLjI1IDlDMjAuMjUgOS40MTQwNiAxOS45MTQxIDkuNzUgMTkuNSA5Ljc1SDE1Ljc1VjE0LjI1SDE5LjVaTTkuNzUgMTQuMjVIMTQuMjVWOS43NUg5Ljc1VjE0LjI1WiIgZmlsbD0iIzlGQTFBNyIvPgo8L3N2Zz4K');
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    border: none;
-
-    &.smallSize {
-      width: 32px;
-      height: 32px;
-      min-width: 32px;
-    }
-
-    &:hover {
-      background-color: var(--black-50);
-    }
-
-    &.withImage {
-      background-size: cover;
-    }
-  }
-
   .info {
     @include font-size(1.4rem);
 
@@ -56,17 +29,15 @@
     }
 
     .title {
-      @include font-size(1.4rem);
+      @include font-size(2.2rem);
-
+      font-weight: bold;
-      font-weight: 500;
+      margin-bottom: 0.8rem;
-      line-height: 1em;
-      color: var(--blue-500);
-      text-transform: uppercase;
     }
 
     .description {
-      color: var(--black-400);
+      @include font-size(1.6rem);
-      font-weight: 500;
+      line-height: 1.4;
+      -webkit-line-clamp: 3;
     }
   }
 
@@ -88,7 +59,6 @@
 
   color: var(--secondary-color);
   display: flex;
-  margin: 0 0 1em;
 
   @include media-breakpoint-down(md) {
     flex-wrap: wrap;
@@ -100,7 +70,7 @@
 
   .statsItem {
     @include font-size(1.4rem);
-
+    font-weight: 500;
     margin-right: 1.6rem;
     white-space: nowrap;
 

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -57,18 +57,6 @@ export const TopicBadge = (props: Props) => {
     <div class={styles.TopicBadge}>
       <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 })}')`,
-              }
-            }
-          />
           <a href={`/topic/${props.topic.slug}`} class={styles.info}>
             <span class={styles.title}>{title()}</span>
             <Show

src/components/Views/AllTopics/AllTopics.tsx

@@ -84,7 +84,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>
 
@@ -133,7 +133,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) => (
@@ -184,7 +184,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) => (
                         <>