Fixed topic cards style

src/components/Feed/Beside.module.scss

@@ -121,7 +121,6 @@ button.follow {
 }
 
 .shoutCardContainer {
-  display: flex;
   order: 1;
 }
 

src/components/Feed/Beside.tsx

@@ -71,6 +71,7 @@ export const Beside = (props: BesideProps) => {
                             isTopicInRow={props.isTopicInRow}
                             iconButton={props.iconButton}
                             showPublications={true}
+                            isCardMode={true}
                           />
                         </Show>
                         <Show when={props.wrapper === 'author'}>

src/components/Topic/Card.module.scss

@@ -1,5 +1,13 @@
+.topicContainer {
+  border-bottom: 1px solid #e1e1e1;
+
+  li:last-child & {
+    border: none;
+  }
+}
+
 .topic {
-  align-items: flex-start;
+  align-items: baseline;
   margin-top: 3.2rem;
 
   .stats & {
@@ -50,25 +58,22 @@
 }
 
 .topicDescription {
-  @include font-size(1.6rem);
+  @include font-size(1.4rem);
+  font-weight: 500;
   color: #696969;
-  margin: 0.5em 0 1.6rem;
+  line-height: 1.3;
+  margin: 0.2rem 0 1.6rem;
 
-  &.compact {
-    font-size: medium;
-  }
-}
-
-.topicDescriptionShort {
+  &.topicDescriptionShort {
     display: block;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
+  }
 }
 
 .topicDetails {
-  @include font-size(1.7rem);
-
+  @include font-size(1.6rem);
   color: #9fa1a7;
   display: flex;
   margin-bottom: 1em;
@@ -79,8 +84,7 @@
 }
 
 .topicDetailsItem {
-  @include font-size(1.5rem);
-
+  @include font-size(1.4rem);
   margin-right: 1.6rem;
   white-space: nowrap;
 
@@ -102,6 +106,8 @@
 }
 
 .controlContainer {
+  margin-bottom: 1.6rem;
+
   @include media-breakpoint-up(sm) {
     text-align: right;
   }
@@ -109,14 +115,10 @@
 
 .topicCompact {
   .topicTitle {
-    @include font-size(1.7rem);
+    @include font-size(1.6rem);
   }
 }
 
-.buttonCompact {
-  margin-top: 0.6rem;
-}
-
 .isSubscribing {
   opacity: 0.5;
 }
@@ -131,3 +133,7 @@
     color: #000;
   }
 }
+
+.cardMode {
+  margin-bottom: 0;
+}

src/components/Topic/Card.tsx

@@ -10,6 +10,7 @@ import { useSession } from '../../context/session'
 import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
 import { Icon } from '../_shared/Icon'
 import { useLocalize } from '../../context/localize'
+import { CardTopic } from '../Feed/CardTopic'
 
 interface TopicProps {
   topic: Topic
@@ -22,6 +23,7 @@ interface TopicProps {
   iconButton?: boolean
   showPublications?: boolean
   showDescription?: boolean
+  isCardMode?: boolean
 }
 
 export const TopicCard = (props: TopicProps) => {
@@ -54,6 +56,7 @@ export const TopicCard = (props: TopicProps) => {
   }
 
   return (
+    <div class={styles.topicContainer}>
       <div
         class={styles.topic}
         classList={{
@@ -62,12 +65,17 @@ export const TopicCard = (props: TopicProps) => {
           [styles.topicInRow]: props.isTopicInRow
         }}
       >
-      <div classList={{ 'col-sm-18 col-lg-14 col-xl-12': !props.subscribeButtonBottom }}>
-        <Show when={props.topic.title}>
+        <div classList={{ 'col-sm-18 col-md-24 col-lg-14 col-xl-15': !props.subscribeButtonBottom }}>
+          <Show when={props.topic.title && !props.isCardMode}>
             <h3 class={styles.topicTitle}>
               <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
             </h3>
           </Show>
+
+          <Show when={props.isCardMode}>
+            <CardTopic title={props.topic.title} slug={props.topic.slug} class={styles.cardMode} />
+          </Show>
+
           <Show when={props.topic.pic}>
             <div class={styles.topicAvatar}>
               <a href={`/topic/${props.topic.slug}`}>
@@ -76,10 +84,28 @@ export const TopicCard = (props: TopicProps) => {
             </div>
           </Show>
 
+          <div
+            class={clsx(styles.topicDescription, 'text-truncate', styles.topicDescriptionShort)}
+            classList={{ [styles.topicDescriptionShort]: props.shortDescription }}
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta gravida urna, et vestibulum
+            dolor fermentum malesuada. Aenean est arcu, imperdiet vel aliquet quis, egestas ac justo.
+            Maecenas viverra enim a efficitur accumsan. Donec eu iaculis purus. Sed malesuada arcu sed nisl
+            luctus ultrices. Maecenas eget odio vitae turpis sollicitudin rutrum. Fusce rutrum urna felis,
+            id efficitur lacus faucibus et. Duis at libero dui. Quisque vitae pretium mi. Etiam non leo ut
+            nisi ornare auctor sit amet et enim. Aenean tempor ullamcorper augue, et mattis augue vestibulum
+            sed. Curabitur nec luctus sem. Phasellus imperdiet rhoncus lacus, in ultrices elit mollis ac.
+            Donec luctus dignissim cursus. Pellentesque sed risus sodales, tincidunt urna a, cursus ligula.
+            Curabitur nec nibh urna. Integer hendrerit quam eget diam malesuada, ac sagittis eros efficitur.
+            Sed ut orci eu quam mattis commodo. Nullam elementum nulla massa. Morbi placerat, lorem vitae
+            venenatis mollis, arcu erat sodales sapien, sit amet vehicula nunc tellus eget eros. Sed arcu
+            massa, vehicula sit amet viverra ut, eleifend ac leo. Mauris volutpat ex at orci tempor sodales.
+          </div>
+
           <Show when={props.showDescription && props.topic?.body}>
             <div
               class={clsx(styles.topicDescription, 'text-truncate')}
-            classList={{ 'topic-description--short': props.shortDescription }}
+              classList={{ [styles.topicDescriptionShort]: props.shortDescription }}
             >
               {props.topic.body}
             </div>
@@ -87,7 +113,7 @@ export const TopicCard = (props: TopicProps) => {
         </div>
         <div
           class={styles.controlContainer}
-        classList={{ 'col-sm-6 col-lg-10 col-xl-12': !props.subscribeButtonBottom }}
+          classList={{ 'col-sm-6 col-md-24 col-lg-10 col-xl-9': !props.subscribeButtonBottom }}
         >
           <ShowOnlyOnClient>
             <Show when={isSessionLoaded()}>
@@ -116,5 +142,6 @@ export const TopicCard = (props: TopicProps) => {
           </ShowOnlyOnClient>
         </div>
       </div>
+    </div>
   )
 }