diff --git a/_sass/components/_wins-page.scss b/_sass/components/_wins-page.scss index 560edd84cc..b0f1fbdc80 100644 --- a/_sass/components/_wins-page.scss +++ b/_sass/components/_wins-page.scss @@ -1,4 +1,7 @@ //Hero styling + +//mobile for wins info + .wins-hero{ margin-top: 40px; display: flex; @@ -39,6 +42,86 @@ } } +.wins-icon-container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: start; + margin: 1em 0 0 6.5rem; +} +.wins-item-container{ + display: inline-block; + position: relative; +} +.wins-text-bubble { + display: none; + // font-weight: normal !important; + border-radius: 7px; + width: 279%; + left: -108%; + padding: .6em .5em; + background: $color-black; + text-align: center; + font-weight: 900; + color: $color-white; + font-family: arial; + position: absolute; + z-index: 100; +} +[data-wins]{ + font-weight: normal +} +.wins-text-bubble:before{ + content: ""; + width: 0px; + height: 0px; + position: absolute; + border-left: 10px solid $color-black; + border-right: 10px solid transparent; + transform: rotate(45deg); + border-bottom: 10px solid transparent; + right: 40%; + top: 0; +} + +.wins-badge-icon { + min-width: 1.7em; + max-width: 1.7em; + min-height: 1.7em; + max-height: 1.7em; + margin: .5em 1.5em .5em 0; + filter: invert(13%) sepia(4%) saturate(16%) hue-rotate(336deg) brightness(96%) contrast(81%); +} + +.wins-badge-icon:hover{ + filter: invert(79%) sepia(0%) saturate(4%) hue-rotate(139deg) brightness(89%) contrast(90%); +} + +.wins-badge-icon:hover + .wins-text-bubble{ + display: block; + font-family: $font-family-body; +} + +#overlay-info{ + display: grid; + grid-template-columns: 50% 50%; + margin-top: 2.6em; +} +.overlay-item-container{ + display: flex; + align-items: start; + margin-bottom: 1em; + margin-right: 1.5em; +} +.overlay-badge-icon{ + max-width: 1.5em; + margin-top: .2em; + margin-right: .7em; +} +.overlay-wins-text{ + margin: 0; + max-width: 14em; +} @media #{$bp-below-tablet} { .wins-hero{ @@ -88,7 +171,9 @@ .wins-card{ padding: 45px; display: flex; + position: relative; flex-direction: column; + overflow: visible; } .wins-card-top{ display: flex; @@ -127,12 +212,17 @@ font-size: 20px; padding-bottom: .4em; } -.wins-card-team{ +.wins-card-team, .wins-card-role { font-weight: normal; font-size: 16px; line-height: 18px; display: flex; - align-items: center; + margin-bottom: 6px; + // align-items: center; +} +.wins-team-role-color { + color: #767676; + margin-right: 7px; } .wins-card-title{ display: flex; @@ -144,10 +234,6 @@ .wins-card-icons{ display: flex; } -.wins-card-info{ - font-weight: bold; -} - .wins-card-overview{ margin-top: 1em; } @@ -353,6 +439,70 @@ .wins-page-contain > ul.wins-filter{ width: 100%; grid-template-rows: none; - } + } + + .wins-tablet{ + margin-left: 0em; + + .wins-icon-container{ + margin: 1.5em 0 0 6.5rem; + display: block; + } + .wins-item-container{ + display: flex; + justify-content: start; + align-items: start; + margin-left: 6.5em; + margin-bottom: 1em; + } + .wins-badge-icon{ + margin-top: .05em; + min-width: 1.5em; + max-width: 1.5em; + min-height: 1.5em; + max-height: 1.5em; + } + .wins-text-bubble{ + display: block; + width: 50%; + text-align: left; + position: relative; + left: 0; + padding: 0; + background: inherit; + color: $color-black; + } + .wins-text-bubble::before{ + border: none; + } + } +} + +@media #{$bp-below-mobile} { + .wins-icon-container{ + margin-left: 3.5em + } + .wins-tablet { + .wins-item-container{ + margin-left: 0; + } + .wins-text-bubble{ + width: 100%; + } + } + // when card is collapsed in mobile, icons will be 1.4em + .wins-badge-icon { + min-width: 1.4em; + max-width: 1.4em; + min-height: 1.4em; + max-height: 1.4em; + } + // when card is opened with "See More", icons will shrink to 1em + .wins-tablet .wins-badge-icon { + min-width: 1em; + max-width: 1em; + min-height: 1em; + max-height: 1em; + } } //wins page filter override section end diff --git a/assets/images/wins-page/wins-badges/briefcase.svg b/assets/images/wins-page/wins-badges/briefcase.svg new file mode 100644 index 0000000000..40b9f4e6d6 --- /dev/null +++ b/assets/images/wins-page/wins-badges/briefcase.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/code.svg b/assets/images/wins-page/wins-badges/code.svg new file mode 100644 index 0000000000..43e8f35456 --- /dev/null +++ b/assets/images/wins-page/wins-badges/code.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/community.svg b/assets/images/wins-page/wins-badges/community.svg new file mode 100644 index 0000000000..97f8efa1ca --- /dev/null +++ b/assets/images/wins-page/wins-badges/community.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/deliverable.svg b/assets/images/wins-page/wins-badges/deliverable.svg new file mode 100644 index 0000000000..dc238db227 --- /dev/null +++ b/assets/images/wins-page/wins-badges/deliverable.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/enterprise.svg b/assets/images/wins-page/wins-badges/enterprise.svg new file mode 100644 index 0000000000..5ff888bfaf --- /dev/null +++ b/assets/images/wins-page/wins-badges/enterprise.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/file.svg b/assets/images/wins-page/wins-badges/file.svg new file mode 100644 index 0000000000..95ee074f4b --- /dev/null +++ b/assets/images/wins-page/wins-badges/file.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/github.svg b/assets/images/wins-page/wins-badges/github.svg new file mode 100644 index 0000000000..7e73c7bc0d --- /dev/null +++ b/assets/images/wins-page/wins-badges/github.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/giving.svg b/assets/images/wins-page/wins-badges/giving.svg new file mode 100644 index 0000000000..fe83e856bd --- /dev/null +++ b/assets/images/wins-page/wins-badges/giving.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/hammers.svg b/assets/images/wins-page/wins-badges/hammers.svg new file mode 100644 index 0000000000..4cd29a260e --- /dev/null +++ b/assets/images/wins-page/wins-badges/hammers.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/launch.svg b/assets/images/wins-page/wins-badges/launch.svg new file mode 100644 index 0000000000..a85ed91a41 --- /dev/null +++ b/assets/images/wins-page/wins-badges/launch.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/linkedin.svg b/assets/images/wins-page/wins-badges/linkedin.svg new file mode 100644 index 0000000000..669f009742 --- /dev/null +++ b/assets/images/wins-page/wins-badges/linkedin.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/mentor.svg b/assets/images/wins-page/wins-badges/mentor.svg new file mode 100644 index 0000000000..98be9a0676 --- /dev/null +++ b/assets/images/wins-page/wins-badges/mentor.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/star.svg b/assets/images/wins-page/wins-badges/star.svg new file mode 100644 index 0000000000..045c055192 --- /dev/null +++ b/assets/images/wins-page/wins-badges/star.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/team.svg b/assets/images/wins-page/wins-badges/team.svg new file mode 100644 index 0000000000..2348ec85bd --- /dev/null +++ b/assets/images/wins-page/wins-badges/team.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/images/wins-page/wins-badges/twofa.svg b/assets/images/wins-page/wins-badges/twofa.svg new file mode 100644 index 0000000000..6e714f63d7 --- /dev/null +++ b/assets/images/wins-page/wins-badges/twofa.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/pages/wins/wins-card-template.html b/pages/wins/wins-card-template.html index 92283fdd9a..cca4c3ec02 100644 --- a/pages/wins/wins-card-template.html +++ b/pages/wins/wins-card-template.html @@ -16,20 +16,16 @@
-
-

