Add to responsive layout of the expanded card

Pma913 · Mar 15, 2024 · 50fc57d · 50fc57d
1 parent a355077
commit 50fc57d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 31 deletions.
diff --git a/src/components/ExpandedCard/ExpandedCard.css b/src/components/ExpandedCard/ExpandedCard.css
@@ -64,21 +64,46 @@
   margin-left: 10px;
 }
 
-.stats-dropdown {
+.stats-dropdown,
+.stats-dropup {
   display: none;
-  width: 25px;
-  height: 25px;
-  margin: 10px 10px 30px;
-  transform: rotate(90deg);
+}
+
+.wiki-link {
+  margin-right: 20px;
 }
 
 @media (max-width: 1110px) {
-  .hide-stats {
-    display: none;
+  .stats-column-con {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stats-column-con-active {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 35%;
   }
 
   .stats-dropdown {
-    display: block
+    display: block;
+    width: 25px;
+    height: 25px;
+    margin: 10px 10px 30px;
+    transform: rotate(90deg);
+  }
+
+  .stats-dropup {
+    display: block;
+    transform: rotate(-90deg);
+    width: 25px;
+    height: 25px;
+    margin: 10px 10px 30px;
+  }
+
+  .hide-stats {
+    display: none;
   }
 
   .exp-name {
@@ -114,22 +139,22 @@
     background-image: linear-gradient(rgb(255, 255, 255, 0), rgb(255, 255, 255, 1));
   }
 
+  .active-drop {
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+  }
+
   .stats-column-2 {
-    width: 27%;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
-    padding-left: 10px;
+    width: 100%;
+    background-color: white;
   }
 
-  .stats-column-1,
-  .stats-column-2 {
+  .stats-column-1 {
     background-color: rgba(255, 255, 255, 0.5);
   }
 
-  .wiki-link {
-    margin-right: 34px;
-  }
-
   .exp-description {
     margin-right: 20px;
   }
@@ -138,10 +163,21 @@
     margin-bottom: 20px;
   }
 
-  @media (max-width: 900px) {
-    .expanded-card {
-      width: 90%;
-      left: 5%;
-    }
+  .drop {
+    margin-left: 10px;
+  }
+
+  .exp-links-container {
+    justify-content: space-around;
+  }
+
+  .wiki-link {
+  margin-right: unset;
+  }
+}
+@media (max-width: 900px) {
+  .expanded-card {
+    width: 90%;
+    left: 5%;
   }
 }
diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js
@@ -22,23 +22,25 @@ const ExpandedCard = ({ stats, removeCard }) => {
           <img className="expanded-image" src={stats.image} alt={`${stats.name} cat`} />
         </div>
         <div className="stats-area">
-          <div className="stats-column-1">
-            <h4 className="exp-name">{stats.name}</h4>
-            <img src={expandArrow} alt="expand-stats" className="stats-dropdown" onClick={triggerDropdown}/>
-          </div>
+          <div className={dropdown ? "stats-column-con-active" : "stats-column-con"}>
+            <div className={dropdown ? "stats-column-1 active-drop" : "stats-column-1"}>
+              <h4 className="exp-name">{stats.name}</h4>
+              <img src={expandArrow} alt="expand-stats" className={dropdown ? "stats-dropup" : "stats-dropdown"} onClick={triggerDropdown}/>
+            </div>
           <div className={dropdown ? "stats-column-2" : "stats-column-2 hide-stats"}>
             <p className="exp-description drop">{`Description: ${stats.description}`}</p>
-            <p className="exp-stats-title">Stats</p>
-            <p className="exp-dogFriendly">{`Dog Friendly: ${stats.dogFriendly}`}</p>
-            <p className="exp-energyLevel">{`Energy Level: ${stats.energyLevel}`}</p>
-            <p className="exp-origin">{`Origin: ${stats.origin}`}</p>
-            <p className="exp-temperament">{`Temperament: ${stats.temperament}`}</p>
-            <p className="exp-links-title">External Links</p>
+            <p className="exp-stats-title drop">Stats</p>
+            <p className="exp-dogFriendly drop">{`Dog Friendly: ${stats.dogFriendly}`}</p>
+            <p className="exp-energyLevel drop">{`Energy Level: ${stats.energyLevel}`}</p>
+            <p className="exp-origin drop">{`Origin: ${stats.origin}`}</p>
+            <p className="exp-temperament drop">{`Temperament: ${stats.temperament}`}</p>
+            <p className="exp-links-title drop">External Links</p>
             <div className="exp-links-container">
               <a className="vca-link" href={stats.vcaUrl}>VCA</a>
               <a className="wiki-link" href={stats.wikiUrl}>Wikipedia</a>
             </div>
           </div>
+          </div>
           <img className="remove-card" src={cancelIcon} alt="" onClick={removeCard} />
         </div>
       </div>