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 {
+  &.topicDescriptionShort {
-    font-size: medium;
+    display: block;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
 }
 
-.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,66 +56,91 @@ export const TopicCard = (props: TopicProps) => {
   }
 
   return (
-    <div
+    <div class={styles.topicContainer}>
-      class={styles.topic}
-      classList={{
-        row: !props.subscribeButtonBottom,
-        [styles.topicCompact]: props.compact,
-        [styles.topicInRow]: props.isTopicInRow
-      }}
-    >
-      <div classList={{ 'col-sm-18 col-lg-14 col-xl-12': !props.subscribeButtonBottom }}>
-        <Show when={props.topic.title}>
-          <h3 class={styles.topicTitle}>
-            <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
-          </h3>
-        </Show>
-        <Show when={props.topic.pic}>
-          <div class={styles.topicAvatar}>
-            <a href={`/topic/${props.topic.slug}`}>
-              <img src={props.topic.pic} alt={props.topic.title} />
-            </a>
-          </div>
-        </Show>
-
-        <Show when={props.showDescription && props.topic?.body}>
-          <div
-            class={clsx(styles.topicDescription, 'text-truncate')}
-            classList={{ 'topic-description--short': props.shortDescription }}
-          >
-            {props.topic.body}
-          </div>
-        </Show>
-      </div>
       <div
-        class={styles.controlContainer}
+        class={styles.topic}
-        classList={{ 'col-sm-6 col-lg-10 col-xl-12': !props.subscribeButtonBottom }}
+        classList={{
+          row: !props.subscribeButtonBottom,
+          [styles.topicCompact]: props.compact,
+          [styles.topicInRow]: props.isTopicInRow
+        }}
       >
-        <ShowOnlyOnClient>
+        <div classList={{ 'col-sm-18 col-md-24 col-lg-14 col-xl-15': !props.subscribeButtonBottom }}>
-          <Show when={isSessionLoaded()}>
+          <Show when={props.topic.title && !props.isCardMode}>
-            <button
+            <h3 class={styles.topicTitle}>
-              onClick={() => subscribe(!subscribed())}
+              <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
-              class="button--light button--subscribe-topic"
+            </h3>
-              classList={{
-                [styles.buttonCompact]: props.compact,
-                [styles.isSubscribing]: isSubscribing(),
-                [styles.isSubscribed]: subscribed()
-              }}
-              disabled={isSubscribing()}
-            >
-              <Show when={props.iconButton}>
-                <Show when={subscribed()} fallback="+">
-                  <Icon name="check-subscribed" />
-                </Show>
-              </Show>
-              <Show when={!props.iconButton}>
-                <Show when={subscribed()} fallback={t('Follow')}>
-                  {t('Unfollow')}
-                </Show>
-              </Show>
-            </button>
           </Show>
-        </ShowOnlyOnClient>
+
+          <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}`}>
+                <img src={props.topic.pic} alt={props.topic.title} />
+              </a>
+            </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={{ [styles.topicDescriptionShort]: props.shortDescription }}
+            >
+              {props.topic.body}
+            </div>
+          </Show>
+        </div>
+        <div
+          class={styles.controlContainer}
+          classList={{ 'col-sm-6 col-md-24 col-lg-10 col-xl-9': !props.subscribeButtonBottom }}
+        >
+          <ShowOnlyOnClient>
+            <Show when={isSessionLoaded()}>
+              <button
+                onClick={() => subscribe(!subscribed())}
+                class="button--light button--subscribe-topic"
+                classList={{
+                  [styles.buttonCompact]: props.compact,
+                  [styles.isSubscribing]: isSubscribing(),
+                  [styles.isSubscribed]: subscribed()
+                }}
+                disabled={isSubscribing()}
+              >
+                <Show when={props.iconButton}>
+                  <Show when={subscribed()} fallback="+">
+                    <Icon name="check-subscribed" />
+                  </Show>
+                </Show>
+                <Show when={!props.iconButton}>
+                  <Show when={subscribed()} fallback={t('Follow')}>
+                    {t('Unfollow')}
+                  </Show>
+                </Show>
+              </button>
+            </Show>
+          </ShowOnlyOnClient>
+        </div>
       </div>
     </div>
   )