From 0766861a9df5458c082ade04720a963842a4a8d6 Mon Sep 17 00:00:00 2001
From: Patrick Ankiewicz <patrickmankiewicz@gmail.com>
Date: Tue, 26 Mar 2024 16:36:55 -0400
Subject: [PATCH 1/3] Add to responsiveness by removing the possibility for
 text overflow in expanded card

---
 src/components/ExpandedCard/ExpandedCard.css | 31 ++++++++++++++++----
 src/components/ExpandedCard/ExpandedCard.js  | 15 +++++++++-
 src/components/Favorites/Favorites.js        | 14 +++++----
 3 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/components/ExpandedCard/ExpandedCard.css b/src/components/ExpandedCard/ExpandedCard.css
index 32a5a52..d86a209 100644
--- a/src/components/ExpandedCard/ExpandedCard.css
+++ b/src/components/ExpandedCard/ExpandedCard.css
@@ -2,15 +2,15 @@
   position: absolute;
   background-color: rgba(255, 255, 255, 0.457);
   width: 100%;
-  height: 100%;
+  height: 83%;
 }
 
 .expanded-card {
   position: absolute;
   width: 70%;
-  height: 64%;
+  height: 74%;
   left: 15%;
-  bottom: 28%;
+  bottom: 14%;
   background-color: white;
   border-radius: 10px;
   display: flex;
@@ -19,7 +19,13 @@
 }
 
 .stats-area {
-  padding: 10px;
+  padding: 0 10px;
+  height: 90%;
+}
+
+.stats-column-2 {
+  display: flex;
+  flex-direction: column;
 }
 
 .remove-card {
@@ -61,7 +67,7 @@
 .exp-name {
   font-weight: 900;
   font-size: xx-large;
-  margin-left: 10px;
+  margin: 0 0 10px;
 }
 
 .stats-dropdown,
@@ -73,6 +79,21 @@
   margin-right: 20px;
 }
 
