From 670dd841e8e4b9904da5a8f408d596579d51f372 Mon Sep 17 00:00:00 2001 From: qiqicodes Date: Tue, 8 Jun 2021 23:53:45 -0700 Subject: [PATCH 1/5] [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less functionality --- _sass/components/_wins-page.scss | 9 ++++--- pages/wins/wins.html | 43 +++++++++++++++----------------- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index 7cf3e3f412..e1f49428f1 100644 --- a/_sass/components/_wins-page.scss +++ b/_sass/components/_wins-page.scss @@ -399,11 +399,12 @@ } .expanded{ height: auto; - .wins-see-more-div { - position: relative; - text-align: right; - } + // .wins-see-more-div { + // position: relative; + // text-align: right; + // } } + } .wins-card-content > * { diff --git a/pages/wins/wins.html b/pages/wins/wins.html index 6330158695..728db6eaa1 100644 --- a/pages/wins/wins.html +++ b/pages/wins/wins.html @@ -377,12 +377,9 @@ 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') + if (innerHeight => winText.offsetHeight) { //checks if see more is needed. winsBelowDesktop() - } + } } addSeeMore() @@ -395,39 +392,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); From 73de290e55a5aed4c8e99faa50ee9aca92282eaa Mon Sep 17 00:00:00 2001 From: qiqicodes Date: Wed, 9 Jun 2021 00:09:52 -0700 Subject: [PATCH 2/5] [qiqicodes-1549-see-less-button-wins-pages] adds caret svg --- assets/images/wins-page/caret.svg | 3 +++ pages/wins/wins.html | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 assets/images/wins-page/caret.svg 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 728db6eaa1..b9ad90ad5f 100644 --- a/pages/wins/wins.html +++ b/pages/wins/wins.html @@ -415,7 +415,7 @@ if (!parent.classList.contains('expanded')) { parent.setAttribute('class','project-inner wins-card-text expanded'); - span.innerHTML = "see less"; + span.innerHTML = 'caret  see less'; winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container'); } else { From 2f8a66844163dfbdfa6f4703d049b0b8236ba21a Mon Sep 17 00:00:00 2001 From: qiqicodes Date: Sun, 13 Jun 2021 04:25:48 -0700 Subject: [PATCH 3/5] [qiqicodes-1549-see-less-button-wins-pages] toggle see more/see less for wins card --- _sass/components/_wins-page.scss | 8 +++++--- pages/wins/wins.html | 24 ++++++++++++------------ 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index e1f49428f1..0c4efa7528 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; } diff --git a/pages/wins/wins.html b/pages/wins/wins.html index b9ad90ad5f..63e1fe0eb2 100644 --- a/pages/wins/wins.html +++ b/pages/wins/wins.html @@ -372,18 +372,18 @@ 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. - winsBelowDesktop() - } - } - addSeeMore() - - new ResizeObserver(addSeeMore).observe(winText) + // 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. + // winsBelowDesktop() + // } + // } + // addSeeMore() + + // new ResizeObserver(addSeeMore).observe(winText) }) } From cdb8fb8e65ac51da69551cea12c63c5915fcba2a Mon Sep 17 00:00:00 2001 From: qiqicodes Date: Sun, 13 Jun 2021 14:27:19 -0700 Subject: [PATCH 4/5] [qiqicodes-1549-see-less-button-wins-pages] delete commented lines of old code --- _sass/components/_wins-page.scss | 4 ---- pages/wins/wins.html | 13 ------------- 2 files changed, 17 deletions(-) diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index 0c4efa7528..61640ec3ec 100644 --- a/_sass/components/_wins-page.scss +++ b/_sass/components/_wins-page.scss @@ -401,10 +401,6 @@ } .expanded{ height: auto; - // .wins-see-more-div { - // position: relative; - // text-align: right; - // } } } diff --git a/pages/wins/wins.html b/pages/wins/wins.html index 63e1fe0eb2..e72f17eb38 100644 --- a/pages/wins/wins.html +++ b/pages/wins/wins.html @@ -371,19 +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. - // winsBelowDesktop() - // } - // } - // addSeeMore() - - // new ResizeObserver(addSeeMore).observe(winText) }) } From 50a88217fa6c84f30f0cb596cf175fc60eff1a73 Mon Sep 17 00:00:00 2001 From: qiqicodes Date: Wed, 16 Jun 2021 21:15:59 -0700 Subject: [PATCH 5/5] [qiqicodes-1549-see-less-button-wins-pages] see more/see less styling --- _sass/components/_wins-page.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index 61640ec3ec..2d2039f899 100644 --- a/_sass/components/_wins-page.scss +++ b/_sass/components/_wins-page.scss @@ -401,6 +401,9 @@ } .expanded{ height: auto; + .wins-see-more-div { + z-index: 10; + } } }