From 38e068417ac9443cad32718cc31d52cd843ba89b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fede=20=C3=81lvarez?= <78366796+fedealvarezcampos@users.noreply.github.com> Date: Mon, 30 May 2022 14:58:09 +0200 Subject: [PATCH] CMS changes, styles (#74) --- src/components/common/card/card.module.scss | 6 ++ src/components/common/card/index.tsx | 61 ++++++++----------- .../common/footer/footer.module.scss | 10 +++ .../sections/blog/hero/hero.module.scss | 28 +++++---- .../sections/newsroom/press/index.tsx | 18 +++++- .../opportunities/opportunities.module.scss | 3 +- src/lib/cms/queries/community.js | 15 ++--- src/lib/cms/queries/press.js | 17 +++++- src/pages/press.tsx | 28 ++++++--- 9 files changed, 117 insertions(+), 69 deletions(-) diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss index e60c5ad..5b2794a 100644 --- a/src/components/common/card/card.module.scss +++ b/src/components/common/card/card.module.scss @@ -209,6 +209,7 @@ display: flex; align-items: center; gap: tovw(10px, 'default', 6px); + text-transform: uppercase; svg { margin-bottom: tovw(1px, 'default', 1px); @@ -225,6 +226,7 @@ &.horizontal { flex-direction: row; gap: tovw(44px, 'default', 44px); + min-height: tovw(380px, 'default', 380px); > .image__container { margin: 0; @@ -284,6 +286,10 @@ width: 100%; height: tovw(232px, 'default', 200px); + @supports (aspect-ratio: 16 / 9) { + aspect-ratio: 16 / 9; + } + img { width: 100%; height: 100%; diff --git a/src/components/common/card/index.tsx b/src/components/common/card/index.tsx index b60e698..a5a6027 100644 --- a/src/components/common/card/index.tsx +++ b/src/components/common/card/index.tsx @@ -3,7 +3,7 @@ import NextLink from 'next/link' import { useRouter } from 'next/router' import { useCallback, useEffect, useState } from 'react' -import { Calendar, Clock } from '~/components/icons/events' +import { Calendar } from '~/components/icons/events' import Heading from '~/components/primitives/heading' import Link from '~/components/primitives/link' import { BlogPostFragment } from '~/lib/cms/generated' @@ -17,6 +17,7 @@ interface CardProps { className?: string data?: any isNews?: boolean + isPress?: boolean reduced?: boolean } @@ -24,29 +25,32 @@ const Card = ({ className, data, isNews = false, + isPress = false, reduced = false }: CardProps) => { const [eventDate, setEventDate] = useState() - const [eventTime, setEventTime] = useState() + const [eventEndDate, setEventEndDate] = useState() useEffect(() => { setEventDate( - new Date(data?.eventDatetime).toLocaleDateString('default', { - year: '2-digit', - month: '2-digit', + new Date(data?.eventStartdate).toLocaleDateString('en-US', { + // year: '2-digit', + month: 'long', day: '2-digit' }) ) - setEventTime( - new Date(data?.eventDatetime).toLocaleTimeString('default', { - hour: '2-digit', - minute: '2-digit' + + setEventEndDate( + new Date(data?.eventEnddate).toLocaleDateString('en-US', { + // year: '2-digit', + month: 'long', + day: '2-digit' }) ) - }, [data?.eventDatetime]) + }, [data?.eventStartdate, data?.eventEnddate]) const [title, setTitle] = useState() - const [eventTitle, setEventTitle] = useState() + // const [eventTitle, setEventTitle] = useState() useEffect(() => { if (data?.title?.length > 60) { @@ -55,17 +59,10 @@ const Card = ({ } setTitle(data?.title) - - if (data?.eventTitle?.length > 60) { - setEventTitle(data?.eventTitle.slice(0, 60) + '...') - return - } - - setEventTitle(data?.eventTitle) - }, [data?.eventTitle, data?.title]) + }, [data?.title]) return ( - +
{!isNews && ( @@ -80,30 +77,24 @@ const Card = ({ )} - {!isNews && } - {isNews ? data?.date : eventDate} + {(isNews || isPress) && formatDate(data?.date)} + {!isNews && !isPress && } + {!isNews && !isPress && eventDate} + {!isNews && !isPress && eventEndDate !== eventDate + ? ` - ${eventEndDate} ` + : ''} - {!isNews && ( - - - {eventTime} HS - - )}
- {data?.title} + {data?.title}
- {isNews ? title : eventTitle} + {title} {!reduced &&

{isNews ? getDescription(data) : data?.eventDesc}

} - + {isNews ? 'READ ARTICLE' : 'LEARN MORE'}
diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 1a93c46..8841d83 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -99,6 +99,10 @@ font-size: tovw(14px, 'default', 12px); text-transform: uppercase; font-family: var(--font-dm-mono); + + &:first-child { + top: tovw(60px, 'default', 50px); + } } } @@ -191,6 +195,12 @@ gap: tovw(70px, 'default', 15px); } + a { + @include respond-to('mobile') { + font-size: tovw(15px, 'default', 15px); + } + } + display: flex; gap: tovw(105px, 'default', 65px); } diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss index 1411f5f..e1c1a0d 100644 --- a/src/components/sections/blog/hero/hero.module.scss +++ b/src/components/sections/blog/hero/hero.module.scss @@ -41,18 +41,17 @@ &__mobile { @include respond-to('mobile') { - display: none; - - // display: flex; - // margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0; - // width: 130%; - // mix-blend-mode: screen; - // place-self: center; - // mask-image: linear-gradient( - // 0deg, - // rgb(255 255 255 / 0) 0%, - // rgb(0 0 0) 25% - // ); + display: flex; + margin: tovw(-70px, 'mobile', -160px) 0; + width: 280%; + transform: translateX(31.5%); + mix-blend-mode: screen; + place-self: center; + mask-image: linear-gradient( + 0deg, + rgb(255 255 255 / 0) 0%, + rgb(0 0 0) 25% + ); } display: none; @@ -63,6 +62,7 @@ .container { @include respond-to('mobile') { margin-top: unset; + padding-top: tovw(80px, 'tablet'); } z-index: 10; @@ -70,6 +70,10 @@ margin-top: tovw(-300px, 'default', -1450px); h1 { + @include respond-to('mobile') { + font-size: tovw(50px, 'mobile'); + } + padding-bottom: tovw(120px, 'default', 80px); } diff --git a/src/components/sections/newsroom/press/index.tsx b/src/components/sections/newsroom/press/index.tsx index a689b83..f8e2b42 100644 --- a/src/components/sections/newsroom/press/index.tsx +++ b/src/components/sections/newsroom/press/index.tsx @@ -3,7 +3,7 @@ import 'keen-slider/keen-slider.min.css' import { useKeenSlider } from 'keen-slider/react' import { Key, useState } from 'react' -import { BlogCard } from '~/components/common/card' +import Card from '~/components/common/card' import { ArrowSlider } from '~/components/icons/arrow' import { Container } from '~/components/layout/container' import Section from '~/components/layout/section' @@ -17,7 +17,14 @@ export interface Props { pressHeading: string pressHeadingNumber: string } - blogData: any + blogData: { + pressreleaseLink: string + pressreleaseTitle: string + pressreleaseDatetime: string + pressreleaseImage: { + url: string + } + }[] } const Press = ({ data, blogData }: Props) => { @@ -55,7 +62,12 @@ const Press = ({ data, blogData }: Props) => {
{blogData.map((item: any, i: Key) => ( - + ))}
diff --git a/src/components/sections/partners/opportunities/opportunities.module.scss b/src/components/sections/partners/opportunities/opportunities.module.scss index 7ecef68..c25f409 100644 --- a/src/components/sections/partners/opportunities/opportunities.module.scss +++ b/src/components/sections/partners/opportunities/opportunities.module.scss @@ -23,6 +23,7 @@ @include respond-to('mobile') { display: flex; flex-direction: column; + padding-top: tovw(60px, 'tablet', 60px); } display: grid; @@ -33,7 +34,7 @@ &:not(:first-child) { @include respond-to('mobile') { - margin-top: tovw(86px, 'mobile'); + margin-top: tovw(86px, 'tablet', 86px); } margin-top: tovw(86px, 'default', 30px); diff --git a/src/lib/cms/queries/community.js b/src/lib/cms/queries/community.js index c23645b..0af92d1 100644 --- a/src/lib/cms/queries/community.js +++ b/src/lib/cms/queries/community.js @@ -16,16 +16,17 @@ const CommunityHero = { const Events = { query: ` { - allEvents(orderBy: [eventDatetime_ASC]) { - eventDatetime + allEvents(orderBy: [eventStartdate_ASC]) { eventDesc - eventImage { - url - } - eventLink + eventEnddate + eventStartdate eventLocation - eventTitle id + image { + url + } + link + title } } ` diff --git a/src/lib/cms/queries/press.js b/src/lib/cms/queries/press.js index aa0d6fb..d2d62d5 100644 --- a/src/lib/cms/queries/press.js +++ b/src/lib/cms/queries/press.js @@ -10,6 +10,20 @@ const PressHero = { } ` } +const PressReleases = { + query: ` + { + allPressReleases(orderBy: date_DESC) { + image { + url + } + link + title + date + } + } + ` +} const PressMedia = { query: ` @@ -80,5 +94,6 @@ export { PressFeaturedSection, PressHero, PressMedia, - PressPress + PressPress, + PressReleases } diff --git a/src/pages/press.tsx b/src/pages/press.tsx index daf643c..8d62484 100644 --- a/src/pages/press.tsx +++ b/src/pages/press.tsx @@ -15,7 +15,8 @@ import { PressFeaturedSection, PressHero, PressMedia, - PressPress + PressPress, + PressReleases } from '~/lib/cms/queries/press' import { request } from '../lib/datocms' @@ -28,21 +29,28 @@ export const getStaticProps = async () => { const heroBlogPost = allBlogPosts.data[0] - const [pressHero, pressFeatured, pressFeaturedData, pressMedia, pressPress] = - await Promise.all([ - request(PressHero), - request(PressFeaturedSection), - request(PressFeatured), - request(PressMedia), - request(PressPress) - ]) + const [ + pressHero, + pressFeatured, + pressFeaturedData, + pressReleases, + pressMedia, + pressPress + ] = await Promise.all([ + request(PressHero), + request(PressFeaturedSection), + request(PressFeatured), + request(PressReleases), + request(PressMedia), + request(PressPress) + ]) return { props: { heroData: pressHero?.pressPage, featuredData: pressFeatured?.pressPage, featuredPostsData: pressFeaturedData?.allBlogPosts?.slice(0, 3), - pressPostsData: allBlogPosts?.data, + pressPostsData: pressReleases?.allPressReleases, mediaData: pressMedia?.pressPage, pressData: pressPress?.pressPage, initialBlogPosts: {