+.exp-description {
+  max-height: 84px;
+}
+
+.read-more {
+  display: inline;
+  margin: 0 10px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.read-more:hover {
+  border-bottom: solid black 2px;
+}
+
 @media (max-width: 1170px) {
   .expanded-background {
     background-color: black;
diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js
index 8415374..610ddfa 100644
--- a/src/components/ExpandedCard/ExpandedCard.js
+++ b/src/components/ExpandedCard/ExpandedCard.js
@@ -10,6 +10,19 @@ const ExpandedCard = ({ stats, removeCard }) => {
   const triggerDropdown = () => {
     setDropdown(!dropdown)
   }
+
+
+  const description = () => {
+    if (stats.description.length > 200) {
+      let cutDescription = stats.description.slice(0, 200)
+      const lastFullWord = cutDescription.lastIndexOf(' ')
+      return cutDescription.slice(0, lastFullWord) + '...'
+    } else {
+      return stats.description
+    }
+  }
+
+  const readMore = stats.description.length > 250 ? <p className="read-more">Read More</p> : ''
   
   return (
     <div className="expanded-background" onClick={(event) => {
@@ -28,7 +41,7 @@ const ExpandedCard = ({ stats, removeCard }) => {
               <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-description drop">{`Description: ${description()}`}{readMore}</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>
diff --git a/src/components/Favorites/Favorites.js b/src/components/Favorites/Favorites.js
index 195b011..001a2d1 100644
--- a/src/components/Favorites/Favorites.js
+++ b/src/components/Favorites/Favorites.js
@@ -32,15 +32,19 @@ const Favorites = ({ favs, removeFav }) => {
   
   },[selected])
 
-  return (
-    <section className="fav-card-display">
+  if (selected) {
+    return (
+      <ExpandedCard removeCard={deselectCard} stats={selected} />
+    )
+  } else {
+    return (
+      <section className="fav-card-display">
       {!savedCards.length ? 
       <h2 className="no-ideas">No saved ideas yet</h2> :
       savedCards}
-      {selected ? <ExpandedCard removeCard={deselectCard} stats={selected} /> :
-      <></>}
     </section>
-  );
+    )
+  }
 };
 
 export default Favorites;

From 1bde357ebc382b4ef1d300ee9bf1adb1ff6af01f Mon Sep 17 00:00:00 2001
From: Patrick Ankiewicz <patrickmankiewicz@gmail.com>
Date: Tue, 26 Mar 2024 17:36:00 -0400
Subject: [PATCH 2/3] Add functionality to expand the description for the
 expanded cards

---
 src/components/ExpandedCard/ExpandedCard.css | 12 ++++++++++++
 src/components/ExpandedCard/ExpandedCard.js  | 13 +++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpandedCard/ExpandedCard.css b/src/components/ExpandedCard/ExpandedCard.css
index d86a209..33f20e1 100644
--- a/src/components/ExpandedCard/ExpandedCard.css
+++ b/src/components/ExpandedCard/ExpandedCard.css
@@ -26,6 +26,7 @@
 .stats-column-2 {
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .remove-card {
@@ -94,6 +95,17 @@
   border-bottom: solid black 2px;
 }
 
+.exp-full-description {
+  position: absolute;
+  margin-bottom: 15px;
+  background: linear-gradient(0deg, rgba(255,255,255,0.37718837535014005) 0%, rgba(255,255,255,1) 18%, rgba(255,255,255,1) 88%);
+  padding-bottom: 80px;
+}
+
+.hide-desc {
+  display: none
+}
+
 @media (max-width: 1170px) {
   .expanded-background {
     background-color: black;
diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js
index 610ddfa..101c499 100644
--- a/src/components/ExpandedCard/ExpandedCard.js
+++ b/src/components/ExpandedCard/ExpandedCard.js
@@ -6,6 +6,7 @@ import expandArrow from '../../utilities/expand-arrow.png';
 const ExpandedCard = ({ stats, removeCard }) => {
 
   const [dropdown, setDropdown] = useState(false)
+  const [expandDesc, setExpandDesc] = useState(false)
 
   const triggerDropdown = () => {
     setDropdown(!dropdown)
@@ -22,7 +23,14 @@ const ExpandedCard = ({ stats, removeCard }) => {
     }
   }
 
-  const readMore = stats.description.length > 250 ? <p className="read-more">Read More</p> : ''
+  const toggleRead = expandDesc ? 'Read Less' : 'Read More'
+
+  const readMore = stats.description.length > 250 ? <span className="read-more" onClick={() => {
+      setExpandDesc(!expandDesc)
+    }}>{toggleRead}</span> : ''
+
+  // const readMoreBox = <p className="exp-full-description drop">{stats.description}</p>
+  const fullDescription = stats.description
   
   return (
     <div className="expanded-background" onClick={(event) => {
@@ -41,7 +49,8 @@ const ExpandedCard = ({ stats, removeCard }) => {
               <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: ${description()}`}{readMore}</p>
+            <p className={expandDesc ? "exp-full-description drop" : "hide-desc"}>{fullDescription}{readMore}</p>
+            <p className="exp-description drop">{`${description()}`}{readMore}</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>

From 3460274cf3dcab849222ee7930c2f3541fe5fe59 Mon Sep 17 00:00:00 2001
From: Patrick Ankiewicz <patrickmankiewicz@gmail.com>
Date: Wed, 27 Mar 2024 08:41:27 -0400
Subject: [PATCH 3/3] Set readMore conditional to be the same as description
 conditional

---
 src/components/ExpandedCard/ExpandedCard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js
index 101c499..6537555 100644
--- a/src/components/ExpandedCard/ExpandedCard.js
+++ b/src/components/ExpandedCard/ExpandedCard.js
@@ -25,7 +25,7 @@ const ExpandedCard = ({ stats, removeCard }) => {
 
   const toggleRead = expandDesc ? 'Read Less' : 'Read More'
 
-  const readMore = stats.description.length > 250 ? <span className="read-more" onClick={() => {
+  const readMore = stats.description.length > 200 ? <span className="read-more" onClick={() => {
       setExpandDesc(!expandDesc)
     }}>{toggleRead}</span> : ''