-
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 4c900a03be..d036b3dbed 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -54,18 +54,44 @@
.wins-card-text {
margin-top: 40px;
max-height: 88px;
- overflow: hidden;
- position: relative;
- &.relative {
- position: relative;
- .wins-see-more-div {
- bottom: 0;
- right: 0;
- }
- }
- p {
- margin: 0;
- }
+ // overflow: hidden;
+ position: inherit;
+ // &.relative {
+ // position: relative;
+ // .wins-see-more-div {
+ // bottom: 0;
+ // right: 0;
+ // }
+ // }
+ // p {
+ // margin: 0;
+ // text-overflow: ellipsis;
+ // overflow: hidden;
+ // display: -webkit-box !important;
+ // -webkit-line-clamp: 3;
+ // -webkit-box-orient: vertical;
+ // white-space: normal;
+ // }
+}
+
+.wins-card-overview{
+ margin: 0;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: -webkit-box !important;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ white-space: normal;
+}
+
+.see-more-div {
+ .caret {
+ width: 12px;
+ }
+
+ @media #{$bp-below-desktop} {
+ padding: 5px 16px;
+ }
}
.wins-icon-container {
diff --git a/assets/js/wins.js b/assets/js/wins.js
index 2f125cc13c..3770a99541 100644
--- a/assets/js/wins.js
+++ b/assets/js/wins.js
@@ -404,15 +404,13 @@ function seeMore(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";
+ if (parent.classList.contains('expanded') || screenWidth > 960) {
+ parent.setAttribute('class', 'project-inner wins-card-text relative');
+ span.innerHTML = `
- See more
+ See More
+
+
+
+
`;
winsIconContainer.setAttribute('class', 'wins-icon-container');
- } else if(parent.classList.contains('expanded') && screenWidth < 960) {
- span.innerHTML = ''
- }else {
+ } else {
parent.setAttribute('class','project-inner wins-card-text expanded');
- span.innerHTML = '';
+ span.innerHTML = ' ';
winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
span.parentElement.removeAttribute('hidden')
}
From 50c662fd6bf409405636456b0d5b4e678e1c9851 Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Sun, 13 Mar 2022 12:33:28 -0700
Subject: [PATCH 3/8] changes needed for review
---
_includes/wins-page/wins-card-template.html | 5 +--
_sass/components/_wins-page.scss | 20 +++++-------
assets/js/wins.js | 34 ++++++++++++---------
3 files changed, 27 insertions(+), 32 deletions(-)
diff --git a/_includes/wins-page/wins-card-template.html b/_includes/wins-page/wins-card-template.html
index 15437a7483..dd5fe3bb0a 100644
--- a/_includes/wins-page/wins-card-template.html
+++ b/_includes/wins-page/wins-card-template.html
@@ -18,13 +18,10 @@
+
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index d036b3dbed..854b21fbc8 100644
--- a/_sass/components/_wins-page.scss
+++ b/_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;
@@ -63,23 +63,14 @@
// right: 0;
// }
// }
- // p {
- // margin: 0;
- // text-overflow: ellipsis;
- // overflow: hidden;
- // display: -webkit-box !important;
- // -webkit-line-clamp: 3;
- // -webkit-box-orient: vertical;
- // white-space: normal;
- // }
}
.wins-card-overview{
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
- display: -webkit-box !important;
- -webkit-line-clamp: 3;
+ display: -webkit-box;
+ -webkit-line-clamp: 4;
-webkit-box-orient: vertical;
white-space: normal;
}
@@ -459,6 +450,9 @@
.expanded{
max-height: none;
height: auto;
+ .wins-card-overview{
+ display: block;
+ }
.wins-see-more-div {
z-index: 10;
}
diff --git a/assets/js/wins.js b/assets/js/wins.js
index 3770a99541..ee88fd6c87 100644
--- a/assets/js/wins.js
+++ b/assets/js/wins.js
@@ -400,21 +400,25 @@ 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 = ' ';
- winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
- span.parentElement.removeAttribute('hidden')
- }
- }
+ 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');
+ span.innerHTML = "See More";
+ winsIconContainer.setAttribute('class', 'wins-icon-container');
+ } else if(parent.classList.contains('expanded') && screenWidth < 960) {
+ parent.setAttribute('class', 'project-inner wins-card-text');
+ span.innerHTML = ''
+ winsIconContainer.setAttribute('class', 'wins-icon-container');
+ }else {
+ parent.setAttribute('class','project-inner wins-card-text expanded');
+ span.innerHTML = '';
+ winsIconContainer.setAttribute('class', 'wins-tablet wins-icon-container');
+ span.parentElement.removeAttribute('hidden');
+ }
+}
// need to delete makeElement and makeIcon
function makeElement(elementType, parent, className) {
From 9f4829b4f45183245eee17e2131df1fd459bdf75 Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Thu, 17 Mar 2022 23:25:09 -0700
Subject: [PATCH 4/8] fixed see more display
---
_sass/components/_wins-page.scss | 2 +-
assets/js/wins.js | 28 ++++++++++++----------------
2 files changed, 13 insertions(+), 17 deletions(-)
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 854b21fbc8..a4a6f5fa2f 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -70,7 +70,7 @@
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
- -webkit-line-clamp: 4;
+ -webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
diff --git a/assets/js/wins.js b/assets/js/wins.js
index ee88fd6c87..27c3c11b28 100644
--- a/assets/js/wins.js
+++ b/assets/js/wins.js
@@ -345,22 +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')
- }
-
- // remove added relative class on click
- // if (!winTextContainer.classList.contains('expanded'))
- // winTextContainer.classList.add('relative')
-
if (window.innerWidth > 960){
const winsCardTextContainer = seeMoreDiv.parentElement
if (winsCardTextContainer.classList.contains("expanded")){
@@ -398,6 +382,18 @@ function seeMore(id){
}))
}
+ let query = window.matchMedia('max-width: 500px')
+ function render(e){
+ // if the viewport is 960px or less
+ if(e.matches){
+ console.log('change');
+ } else{
+ console.log('nope', e.matches, e)
+ }
+ };
+ render(query);
+ query.addEventListener('change', render);
+
// Toggles between see more and see less in tablet and mobile view
function toggleSeeMoreLess(id){
let span = document.getElementById(id);
From 6b705aa2bd00ea6c115d374d94902108d827a21a Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Sun, 20 Mar 2022 20:41:13 -0700
Subject: [PATCH 5/8] added query in js and functionally mobile see more
buttons
---
_includes/wins-page/wins-card-template.html | 2 +-
_sass/components/_wins-page.scss | 16 ++++++---
assets/js/wins.js | 36 ++++++++++++---------
3 files changed, 34 insertions(+), 20 deletions(-)
diff --git a/_includes/wins-page/wins-card-template.html b/_includes/wins-page/wins-card-template.html
index dd5fe3bb0a..b14a027422 100644
--- a/_includes/wins-page/wins-card-template.html
+++ b/_includes/wins-page/wins-card-template.html
@@ -20,7 +20,7 @@
- See More
+ See More
'
+ span.setAttribute('class', 'see-more-div');
winsIconContainer.setAttribute('class', 'wins-icon-container');
}else {
parent.setAttribute('class','project-inner wins-card-text expanded');
- span.innerHTML = '';
+ 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) // Attach listener function on state changes
+
// need to delete makeElement and makeIcon
function makeElement(elementType, parent, className) {
let child = document.createElement(elementType);
@@ -505,4 +510,5 @@ function seeMore(id){
main();
+ changeSeeMoreBtn(x)
From 4c5c39e10c3794fc701b943d7afbcdb7fb1748b7 Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Wed, 23 Mar 2022 22:09:54 -0700
Subject: [PATCH 6/8] removed re-declared class
---
_sass/components/_wins-page.scss | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 29fbf09bef..53b499d739 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -66,7 +66,8 @@
}
.wins-card-overview{
- margin: 0;
+ margin: 1em 0 0;
+ margin-top: 1em;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
@@ -288,9 +289,6 @@
.wins-card-icons{
display: flex;
}
-.wins-card-overview{
- margin-top: 1em;
-}
@media #{$bp-below-desktop} {
.wins-card {
From ff5e3362e9c341b0a29fa260f1425307525ba8b3 Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Sun, 27 Mar 2022 17:04:59 -0700
Subject: [PATCH 7/8] cleaned up code
---
_sass/components/_wins-page.scss | 14 +-------------
assets/js/wins.js | 16 ++++++++--------
2 files changed, 9 insertions(+), 21 deletions(-)
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 53b499d739..96f4820a28 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -54,20 +54,11 @@
.wins-card-text {
margin-top: 40px;
max-height: 88px;
- // overflow: hidden;
position: inherit;
- // &.relative {
- // position: relative;
- // .wins-see-more-div {
- // bottom: 0;
- // right: 0;
- // }
- // }
}
.wins-card-overview{
margin: 1em 0 0;
- margin-top: 1em;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
@@ -87,7 +78,6 @@
background-size: 12px;
background-image: url(../../assets/images/wins-page/caret.svg);
transform: rotate(180deg);
-
&.show-less-btn{
transform: rotate(0deg);
}
@@ -456,7 +446,7 @@
.expanded{
max-height: none;
height: auto;
- .wins-card-overview{
+ .wins-card-overview {
display: block;
}
.wins-see-more-div {
@@ -470,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);
diff --git a/assets/js/wins.js b/assets/js/wins.js
index a8cc7d9070..0828ecd645 100644
--- a/assets/js/wins.js
+++ b/assets/js/wins.js
@@ -383,19 +383,19 @@ function seeMore(id){
}
// Toggles between see more and see less in tablet and mobile view
- function toggleSeeMoreLess(id){
+ 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) {
+ 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 {
+ } 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');
@@ -406,11 +406,11 @@ function seeMore(id){
function changeSeeMoreBtn(x) {
const span = document.querySelectorAll(".see-more-div");
if (x.matches) {
- for(let i = 0; i < span.length; i++ ){
+ for(let i = 0; i < span.length; i++) {
span[i].innerHTML = ''
}
} else {
- for(let i = 0; i < span.length; i++ ){
+ 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";
@@ -418,8 +418,8 @@ function changeSeeMoreBtn(x) {
}
}
- const x = window.matchMedia("(max-width: 960px)")
- x.addListener(changeSeeMoreBtn) // Attach listener function on state changes
+ const x = window.matchMedia("(max-width: 960px)");
+ x.addListener(changeSeeMoreBtn);
// need to delete makeElement and makeIcon
function makeElement(elementType, parent, className) {
@@ -510,5 +510,5 @@ function changeSeeMoreBtn(x) {
main();
- changeSeeMoreBtn(x)
+ changeSeeMoreBtn(x);
From 0af9a358c4e9eb0ffdde22e4cddad4a4d5773d1a Mon Sep 17 00:00:00 2001
From: Carlos <85038929+Carlos-A-P@users.noreply.github.com>
Date: Tue, 29 Mar 2022 18:12:27 -0700
Subject: [PATCH 8/8] cleaned up code
---
_sass/components/_wins-page.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss
index 96f4820a28..bbff6bd389 100644
--- a/_sass/components/_wins-page.scss
+++ b/_sass/components/_wins-page.scss
@@ -78,7 +78,7 @@
background-size: 12px;
background-image: url(../../assets/images/wins-page/caret.svg);
transform: rotate(180deg);
- &.show-less-btn{
+ &.show-less-btn {
transform: rotate(0deg);
}
}