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 = 'caret  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);