expandChildren: better styles

windorg · Sep 7, 2024 · f021289 · f021289
1 parent e1e8f34
commit f021289
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/components/card/cardsListItem.tsx b/components/card/cardsListItem.tsx
@@ -105,11 +105,10 @@ export function CardsListItemExpanded(props: {
   const recentlyFired =
     card.firedAt && new Date(card.firedAt).getTime() > Date.now() - 1000 * 60 * 60 * 24
   return (
-    // NB: .position-relative is needed for .stretched-link to work properly
-    <div className={`${styles.cardsListItem} woc-card `}>
-      <div className={styles._counter}>{card.commentCount || '−'}</div>
+    <div className={`${styles.cardsListItem} ${styles._expanded} woc-card `}>
       <div className={styles._body}>
-        <div className="position-relative">
+        {/* NB: .position-relative is needed for .stretched-link to work properly -- it specifies which parent element will be the 'link' */}
+        <div className={`${styles._titleWithTagline} position-relative`}>
           <div className={styles._title}>
             {/* TODO: perhaps move lock+title into a separate div so that the lock icon is "inline" */}
             <span>{isPrivate ? '🔒 ' : ''}</span>
@@ -130,7 +129,7 @@ export function CardsListItemExpanded(props: {
           </div>
           {card.tagline && <div className={styles._tagline}>{card.tagline}</div>}
         </div>
-        <Comments card={props.card} comments={props.comments} />
+        <Comments card={props.card} comments={props.comments} compact />
       </div>
     </div>
   )

diff --git a/components/card/comments.tsx b/components/card/comments.tsx
@@ -23,8 +23,11 @@ type Comment_ = Pick<
 export function Comments(props: {
   card: Pick<GQL.Card, 'id' | 'canEdit' | 'reverseOrder'>
   comments: Comment_[]
+  /** If true: remove the 'Comments' header */
+  compact?: boolean
 }) {
   const { card, comments } = props
+  const compact = props?.compact ?? false
 
   const renderCommentList = (comments: typeof props.comments) =>
     comments.map((comment) => (
@@ -56,10 +59,12 @@ export function Comments(props: {
   )
 
   return (
-    <div className={styles.comments}>
-      <div className={styles.sectionHeader}>
-        <div className={styles._label}>Comments ({comments.length})</div>
-      </div>
+    <div className={`${styles.comments} ${compact ? styles._compact : ''}`}>
+      {!compact && (
+        <div className={styles.sectionHeader}>
+          <div className={styles._label}>Comments ({comments.length})</div>
+        </div>
+      )}
       <div className={styles._list}>
         {card.reverseOrder ? reverseOrderComments() : normalOrderComments()}
       </div>

diff --git a/components/card/shared.module.scss b/components/card/shared.module.scss
@@ -55,7 +55,6 @@
   // Forbid long-click on iOS because it messes with touch drag-and-drop
   -webkit-touch-callout: none;
   user-select: none;
-  font-weight: 500;
   padding: 0.5rem 0.75rem;
   border-radius: 3px;
   margin: 0;
@@ -91,6 +90,7 @@
       color: #888;
     }
     ._title {
+      font-weight: 500;
       display: flex;
       flex-direction: row;
       ._fire {
@@ -116,11 +116,18 @@
       }
     }
   }
+  &._expanded ._titleWithTagline {
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #ccc;
+  }
 }
 
 .comments {
   margin: 30px 0;
   max-width: 40rem;
+  &._compact {
+    margin: 0;
+  }
   .sectionHeader {
     display: flex;
     justify-content: space-between;