Made non-ready cards horizontal

jcbhmr · May 1, 2024 · 5ff2e72 · 5ff2e72
1 parent 6a4f977
commit 5ff2e72
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -104,9 +104,13 @@ function CardComponentOnBoard({
   children?: ReactNode;
   setHover: any
 }) {
+  let className = "card_shape_not_ready overflow-hidden";
+  if(card.getIsReady()){
+    className = "card_shape overflow-hidden";
+  }
   return (
     <button>
-    <div className="card_shape overflow-auto" onMouseOver={()=> {
+    <div className={className} onMouseOver={()=> {
       setHover(card);
     }}>
       <div className="flex aspect-16/9">

diff --git a/src/index.css b/src/index.css
@@ -81,15 +81,23 @@
 }
 
 .card_shape {
-  overflow: auto;
+  overflow: hidden;
   flex-direction: column;
   border-radius: 0.5rem;
   border-width: 3px;
   border-color: black;
   width: 100px;
   height: 150px;
 }
-
+.card_shape_not_ready {
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  border-width: 3px;
+  border-color: black;
+  width: 150px;
+  height: 100px;
+}
 .hover_card_shape {
   overflow: auto;
   flex-direction: column;