From cf87b4450668b632f7d264127709c58259cfb343 Mon Sep 17 00:00:00 2001 From: ciphrd Date: Sun, 25 Jun 2023 00:29:13 +0200 Subject: [PATCH 1/3] add support for new event medias --- src/components/Card/CardEvent.tsx | 8 +++++++- src/pages/events/[id]/onboarding.module.scss | 19 +++++++++++++++++++ src/pages/events/[id]/onboarding.tsx | 11 +++++++++++ src/queries/events/events.ts | 17 +++++++++++++++++ src/queries/events/redeemable.ts | 6 +++--- src/queries/fragments/event.ts | 9 +++++++++ src/queries/fragments/media.ts | 8 ++++++++ src/types/entities/LiveMinting.ts | 3 +++ 8 files changed, 77 insertions(+), 4 deletions(-) diff --git a/src/components/Card/CardEvent.tsx b/src/components/Card/CardEvent.tsx index 252c013fe..2c1ada2af 100644 --- a/src/components/Card/CardEvent.tsx +++ b/src/components/Card/CardEvent.tsx @@ -31,6 +31,7 @@ const _CardEvent = ({ event }: CardEventProps) => { imageUrl, location, availabilities, + thumbnailMedia, } = event const [now, setNow] = useState(new Date()) const dateStartAt = useMemo(() => new Date(startsAt), [startsAt]) @@ -48,6 +49,7 @@ const _CardEvent = ({ event }: CardEventProps) => { ) }) }, [dateStartAt, event, id]) + const eventTimeStatus = useMemo<"upcoming" | "ongoing" | "past">(() => { const isLive = now > dateStartAt if (!isLive) return "upcoming" @@ -55,14 +57,18 @@ const _CardEvent = ({ event }: CardEventProps) => { if (isPast) return "past" return "ongoing" }, [dateStartAt, endsAt, now]) + const styleBackground = { - backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url(${imageUrl})`, + backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0.54)), url(${ + thumbnailMedia?.url || imageUrl + })`, } const availabilitiesStr = useMemo(() => { return availabilities .map((availability) => availabilityLabels[availability]) .join(" and ") }, [availabilities]) + return (
diff --git a/src/pages/events/[id]/onboarding.module.scss b/src/pages/events/[id]/onboarding.module.scss index ebcc93a87..6ecb7cf72 100644 --- a/src/pages/events/[id]/onboarding.module.scss +++ b/src/pages/events/[id]/onboarding.module.scss @@ -10,3 +10,22 @@ max-width: 800px; margin: auto; } + +.header { + display: block; + width: 1000px; + margin: 0 auto; + max-width: 100%; + + img { + width: 100%; + } +} + +.h1 { + font-family: "Source Serif Pro", serif; + font-size: 2.35rem; + width: 800px; + margin: 0 auto; + margin-top: 2.2em; +} \ No newline at end of file diff --git a/src/pages/events/[id]/onboarding.tsx b/src/pages/events/[id]/onboarding.tsx index c84affc98..6997db340 100644 --- a/src/pages/events/[id]/onboarding.tsx +++ b/src/pages/events/[id]/onboarding.tsx @@ -26,6 +26,8 @@ type Props = { const EventsOnboardingPage: NextPage = ({ event, tokens }) => { const settings = useContext(SettingsContext) + console.log(event) + return ( <> @@ -54,6 +56,15 @@ const EventsOnboardingPage: NextPage = ({ event, tokens }) => {
+ +
+ {event.headerMedia && ( + {`${event.name} + )} +
+ +

{event.name}

+ Date: Sun, 25 Jun 2023 00:46:02 +0200 Subject: [PATCH 2/3] featured event has banner full-width on website --- .../Homepage/HomeFeaturedEvent.module.scss | 11 +++++++++ src/containers/Homepage/HomeFeaturedEvent.tsx | 18 ++++++++++++++ src/containers/Homepage/Homepage.tsx | 4 ++++ src/pages/events/[id]/onboarding.tsx | 2 -- src/pages/index.tsx | 24 ++++++++++++++++++- src/queries/events/featured.ts | 22 +++++++++++++++++ src/types/entities/LiveMinting.ts | 4 ++++ 7 files changed, 82 insertions(+), 3 deletions(-) create mode 100644 src/containers/Homepage/HomeFeaturedEvent.module.scss create mode 100644 src/containers/Homepage/HomeFeaturedEvent.tsx create mode 100644 src/queries/events/featured.ts diff --git a/src/containers/Homepage/HomeFeaturedEvent.module.scss b/src/containers/Homepage/HomeFeaturedEvent.module.scss new file mode 100644 index 000000000..ae01a18d1 --- /dev/null +++ b/src/containers/Homepage/HomeFeaturedEvent.module.scss @@ -0,0 +1,11 @@ +.root { + display: block; + width: 100%; + height: 30vh; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} \ No newline at end of file diff --git a/src/containers/Homepage/HomeFeaturedEvent.tsx b/src/containers/Homepage/HomeFeaturedEvent.tsx new file mode 100644 index 000000000..85709f668 --- /dev/null +++ b/src/containers/Homepage/HomeFeaturedEvent.tsx @@ -0,0 +1,18 @@ +import { LiveMintingEvent } from "types/entities/LiveMinting" +import style from "./HomeFeaturedEvent.module.scss" +import cs from "classnames" +import Link from "next/link" + +interface Props { + event: LiveMintingEvent +} +export function HomeFeaturedEvent({ event }: Props) { + console.log(event) + return ( + + + {`${event.name} + + + ) +} diff --git a/src/containers/Homepage/Homepage.tsx b/src/containers/Homepage/Homepage.tsx index 986746223..6e26828af 100644 --- a/src/containers/Homepage/Homepage.tsx +++ b/src/containers/Homepage/Homepage.tsx @@ -9,6 +9,7 @@ import { NFTArticle } from "../../types/entities/Article" import { LiveMintingEvent } from "../../types/entities/LiveMinting" import { HomeEvents } from "./HomeEvents" import { HomeIncoming } from "./HomeIncoming" +import { HomeFeaturedEvent } from "./HomeFeaturedEvent" interface HomepageProps { generativeTokens: GenerativeToken[] @@ -16,6 +17,7 @@ interface HomepageProps { randomGenerativeToken: GenerativeToken | null articles: NFTArticle[] events: LiveMintingEvent[] + featuredEvent: LiveMintingEvent | null } const _Homepage = ({ @@ -24,6 +26,7 @@ const _Homepage = ({ randomGenerativeToken, articles, events, + featuredEvent, }: HomepageProps) => { return (
@@ -31,6 +34,7 @@ const _Homepage = ({ articles={articles} randomGenerativeToken={randomGenerativeToken} /> + {featuredEvent && } {events.length > 0 && } {incomingTokens.length > 0 && ( diff --git a/src/pages/events/[id]/onboarding.tsx b/src/pages/events/[id]/onboarding.tsx index 6997db340..f33fc5d66 100644 --- a/src/pages/events/[id]/onboarding.tsx +++ b/src/pages/events/[id]/onboarding.tsx @@ -26,8 +26,6 @@ type Props = { const EventsOnboardingPage: NextPage = ({ event, tokens }) => { const settings = useContext(SettingsContext) - console.log(event) - return ( <> diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ca611622c..b8e32183c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -21,7 +21,10 @@ import { Frag_UserBadge } from "../queries/fragments/user" import { Homepage } from "../containers/Homepage/Homepage" import { NFTArticle } from "../types/entities/Article" import { Frag_EventCard } from "../queries/fragments/event" -import { LiveMintingEvent } from "../types/entities/LiveMinting" +import { + DashboardFeatured, + LiveMintingEvent, +} from "../types/entities/LiveMinting" interface Props { randomGenerativeToken: GenerativeToken | null @@ -30,6 +33,7 @@ interface Props { articles: NFTArticle[] listings: Listing[] events: LiveMintingEvent[] + featuredEvent: LiveMintingEvent | null } const Home: NextPage = ({ @@ -38,6 +42,7 @@ const Home: NextPage = ({ incomingTokens, articles, events, + featuredEvent, }) => { return ( <> @@ -65,8 +70,10 @@ const Home: NextPage = ({ content="https://www.fxhash.xyz/images/og/og1.jpg" /> + ({ query: gql` ${Frag_EventCard} @@ -98,6 +106,19 @@ export async function getServerSideProps() { id ...EventCard } + featured(where: { id: 1 }) { + id + event { + id + name + headerMedia { + ...MediaDetails + } + thumbnailMedia { + ...MediaDetails + } + } + } } `, variables: { @@ -173,6 +194,7 @@ export async function getServerSideProps() { incomingTokens: data.incomingTokens, articles: data.articles, events: dataEvent.events || [], + featuredEvent: dataEvent.featured?.event, }, } } diff --git a/src/queries/events/featured.ts b/src/queries/events/featured.ts new file mode 100644 index 000000000..5065880fa --- /dev/null +++ b/src/queries/events/featured.ts @@ -0,0 +1,22 @@ +import { gql } from "@apollo/client" +import { Frag_EventMedia } from "queries/fragments/media" + +export const getFeaturedQuery = gql` + ${Frag_EventMedia} + + query GetFeatured { + featured(where: { id: 1 }) { + id + event { + id + name + headerMedia { + ...MediaDetails + } + thumbnailMedia { + ...MediaDetails + } + } + } + } +` diff --git a/src/types/entities/LiveMinting.ts b/src/types/entities/LiveMinting.ts index 2f8db7cd5..166953cf8 100644 --- a/src/types/entities/LiveMinting.ts +++ b/src/types/entities/LiveMinting.ts @@ -33,6 +33,10 @@ export interface LiveMintingEvent { export type LiveMintingEventWithArtists = LiveMintingEvent & { artists: User[] } +export interface DashboardFeatured { + event: LiveMintingEvent | null +} + export interface LiveMintingPassGroup { address: string label: string From 66ab726d4c78e4db484f6454f9a2014e77b9ca54 Mon Sep 17 00:00:00 2001 From: ciphrd Date: Sun, 25 Jun 2023 14:42:30 +0200 Subject: [PATCH 3/3] fix event article header width on mobile --- src/pages/events/[id]/onboarding.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/events/[id]/onboarding.module.scss b/src/pages/events/[id]/onboarding.module.scss index 6ecb7cf72..cfc8baef3 100644 --- a/src/pages/events/[id]/onboarding.module.scss +++ b/src/pages/events/[id]/onboarding.module.scss @@ -28,4 +28,5 @@ width: 800px; margin: 0 auto; margin-top: 2.2em; + max-width: 100%; } \ No newline at end of file