Merge pull request #29 from Pma913/edit/favorites

Edit/favorites

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,14 @@
 }
 
 .stats-area {
-  padding: 10px;
+  padding: 0 10px;
+  height: 90%;
+}
+
+.stats-column-2 {
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
 
 .remove-card {
@@ -61,7 +68,7 @@
 .exp-name {
   font-weight: 900;
   font-size: xx-large;
-  margin-left: 10px;
+  margin: 0 0 10px;
 }
 
 .stats-dropdown,
@@ -73,6 +80,32 @@
   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;
+}
+
+.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;

src/components/ExpandedCard/ExpandedCard.js

@@ -6,10 +6,31 @@ 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)
   }
+
+
+  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 toggleRead = expandDesc ? 'Read Less' : 'Read More'
+
+  const readMore = stats.description.length > 200 ? <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) => {
@@ -28,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: ${stats.description}`}</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>

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;