diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 7cf3e3f412..2d2039f899 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -272,6 +272,10 @@
@media #{$bp-below-mobile} {
.wins-card-text{
height: 80px;
+ margin-top: 16px;
+ }
+ .wins-card-overview{
+ height: 100%;
}
.wins-card{
padding: 24px;
@@ -308,9 +312,6 @@
height: 20px;
width: 20px;
}
- .wins-card-text{
- margin-top: 16px;
- }
.wins-card-overview{
margin-top: 0;
@@ -323,6 +324,7 @@
//modal overlay
@media #{$bp-desktop-up} {
.wins-card-overview{
+ height: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
@@ -400,10 +402,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
new file mode 100644
index 0000000000..46158a0e19
--- /dev/null
+++ b/assets/images/wins-page/caret.svg
@@ -0,0 +1,3 @@
+
diff --git a/pages/wins/wins.html b/pages/wins/wins.html
index 6330158695..e72f17eb38 100644
--- a/pages/wins/wins.html
+++ b/pages/wins/wins.html
@@ -371,22 +371,6 @@
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
-
- //makes the see more span on the bottom of the card
- if (innerHeight <= winText.offsetHeight) { //checks if see more is needed.
- winText.querySelector('.wins-see-more-div').setAttribute('hidden', 'true')
- } else {
- winText.querySelector('.wins-see-more-div').removeAttribute('hidden')
- winsBelowDesktop()
- }
- }
- addSeeMore()
-
- new ResizeObserver(addSeeMore).observe(winText)
})
}
@@ -395,39 +379,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 = ' see less';
+ winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
+ }
+ else {
+ parent.setAttribute('class','project-inner wins-card-text');
+ 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);