From 4264f1fb0b1450d47dd4f8647c2e6cd23838d8ef Mon Sep 17 00:00:00 2001 From: Neha Deshpande Date: Tue, 27 Oct 2020 19:51:52 -0400 Subject: [PATCH 1/7] Added curriculum page --- src/components/Header.jsx | 7 + src/components/curricula/CurriculumCard.jsx | 195 ++++++++++++++++++++ src/pages/curricula.js | 74 ++++++++ 3 files changed, 276 insertions(+) create mode 100644 src/components/curricula/CurriculumCard.jsx create mode 100644 src/pages/curricula.js diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 33f40e4..4b9f93e 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -128,6 +128,13 @@ const Header = () => { Programs + + + Curricula + + ( + + + + {category[0].text} + + + {title[0].text} + + + {RichText.render(description)} + + + Details → + + + + {title[0].text}/ + + +) + +export default CurriculumCard; + +CurriculumCard.propTypes = { + category: PropTypes.array.isRequired, + thumbnail: PropTypes.object.isRequired, + title: PropTypes.array.isRequired, + description: PropTypes.array.isRequired, + uid: PropTypes.string.isRequired +} \ No newline at end of file diff --git a/src/pages/curricula.js b/src/pages/curricula.js new file mode 100644 index 0000000..694600d --- /dev/null +++ b/src/pages/curricula.js @@ -0,0 +1,74 @@ +import React from "react"; +import PropTypes from "prop-types"; +import MyHelmet from "components/MyHelmet"; +import { graphql } from "gatsby"; +import colors from "styles/colors"; +import Layout, { LayoutContainer } from "components/Layout"; +import Title from "components/_ui/Title"; +import CurriculumCard from "components/curricula/CurriculumCard"; + + +const Work = ({ curricula, meta }) => ( + <> + + + + + <> + {curricula.map((curriculum, i) => ( + <CurriculumCard + key={i} + category={curriculum.node.curriculum_title} + title={curriculum.node.curriculum_description} + description={curriculum.node.curriculum_thumbnail} + thumbnail={curriculum.node.curriculum_link} + uid={curriculum.node._meta.uid} + /> + ))} + </> + </LayoutContainer> + </Layout> + </> +); + +export default ({ data }) => { + const curricula = data.prismic.allCurriculums.edges; + const meta = data.site.siteMetadata; + if (!curricula) return null; + + return ( + <Work curricula={curricula} meta={meta}/> + ) +} + +Work.propTypes = { + curricula: PropTypes.array.isRequired, +}; + +export const query = graphql` + { + prismic { + allCurriculums { + edges { + node { + curriculum_title + curriculum_description + curriculum_thumbnail + curriculum_link + _meta { + uid + } + } + } + } + } + site { + siteMetadata { + title + description + author + } + } + } +` + From b75552d24ccd97dff09497ef3790debe8b4bc974 Mon Sep 17 00:00:00 2001 From: s-kganz <ganzkeenan1@gmail.com> Date: Wed, 24 Feb 2021 15:00:12 -0800 Subject: [PATCH 2/7] fix graphql query --- src/components/curricula/CurriculumCard.jsx | 6 +++--- src/pages/curricula.js | 9 +++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/curricula/CurriculumCard.jsx b/src/components/curricula/CurriculumCard.jsx index 64d0a45..462e062 100644 --- a/src/components/curricula/CurriculumCard.jsx +++ b/src/components/curricula/CurriculumCard.jsx @@ -162,8 +162,8 @@ const CurriculumCardImageContainer = styled("div")` } ` -const CurriculumCard = ({ category, title, description, thumbnail, uid}) => ( - <CurriculumCardContainer to={`/curricula/${uid}`}> +const CurriculumCard = ({ category, title, description, url, uid}) => ( + <CurriculumCardContainer to={url.url}> <CurriculumCardContent className="ProjectCardContent"> <CurriculumCardCategory> {category[0].text} @@ -179,7 +179,7 @@ const CurriculumCard = ({ category, title, description, thumbnail, uid}) => ( </CurriculumCardAction> </CurriculumCardContent> <CurriculumCardImageContainer className="ProjectCardImageContainer"> - <img src={thumbnail.url} alt={title[0].text}/> + {/* <img src={thumbnail.url} alt={title[0].text}/> */} </CurriculumCardImageContainer> </CurriculumCardContainer> ) diff --git a/src/pages/curricula.js b/src/pages/curricula.js index 694600d..4e19a0e 100644 --- a/src/pages/curricula.js +++ b/src/pages/curricula.js @@ -21,7 +21,7 @@ const Work = ({ curricula, meta }) => ( category={curriculum.node.curriculum_title} title={curriculum.node.curriculum_description} description={curriculum.node.curriculum_thumbnail} - thumbnail={curriculum.node.curriculum_link} + url={curriculum.node.curriculum_link} uid={curriculum.node._meta.uid} /> ))} @@ -54,7 +54,12 @@ export const query = graphql` curriculum_title curriculum_description curriculum_thumbnail - curriculum_link + curriculum_link { + __typename + ... on PRISMIC__ExternalLink { + url + } + } _meta { uid } From 9ae9d639482bda9d13615e2fa0218557e05f9c8a Mon Sep 17 00:00:00 2001 From: s-kganz <ganzkeenan1@gmail.com> Date: Wed, 24 Feb 2021 15:19:18 -0800 Subject: [PATCH 3/7] fix graphql query --- src/components/curricula/CurriculumCard.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/curricula/CurriculumCard.jsx b/src/components/curricula/CurriculumCard.jsx index 462e062..e0bf583 100644 --- a/src/components/curricula/CurriculumCard.jsx +++ b/src/components/curricula/CurriculumCard.jsx @@ -6,7 +6,7 @@ import dimensions from "styles/dimensions"; import colors from "styles/colors"; import PropTypes from "prop-types"; -const CurriculumCardContainer = styled(Link)` +const CurriculumCardContainer = styled("div")` display: grid; grid-template-columns: 4fr 7fr; box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.2); @@ -163,7 +163,8 @@ const CurriculumCardImageContainer = styled("div")` ` const CurriculumCard = ({ category, title, description, url, uid}) => ( - <CurriculumCardContainer to={url.url}> + <a href={url.url}> + <CurriculumCardContainer> <CurriculumCardContent className="ProjectCardContent"> <CurriculumCardCategory> {category[0].text} @@ -182,6 +183,7 @@ const CurriculumCard = ({ category, title, description, url, uid}) => ( {/* <img src={thumbnail.url} alt={title[0].text}/> */} </CurriculumCardImageContainer> </CurriculumCardContainer> + </a> ) export default CurriculumCard; From 417c98188c4bfb41c02e7138350bf7d86c460125 Mon Sep 17 00:00:00 2001 From: s-kganz <ganzkeenan1@gmail.com> Date: Wed, 24 Feb 2021 15:20:35 -0800 Subject: [PATCH 4/7] add anchor tag for link --- src/components/curricula/CurriculumCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/curricula/CurriculumCard.jsx b/src/components/curricula/CurriculumCard.jsx index e0bf583..aa76ea6 100644 --- a/src/components/curricula/CurriculumCard.jsx +++ b/src/components/curricula/CurriculumCard.jsx @@ -163,7 +163,7 @@ const CurriculumCardImageContainer = styled("div")` ` const CurriculumCard = ({ category, title, description, url, uid}) => ( - <a href={url.url}> + <a target="_blank" href={url.url}> <CurriculumCardContainer> <CurriculumCardContent className="ProjectCardContent"> <CurriculumCardCategory> From aca3ab3b697af438a4a65000bc2e99973de6d14a Mon Sep 17 00:00:00 2001 From: s-kganz <ganzkeenan1@gmail.com> Date: Wed, 24 Feb 2021 15:54:12 -0800 Subject: [PATCH 5/7] update schema to match type on prismic --- src/components/curricula/CurriculumCard.jsx | 6 +++--- src/pages/curricula.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/curricula/CurriculumCard.jsx b/src/components/curricula/CurriculumCard.jsx index aa76ea6..312b896 100644 --- a/src/components/curricula/CurriculumCard.jsx +++ b/src/components/curricula/CurriculumCard.jsx @@ -162,12 +162,12 @@ const CurriculumCardImageContainer = styled("div")` } ` -const CurriculumCard = ({ category, title, description, url, uid}) => ( +const CurriculumCard = ({ key, category, title, description, thumbnail, url}) => ( <a target="_blank" href={url.url}> <CurriculumCardContainer> <CurriculumCardContent className="ProjectCardContent"> <CurriculumCardCategory> - {category[0].text} + Class </CurriculumCardCategory> <CurriculumCardTitle> {title[0].text} @@ -180,7 +180,7 @@ const CurriculumCard = ({ category, title, description, url, uid}) => ( </CurriculumCardAction> </CurriculumCardContent> <CurriculumCardImageContainer className="ProjectCardImageContainer"> - {/* <img src={thumbnail.url} alt={title[0].text}/> */} + <img src={thumbnail.url} alt={title[0].text}/> </CurriculumCardImageContainer> </CurriculumCardContainer> </a> diff --git a/src/pages/curricula.js b/src/pages/curricula.js index 4e19a0e..b827d13 100644 --- a/src/pages/curricula.js +++ b/src/pages/curricula.js @@ -18,11 +18,11 @@ const Work = ({ curricula, meta }) => ( {curricula.map((curriculum, i) => ( <CurriculumCard key={i} - category={curriculum.node.curriculum_title} - title={curriculum.node.curriculum_description} - description={curriculum.node.curriculum_thumbnail} + category={curriculum.node.curriculum_category} + title={curriculum.node.curriculum_title} + description={curriculum.node.curriculum_description} + thumbnail={curriculum.node.curriculum_thumbnail} url={curriculum.node.curriculum_link} - uid={curriculum.node._meta.uid} /> ))} </> From e8e4ad76fa5f490e34c0544b7fc9078eb5e3cf61 Mon Sep 17 00:00:00 2001 From: "Ganz, Keenan" <ganzkeenan1@gmail.com> Date: Sun, 11 Jul 2021 13:56:19 -0700 Subject: [PATCH 6/7] bump copyright year, add curriculum page w/ support for prismic type --- src/components/Footer.jsx | 3 +- src/components/curricula/CurriculumCard.jsx | 392 ++++++++++---------- src/pages/curricula.js | 7 +- 3 files changed, 202 insertions(+), 200 deletions(-) diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index f126bc2..c19cc61 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -149,13 +149,14 @@ const Footer = ({email, facebook, instagram, linkedin, twitter, github, replit, <OutlineLogo /> </Link> <FooterAuthor href='/'> - © 2020 coding&&community + © 2021 coding&&community </FooterAuthor> </FooterLogo> <FooterInfo> <InfoColumn> <h5>Navigation</h5> <FooterLink to="/programs">Programs</FooterLink> + <FooterLink to="/curricula">Curricula</FooterLink> <FooterLink to="/work">Work With Us</FooterLink> <FooterLink to="/team">Team</FooterLink> <FooterLink to="/blog">Blog</FooterLink> diff --git a/src/components/curricula/CurriculumCard.jsx b/src/components/curricula/CurriculumCard.jsx index 312b896..d59805d 100644 --- a/src/components/curricula/CurriculumCard.jsx +++ b/src/components/curricula/CurriculumCard.jsx @@ -1,197 +1,197 @@ -import React from "react"; -import { Link } from "gatsby"; -import { RichText } from "prismic-reactjs"; -import styled from "@emotion/styled"; -import dimensions from "styles/dimensions"; -import colors from "styles/colors"; -import PropTypes from "prop-types"; - -const CurriculumCardContainer = styled("div")` - display: grid; - grid-template-columns: 4fr 7fr; - box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.2); - margin-bottom: 4em; - transition: all 150ms ease-in-out; - text-decoration: none; - color: currentColor; - border-radius: 2em; - - @media(max-width:950px) { - grid-template-columns: 4.5fr 7fr; - } - - @media(max-width:${dimensions.maxwidthTablet}px) { - grid-template-columns: 1fr; - } - - @media(max-width:${dimensions.maxwidthMobile}px) { - margin-bottom: 2em; - } - - &:hover { - box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.4); - transition: all 150ms ease-in-out; - - .ProjectCardAction { - transition: all 150ms ease-in-out; - - span { - transform: translateX(0px); - opacity: 1; - transition: transform 150ms ease-in-out; - } - } - - .ProjectCardContent::before { - opacity: 0.02; - transition: all 150ms ease-in-out; - } - - .ProjectCardImageContainer::before { - opacity: 0.2; - transition: all 150ms ease-in-out; - } - } -` - -const CurriculumCardContent = styled("div")` - background: white; - padding: 2em; - position: relative; - - &:before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: ${colors.blue500}; - mix-blend-mode: multiply; - opacity: 0; - transition: all 150ms ease-in-out; - } - - @media(max-width:950px) { - padding: 3.25em 2.5em 2em 2.5em; - } - - @media(max-width:${dimensions.maxwidthTablet}px) { - grid-row: 2; - } -` - -const CurriculumCardCategory = styled("h6")` - font-weight: 500; - color: ${colors.grey600}; -` - -const CurriculumCardTitle = styled("h3")` - margin-bottom: 0.5em; - margin-top: 0.5em; - color: ${colors.visorblue}; -` - -const CurriculumCardBlurb = styled("div")` - margin-bottom: 0.5em; - margin-top: 0.5em; - margin-bottom: 1em; - - p { - line-height: 1.5em; - } - - @media(max-width:${dimensions.maxwidthTablet}px) { - margin-bottom: 2.5em; - } -` - -const CurriculumCardAction = styled("div")` - font-weight: 500; - text-decoration: none; - color: ${colors.visorblue}; - transition: all 150ms ease-in-out; - - span { - margin-left: 1em; - transform: translateX(-8px); - display: inline-block; - transition: transform 400ms ease-in-out; - } -` - -const CurriculumCardImageContainer = styled("div")` - background: ${colors.grey200}; - display: flex; - justify-content: center; - align-items: flex-end; - overflow: hidden; - position: relative; - - - @media(max-width:${dimensions.maxwidthTablet}px) { - padding-top: 3em; - max-height: 200px; - flex-direction: column; - align-items: center; - justify-content: flex-start; - } - - &:before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - left: 0; - top: 0; - background: ${colors.blue500}; - mix-blend-mode: multiply; - opacity: 0; - transition: all 150ms ease-in-out; - } - - img { - width: 100%; - box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04); - object-fit: cover; - max-height: 24em; - - @media(max-width:${dimensions.maxwidthTablet}px) { - max-width: 300px; - } - } -` - -const CurriculumCard = ({ key, category, title, description, thumbnail, url}) => ( - <a target="_blank" href={url.url}> - <CurriculumCardContainer> - <CurriculumCardContent className="ProjectCardContent"> - <CurriculumCardCategory> - Class - </CurriculumCardCategory> - <CurriculumCardTitle> - {title[0].text} - </CurriculumCardTitle> - <CurriculumCardBlurb> - {RichText.render(description)} - </CurriculumCardBlurb> - <CurriculumCardAction className="ProjectCardAction"> - Details <span>→</span> - </CurriculumCardAction> - </CurriculumCardContent> - <CurriculumCardImageContainer className="ProjectCardImageContainer"> - <img src={thumbnail.url} alt={title[0].text}/> - </CurriculumCardImageContainer> - </CurriculumCardContainer> - </a> -) - -export default CurriculumCard; - -CurriculumCard.propTypes = { - category: PropTypes.array.isRequired, - thumbnail: PropTypes.object.isRequired, - title: PropTypes.array.isRequired, - description: PropTypes.array.isRequired, - uid: PropTypes.string.isRequired +import React from "react"; +import { Link } from "gatsby"; +import { RichText } from "prismic-reactjs"; +import styled from "@emotion/styled"; +import dimensions from "styles/dimensions"; +import colors from "styles/colors"; +import PropTypes from "prop-types"; + +const CurriculumCardContainer = styled("div")` + display: grid; + grid-template-columns: 4fr 7fr; + box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.2); + margin-bottom: 4em; + transition: all 150ms ease-in-out; + text-decoration: none; + color: currentColor; + border-radius: 2em; + + @media(max-width:950px) { + grid-template-columns: 4.5fr 7fr; + } + + @media(max-width:${dimensions.maxwidthTablet}px) { + grid-template-columns: 1fr; + } + + @media(max-width:${dimensions.maxwidthMobile}px) { + margin-bottom: 2em; + } + + &:hover { + box-shadow: 0px 9px 24px rgba(0, 0, 0, 0.4); + transition: all 150ms ease-in-out; + + .ProjectCardAction { + transition: all 150ms ease-in-out; + + span { + transform: translateX(0px); + opacity: 1; + transition: transform 150ms ease-in-out; + } + } + + .ProjectCardContent::before { + opacity: 0.02; + transition: all 150ms ease-in-out; + } + + .ProjectCardImageContainer::before { + opacity: 0.2; + transition: all 150ms ease-in-out; + } + } +` + +const CurriculumCardContent = styled("div")` + background: white; + padding: 2em; + position: relative; + + &:before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: ${colors.blue500}; + mix-blend-mode: multiply; + opacity: 0; + transition: all 150ms ease-in-out; + } + + @media(max-width:950px) { + padding: 3.25em 2.5em 2em 2.5em; + } + + @media(max-width:${dimensions.maxwidthTablet}px) { + grid-row: 2; + } +` + +const CurriculumCardCategory = styled("h6")` + font-weight: 500; + color: ${colors.grey600}; +` + +const CurriculumCardTitle = styled("h3")` + margin-bottom: 0.5em; + margin-top: 0.5em; + color: ${colors.visorblue}; +` + +const CurriculumCardBlurb = styled("div")` + margin-bottom: 0.5em; + margin-top: 0.5em; + margin-bottom: 1em; + + p { + line-height: 1.5em; + } + + @media(max-width:${dimensions.maxwidthTablet}px) { + margin-bottom: 2.5em; + } +` + +const CurriculumCardAction = styled("div")` + font-weight: 500; + text-decoration: none; + color: ${colors.visorblue}; + transition: all 150ms ease-in-out; + + span { + margin-left: 1em; + transform: translateX(-8px); + display: inline-block; + transition: transform 400ms ease-in-out; + } +` + +const CurriculumCardImageContainer = styled("div")` + background: ${colors.grey200}; + display: flex; + justify-content: center; + align-items: flex-end; + overflow: hidden; + position: relative; + + + @media(max-width:${dimensions.maxwidthTablet}px) { + padding-top: 3em; + max-height: 200px; + flex-direction: column; + align-items: center; + justify-content: flex-start; + } + + &:before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: ${colors.blue500}; + mix-blend-mode: multiply; + opacity: 0; + transition: all 150ms ease-in-out; + } + + img { + width: 100%; + box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04); + object-fit: cover; + max-height: 24em; + + @media(max-width:${dimensions.maxwidthTablet}px) { + max-width: 300px; + } + } +` + +const CurriculumCard = ({ key, category, title, description, thumbnail, url}) => ( + <a target="_blank" href={url.url}> + <CurriculumCardContainer> + <CurriculumCardContent className="ProjectCardContent"> + <CurriculumCardCategory> + Class + </CurriculumCardCategory> + <CurriculumCardTitle> + {title[0].text} + </CurriculumCardTitle> + <CurriculumCardBlurb> + {RichText.render(description)} + </CurriculumCardBlurb> + <CurriculumCardAction className="ProjectCardAction"> + Details <span>→</span> + </CurriculumCardAction> + </CurriculumCardContent> + <CurriculumCardImageContainer className="ProjectCardImageContainer"> + <img src={thumbnail.url} alt={title[0].text}/> + </CurriculumCardImageContainer> + </CurriculumCardContainer> + </a> +) + +export default CurriculumCard; + +CurriculumCard.propTypes = { + category: PropTypes.array.isRequired, + thumbnail: PropTypes.object.isRequired, + title: PropTypes.array.isRequired, + description: PropTypes.array.isRequired, + uid: PropTypes.string.isRequired } \ No newline at end of file diff --git a/src/pages/curricula.js b/src/pages/curricula.js index b827d13..51f93ca 100644 --- a/src/pages/curricula.js +++ b/src/pages/curricula.js @@ -13,9 +13,10 @@ const Work = ({ curricula, meta }) => ( <MyHelmet meta={meta} /> <Layout> <LayoutContainer> - <Title title='Curricula' text='Learn more about our curricula.' color={colors.visorblue} /> + <Title title='Curricula' text='Curricula coming soon! Check back later :)' color={colors.visorblue} /> <> - {curricula.map((curriculum, i) => ( + {/* Uncomment this block to show curriculum blocks */} + {/* {curricula.map((curriculum, i) => ( <CurriculumCard key={i} category={curriculum.node.curriculum_category} @@ -24,7 +25,7 @@ const Work = ({ curricula, meta }) => ( thumbnail={curriculum.node.curriculum_thumbnail} url={curriculum.node.curriculum_link} /> - ))} + ))} */} </> </LayoutContainer> </Layout> From 78bbed569a4a283fe6194a9137623ce44dfd8a50 Mon Sep 17 00:00:00 2001 From: "Ganz, Keenan" <ganzkeenan1@gmail.com> Date: Sun, 11 Jul 2021 14:20:43 -0700 Subject: [PATCH 7/7] turn curriculum blocks back on --- src/pages/curricula.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/pages/curricula.js b/src/pages/curricula.js index 51f93ca..30dfe9b 100644 --- a/src/pages/curricula.js +++ b/src/pages/curricula.js @@ -13,10 +13,9 @@ const Work = ({ curricula, meta }) => ( <MyHelmet meta={meta} /> <Layout> <LayoutContainer> - <Title title='Curricula' text='Curricula coming soon! Check back later :)' color={colors.visorblue} /> + <Title title='Curricula' text='All materials are free for use.' color={colors.visorblue} /> <> - {/* Uncomment this block to show curriculum blocks */} - {/* {curricula.map((curriculum, i) => ( + {curricula.map((curriculum, i) => ( <CurriculumCard key={i} category={curriculum.node.curriculum_category} @@ -25,8 +24,8 @@ const Work = ({ curricula, meta }) => ( thumbnail={curriculum.node.curriculum_thumbnail} url={curriculum.node.curriculum_link} /> - ))} */} - </> + ))} + </> </LayoutContainer> </Layout> </>