see more <-> see less on wins page mobile view (#1924)

* [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less functionality * [qiqicodes-1549-see-less-button-wins-pages] adds caret svg * [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less for wins card * [qiqicodes-1549-see-less-button-wins-pages] delete commented lines of old code * [qiqicodes-1549-see-less-button-wins-pages] see more/see less styling * change position of see more in mobile, and clean up code * make placement on expansion work * move see more to bottom of text, and see less to bottom of card in mobile * delete console.log * remove commented code Co-authored-by: qiqicodes <[email protected]>
hackforla · Jul 12, 2021 · 02add26 · 02add26
1 parent bf23451
commit 02add26
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 49 deletions.
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
@@ -37,6 +37,13 @@
 	height: 88px;
 	overflow: hidden;
 	position: relative;
+    &.relative {
+        position: relative;
+        .wins-see-more-div {
+            bottom: 0;
+            right: 0;
+        }
+    }
     p {
         margin: 0;
     }
@@ -249,11 +256,8 @@
     }
 
     .wins-see-more-div {
-        height: 0;
-        margin-top: 4px;
-        padding: 0;
-        right: 7%;
-        top: 88.5%;
+        right: 24px;
+        bottom: 10px;
     }
 
     .home-getting-started-container {
@@ -277,6 +281,7 @@
 @media #{$bp-below-mobile} {
     .wins-card-text{
         height: 80px;
+        margin-top: 16px;
     }
     .wins-card{
         padding: 24px;
@@ -313,9 +318,6 @@
         height: 20px;
         width: 20px;
     }
-    .wins-card-text{
-        margin-top: 16px;
-    }
 
     .wins-card-overview{
         margin-top: 0;
@@ -329,7 +331,6 @@
 @media #{$bp-desktop-up} {
     .wins-card-overview{
         overflow: hidden;
-        text-overflow: ellipsis;
     }
 
     .overlay {
@@ -405,10 +406,10 @@
     .expanded{
         height: auto;
         .wins-see-more-div {
-            position: relative;
-            text-align: right;
+            z-index: 10;
         }
     }
+
 }
 
 .wins-card-content > * {

diff --git a/assets/images/wins-page/caret.svg b/assets/images/wins-page/caret.svg
diff --git a/pages/wins/wins-card-template.html b/pages/wins/wins-card-template.html
@@ -20,7 +20,7 @@
         <div class="project-inner wins-card-text">
           <p class="wins-card-overview"></p>
           <p class="wins-card-info"></p>
-          <div class="project-inner wins-see-more-div">
+          <div class="wins-see-more-div">
             <span id="0" onclick="seeMore(id)" expandable class="see-more-div">...see more</span>
           </div>
         </div>

diff --git a/pages/wins/wins.html b/pages/wins/wins.html
@@ -90,9 +90,6 @@
   			cardObj[keys[i]] = data[i];
   		}
   		cardData.push(cardObj)
-
-
-
   	})
 
   	//createFilter();
@@ -268,17 +265,6 @@
 
   }
 
-  function formatMessage(win) {
-  	let str = '';
-  	let lastCommaIndex = win.lastIndexOf(",");
-  	if (lastCommaIndex != -1) {
-  		str += win.slice(0, lastCommaIndex + 1) + " and" + win.slice(lastCommaIndex + 1) + '!';
-  	} else {
-  		str += win + '!';
-  	}
-  	return str;
-  }
-
   function ifPageEmpty() {
   	if (document.querySelectorAll('.wins-card').length == 0) {
   		const page = document.querySelector('.wins-page-contain');
@@ -388,18 +374,23 @@
 		cloneCardTemplate.querySelector('span.see-more-div').id = index;
 
 		winsCardContainer.append(cloneCardTemplate);
-		
+
 		const winText = cloneCardTemplate.querySelector('.wins-card-text')
 		function addSeeMore() {
-			let innerHeight = Array.from(winText.childNodes).reduce((acc, el) => (el.offsetHeight || 0) + acc, 0) - 22
+			const winInfo = winText.querySelector('.wins-card-overview')
 
 			//makes the see more span on the bottom of the card
-			if (innerHeight <= winText.offsetHeight) { //checks if see more is needed.
+			if (
+				!winText.classList.contains('expanded') && 
+				winInfo.offsetHeight <= winText.offsetHeight 
+			) { //checks if see more is needed.
 				winText.querySelector('.wins-see-more-div').setAttribute('hidden', 'true')
+				// winText.classList.remove('relative')
 			} else {
 				winText.querySelector('.wins-see-more-div').removeAttribute('hidden')
-				winsBelowDesktop()
 			}
+			if (!winText.classList.contains('expanded'))
+				winText.classList.add('relative')
 		}
 		addSeeMore()
 
@@ -412,39 +403,39 @@
   	if (screenWidth > 960){
   		updateOverlay(id);
   	}else{
-		  mobileSeeMore(id);
+		toggleSeeMoreLess(id);
   	}
   }
 
   //Adds event listener to badge icons when viewers interface is below desktop size
-  //Click expands wins text and removes "see more"
+  //Click to toggle "see more" and "see less" to expand and collapse wins text
   function winsBelowDesktop() {
 		document.querySelectorAll('.wins-badge-icon').forEach(img => img.addEventListener('click', function (event) {
 			const container = event.target.parentElement.parentElement;
-			const id = container.dataset.index
+			const id = container.dataset.index;
 
-			mobileSeeMore(id)
-			container.setAttribute('class', 'wins-tablet wins-icon-container');
+			toggleSeeMoreLess(id);
 		}))
 	}
 
-  function mobileSeeMore(id){
+  function toggleSeeMoreLess(id){
 		let span = document.getElementById(id);
 		let parent = span.parentElement.parentElement;
 		let winsInfo = span.parentElement.parentElement.parentElement.parentElement;
-		let winsIconContainer = winsInfo.nextElementSibling
-		parent.classList.add('expanded');
-		winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
-		//FIXME: this is here for when see more/see less logic is added
-		// if (parent.classList.contains('expanded')) {
-		// 	span.innerHTML = "see less";
-		// 	winsInfo.nextElementSibling.setAttribute('class', 'wins-tablet wins-icon-container');
-		// }
-		// else {
-		// 	span.innerHTML = "...see more";
-		// 	winsInfo.nextElementSibling.removeAttribute('class', 'wins-tablet');
-		// }
+		let winsIconContainer = winsInfo.nextElementSibling;
+
+		if (!parent.classList.contains('expanded')) {
+			parent.setAttribute('class','project-inner wins-card-text expanded');
+			span.innerHTML = '<img src="/assets/images/wins-page/caret.svg" alt="caret">&nbsp; see less';
+			winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
+		}
+		else {
+			parent.setAttribute('class','project-inner wins-card-text relative');
+			span.innerHTML = "...see more";
+			winsIconContainer.setAttribute('class', 'wins-icon-container');
+		}
   }
+
   // need to delete makeElement and makeIcon
   function makeElement(elementType, parent, className) {
 		let child = document.createElement(elementType);
@@ -526,7 +517,7 @@
 				cloneCardTemplate.insertAdjacentHTML('beforeend',
 					`<div class='overlay-item-container'>
 							<img class="overlay-badge-icon" alt="${badgeIcons[otherIcon]}" src="${SVG_FILE_PATH}${otherIcon}">
-							<p class="overlay-wins-text" data-wins="font-styling">Other</p>
+							<p class="overlay-wins-text" data-wins="font-styling">${item}</p>
 						</div>`
 				)
 				return