Update card format 2339

_includes/wins-page/wins-card-template.html

@@ -20,12 +20,7 @@
         <div class="project-inner wins-card-text">
           <p class="wins-card-overview"></p>
           <div class="wins-see-more-div">
-            <span 
-              id="0"
-              expandable
-              tabindex="0"
-              class="see-more-div"
-            >...see more</span>
+            <span id="0" expandable tabindex="0" class="see-more-div" aria-label="see more">See More</span>
           </div>
           <!-- <div class="wins-icon-container" id="icons-0"></div> -->
         </div>

_sass/components/_wins-page.scss

@@ -44,8 +44,8 @@
 .wins-see-more-div {
     position: absolute;
     background-color: white;
-    right: 0px;
-    bottom: 0px;
+    right: 32px;
+    bottom: 26px;
     color: $color-red;
     padding: 0px 3px;
     cursor: pointer;
@@ -54,18 +54,34 @@
 .wins-card-text {
 	margin-top: 40px;
 	max-height: 88px;
-	overflow: hidden;
-	position: relative;
-    &.relative {
-        position: relative;
-        .wins-see-more-div {
-            bottom: 0;
-            right: 0;
+	position: inherit;
+}
+
+.wins-card-overview{
+    margin: 1em 0 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
+
+.see-more-div {
+
+	@media #{$bp-below-desktop} {
+        display: inline-block;
+        width: 44px;
+        height: 28px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 12px;
+        background-image: url(../../assets/images/wins-page/caret.svg);
+        transform: rotate(180deg);
+        &.show-less-btn {
+            transform: rotate(0deg);
         }
-    }
-    p {
-        margin: 0;
-    }
+	}
 }
 
 .wins-icon-container {
@@ -263,9 +279,6 @@
 .wins-card-icons{
     display: flex;
 }
-.wins-card-overview{
-    margin-top: 1em;
-}
 
 @media #{$bp-below-desktop} {
     .wins-card {
@@ -433,6 +446,9 @@
     .expanded{
         max-height: none;
         height: auto;
+        .wins-card-overview {
+            display: block;
+        }
         .wins-see-more-div {
             z-index: 10;
         }
@@ -444,8 +460,6 @@
     flex: 0 0 auto;
 }
 
-
-
 //wins page filter override section begin
 .wins-page-contain > ul.filter-list{
 	grid-template-columns: repeat(2, 1fr);

assets/js/wins.js

@@ -345,19 +345,6 @@
 		function addSeeMore() {
 			const winText = winTextContainer.querySelector('.wins-card-overview')
 			const seeMoreDiv = winTextContainer.querySelector('.wins-see-more-div')
-			//makes the see more span on the bottom of the card
-			if (
-				!winTextContainer.classList.contains('expanded') && 
-				winText.offsetHeight <= winTextContainer.offsetHeight 
-			) {
-        // Adds see more
-				seeMoreDiv.setAttribute('hidden', 'true')
-			} else {
-        // Removes see more if not needed
-				seeMoreDiv.removeAttribute('hidden')
-			}
-			if (!winTextContainer.classList.contains('expanded'))
-				winTextContainer.classList.add('relative')
 			if (window.innerWidth > 960){
 				const winsCardTextContainer = seeMoreDiv.parentElement
 				if (winsCardTextContainer.classList.contains("expanded")){
@@ -396,22 +383,43 @@ function seeMore(id){
 	}
 
   // Toggles between see more and see less in tablet and mobile view
-  function toggleSeeMoreLess(id){
-		let span = document.getElementById(id);
-		let screenWidth = window.innerWidth;
-		let parent = span.parentElement.parentElement;
-		let winsIconContainer = document.getElementById(`icons-${id}`)
-	  	if (parent.classList.contains('expanded') || screenWidth > 960) {
-			parent.setAttribute('class', 'project-inner wins-card-text relative');
-			span.innerHTML = "...see more";
-			winsIconContainer.setAttribute('class', 'wins-icon-container');
-		} else {
-			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');
-      span.parentElement.removeAttribute('hidden')
+  function toggleSeeMoreLess(id) {
+	let span = document.getElementById(id);
+	let screenWidth = window.innerWidth;
+	let parent = span.parentElement.parentElement;
+	let winsIconContainer = document.getElementById(`icons-${id}`)
+	if (parent.classList.contains('expanded') && screenWidth > 960) {
+		parent.setAttribute('class', 'project-inner wins-card-text');
+		winsIconContainer.setAttribute('class', 'wins-icon-container');
+	} else if(parent.classList.contains('expanded') && screenWidth < 960) {
+		parent.setAttribute('class', 'project-inner wins-card-text');
+		span.setAttribute('class', 'see-more-div');
+		winsIconContainer.setAttribute('class', 'wins-icon-container');
+	} else {
+		parent.setAttribute('class','project-inner wins-card-text expanded');
+		span.setAttribute('class', 'see-more-div show-less-btn');
+		winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
+  		span.parentElement.removeAttribute('hidden');
+	}
+}
+
+function changeSeeMoreBtn(x) {
+	const span = document.querySelectorAll(".see-more-div");
+	if (x.matches) { 
+		for(let i = 0; i < span.length; i++) {
+			span[i].innerHTML = ''
+		}
+	} else {
+		for(let i = 0; i < span.length; i++) {
+			// removes show-less-btn class
+			span[i].setAttribute('class', 'see-more-div');	
+			span[i].innerHTML = "See More";
 		}
+	}
   }
+
+  const x = window.matchMedia("(max-width: 960px)");
+  x.addListener(changeSeeMoreBtn);
 
   // need to delete makeElement and makeIcon
   function makeElement(elementType, parent, className) {
@@ -502,4 +510,5 @@ function seeMore(id){
 
 
   main();
+  changeSeeMoreBtn(x);