-

-
- ...see more +
+
+

+

+
+ ...see more +
+
- + \ No newline at end of file diff --git a/pages/wins/wins-overlay.html b/pages/wins/wins-overlay.html index d7cb6206f1..9521b5c79a 100644 --- a/pages/wins/wins-overlay.html +++ b/pages/wins/wins-overlay.html @@ -15,12 +15,12 @@
Role(s): Blank
-
- -
-

Blank

-

Blank

-
+
+
+ +
+

Blank

+
diff --git a/pages/wins/wins-share-form.html b/pages/wins/wins-share-form.html index 31ccaaef7b..e80f7d51b7 100644 --- a/pages/wins/wins-share-form.html +++ b/pages/wins/wins-share-form.html @@ -306,7 +306,7 @@

Thank you for sharing your win with us!

"I increased the number of commits on my github profile", "I learned a new language", "I became proficient at GitHub", - "I setup 2FA", + "I set up 2FA", "I worked on an enterprise project", "I migrated google forms to personalized forms", "I worked on a project that will help the people of Los Angeles", diff --git a/pages/wins/wins.html b/pages/wins/wins.html index abc84028ee..75562e97cb 100644 --- a/pages/wins/wins.html +++ b/pages/wins/wins.html @@ -60,6 +60,24 @@ "Could we use your Linkedin profile picture next to your story?", "Display?" ] + const otherIcon = `star.svg` + const badgeIcons = { + "I got a new job": `briefcase.svg`, + "I produced something for my portfolio": `file.svg`, + "I improved my LinkedIn": `linkedin.svg`, + "I learned how to work better on a team": `team.svg`, + "I increased the number of commits on my Github profile": `github.svg`, + "I learned a new language": `code.svg`, + "I set up 2FA": `twofa.svg`, + "I became part of a a caring community": `$community.svg`, + "I worked on an enterprise project": `enterprise.svg`, + "I worked on a project that will help the people of Los Angeles": `giving.svg`, + "I worked on two or more projects": `hammers.svg`, + "I taught or mentored a person on my team": `mentor.svg`, + "I taught or mentored a person on another team": `mentor.svg`, + "My team delivered software to a stakeholder": `deliverable.svg`, + "My team launched our MVP": `launch.svg`, + } function main() { {% assign localData = site.data.external.wins-data | jsonify %} @@ -91,6 +109,7 @@ } + //Create The Filters From The Displayed Cards On Page Load document.addEventListener("DOMContentLoaded", createFilter); function createFilter(){ @@ -250,7 +269,6 @@ } - }) } @@ -275,9 +293,47 @@ } } - - - + + function insertIcons(cloneCardTemplate, cardClass, cardString) { + let initialCardList = cardString.split(',').map(item => item.trim()) + let otherWinsText = []; + let cardList = []; + + initialCardList.forEach(win => { + if (badgeIcons.hasOwnProperty(win)){ + cardList.push(win); + } else if (win === " "){ + return + } else { + otherWinsText.push(win); + } + }); + cardList.push(otherWinsText.join(", ")); + + const SVG_FILE_PATH = `/assets/images/wins-page/wins-badges/` + + cardList.map(function (item) { + if (badgeIcons.hasOwnProperty(item)) { + cloneCardTemplate.querySelector(cardClass).insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[item]} +
${item}
+
` + ) + return + } else if (item === '') { + return + } else { + cloneCardTemplate.querySelector(cardClass).insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[otherIcon]} +
${item}
+
` + ) + return + } + }) + } function makeCards(data) { {% assign githubData = site.data.external.github-data | jsonify %} @@ -304,7 +360,6 @@ }) }) - } let profileImgSrc = ghId ? `https://avatars1.githubusercontent.com/u/${ghId}?v=4` : @@ -330,14 +385,15 @@ cloneCardTemplate.querySelector('.wins-card-github-icon').setAttribute('hidden', 'true') } - cloneCardTemplate.querySelector('.project-inner.wins-card-team').textContent = `Team(s): ${card[team]}`; - cloneCardTemplate.querySelector('.project-inner.wins-card-role').textContent = `Role(s): ${card[role]}`; + cloneCardTemplate.querySelector('.project-inner.wins-card-team').innerHTML = `Team(s): ${card[team]}`; + cloneCardTemplate.querySelector('.project-inner.wins-card-role').innerHTML = `Role(s): ${card[role]}`; cloneCardTemplate.querySelector('.wins-card-overview').textContent = card[overview]; - cloneCardTemplate.querySelector('.wins-card-info').textContent = card[win]; + cloneCardTemplate.querySelector('.wins-icon-container').setAttribute('data-index', index) + insertIcons(cloneCardTemplate, '.wins-icon-container', card[win]) + cloneCardTemplate.querySelector('span.see-more-div').id = index; - winsCardContainer.append(cloneCardTemplate); const winText = cloneCardTemplate.querySelector('.wins-card-text') @@ -349,33 +405,52 @@ 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) }) - - } + function seeMore(id){ screenWidth = window.innerWidth; if (screenWidth > 960){ updateOverlay(id); }else{ - mobileSeeMore(id); + mobileSeeMore(id); } } + + //Adds event listener to badge icons when viewers interface is below desktop size + //Click expands wins text and removes "see more" + 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 + + mobileSeeMore(id) + container.setAttribute('class', 'wins-tablet wins-icon-container'); + })) + } + function mobileSeeMore(id){ - let span = document.getElementById(id); - let parent = span.parentElement.parentElement - parent.classList.toggle('expanded') - if (parent.classList.contains('expanded')) { - span.innerHTML = "see less" - } - else { - span.innerHTML = "...see more" - } + 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'); + // } } // need to delete makeElement and makeIcon function makeElement(elementType, parent, className) { @@ -424,7 +499,7 @@ }); let stringData = window.localStorage.getItem("data"); - let data = JSON.parse(stringData).reverse(); + let data = JSON.parse(stringData).reverse(); const overlayProfileImg = document.querySelector('#overlay-profile-img'); overlayProfileImg.src = document.querySelector(`#ghImg-${i}`).src; @@ -451,7 +526,8 @@ overlayOverview.innerHTML = data[i][overview]; const overlayInfo = document.querySelector('#overlay-info'); - overlayInfo.innerHTML = formatMessage(data[i][win]); + // overlayInfo.innerHTML = formatMessage(data[i][win]); + insertOverlay(overlayInfo, data[i][win]) const overlayProjectCard = document.querySelector('#overlay-project-card'); overlayProjectCard.parentNode.classList.add("display-initial"); @@ -461,8 +537,7 @@ function hideOverlay(e) { e = e || window.event || e.key == 'Escape'; - if (e.target !== e.currentTarget) - return; + if (e.target !== e.currentTarget) return; const overlayProjectCard = document.querySelector('#overlay-project-card'); overlayProjectCard.parentNode.classList.remove("display-initial"); @@ -472,6 +547,42 @@ document.querySelector(".main-footer").inert = false; document.querySelector(".home-getting-started-container.content-section.section-hack-nights.wins-hero").inert = false; document.querySelector(".sr-only-focusable").inert = false; + + const overlayInfo = document.querySelector('#overlay-info'); + + overlayInfo.innerHTML = ''; + } + + + function insertOverlay(cloneCardTemplate, cardString) { + const cardArr = cardString.split(',') + + cardArr.forEach(string => { + const item = string.trim() + const SVG_FILE_PATH = `/assets/images/wins-page/wins-badges/` + + + if (badgeIcons.hasOwnProperty(item)) { + cloneCardTemplate.insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[item]} +

${item}

+
` + ) + return + } else if (item === '') { + return + } else { + cloneCardTemplate.insertAdjacentHTML('beforeend', + `
+ ${badgeIcons[otherIcon]} +

Other

+
` + ) + return + } + + }) } main();