feat(project): hide off-screen card metadata

jwplayer · Jun 17, 2021 · 144ca6a · 144ca6a
1 parent 6150be9
commit 144ca6a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -6,7 +6,10 @@
   cursor: pointer;
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
 
-  // @media (hover: hover) and (pointer: fine) {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
   &:focus,
   &:hover {
     z-index: 1;

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -66,13 +66,15 @@ function Card({
       <div className={posterClassNames} style={{ backgroundImage: posterSource ? `url(${posterSource})` : '' }}>
         {!loading && (
           <div className={styles.meta}>
-            {featured && <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>}
-            {metaData()}
+            {featured && !disabled && (
+              <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
+            )}
+            {!disabled && metaData()}
           </div>
         )}
         {isCurrent && <div className={styles.currentLabel}>{currentLabel}</div>}
       </div>
-      {!featured && (
+      {!featured && !disabled && (
         <div className={styles.titleContainer}>
           <div className={classNames(styles.title, { [styles.loading]: loading })}>{title}</div>
         </div>