From f0408ed3c949a4751ce1d59e3ce8b2a1c42fa770 Mon Sep 17 00:00:00 2001 From: Casper <148681165+casperUoS@users.noreply.github.com> Date: Tue, 3 Sep 2024 14:12:54 +0100 Subject: [PATCH 1/4] Got committee cards but need to add flex grow --- package-lock.json | 9 + package.json | 1 + src/app/_blocks/ArchiveBlock/index.tsx | 4 +- .../CollectionArchive/index.module.scss | 20 +++ .../_components/CollectionArchive/index.tsx | 10 +- .../CommitteeItem/index.module.scss | 169 ++++++++++++++++++ src/app/_components/CommitteeItem/index.tsx | 57 ++++++ src/app/_components/Media/index.tsx | 4 +- src/app/_css/app.scss | 1 + src/app/_css/colors.scss | 1 + src/payload/blocks/ArchiveBlock/index.ts | 4 +- src/payload/collections/Committee.ts | 113 +++++------- src/payload/payload-types.ts | 81 ++++----- 13 files changed, 358 insertions(+), 116 deletions(-) create mode 100644 src/app/_components/CommitteeItem/index.module.scss create mode 100644 src/app/_components/CommitteeItem/index.tsx diff --git a/package-lock.json b/package-lock.json index a319c98..c50bf68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@dnd-kit/sortable": "^8.0.0", + "@next/font": "^14.2.7", "@payloadcms/bundler-webpack": "^1.0.7", "@payloadcms/db-mongodb": "^1.0.0", "@payloadcms/db-postgres": "^0.1.9", @@ -3227,6 +3228,14 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/@next/font": { + "version": "14.2.7", + "resolved": "https://registry.npmjs.org/@next/font/-/font-14.2.7.tgz", + "integrity": "sha512-0WvqMw4Ynwtj5ftyKmnpVH3tam5U/hg0D9EPdbMlv1hvoeSyAK+kkxQkCSEH8G2Jgt5/lTk6FLdqZ+5gnw+0aw==", + "peerDependencies": { + "next": "*" + } + }, "node_modules/@next/swc-darwin-arm64": { "version": "14.1.1", "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.1.tgz", diff --git a/package.json b/package.json index a8e8f52..09446f0 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@dnd-kit/sortable": "^8.0.0", + "@next/font": "^14.2.7", "@payloadcms/bundler-webpack": "^1.0.7", "@payloadcms/db-mongodb": "^1.0.0", "@payloadcms/db-postgres": "^0.1.9", diff --git a/src/app/_blocks/ArchiveBlock/index.tsx b/src/app/_blocks/ArchiveBlock/index.tsx index ea0ebb5..92b55c0 100644 --- a/src/app/_blocks/ArchiveBlock/index.tsx +++ b/src/app/_blocks/ArchiveBlock/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { Post, Project, Society, Sponsor } from '../../../payload/payload-types' +import { Committee, Post, Project, Society, Sponsor } from '../../../payload/payload-types' import { CollectionArchive } from '../../_components/CollectionArchive' import { CommitteeArchive } from '../../_components/CommitteeArchive' import { Gutter } from '../../_components/Gutter' @@ -49,11 +49,13 @@ export const ArchiveBlock: React.FC< | { relationTo: 'projects'; value: string | Project } | { relationTo: 'sponsors'; value: string | Sponsor } | { relationTo: 'societies'; value: string | Society } + | { relationTo: 'committee'; value: string | Committee } )[] = populatedDocs.filter(Boolean) as ( | { relationTo: 'posts'; value: string | Post } | { relationTo: 'projects'; value: string | Project } | { relationTo: 'sponsors'; value: string | Sponsor } | { relationTo: 'societies'; value: string | Society } + | { relationTo: 'committee'; value: string | Committee } )[] return ( diff --git a/src/app/_components/CollectionArchive/index.module.scss b/src/app/_components/CollectionArchive/index.module.scss index 3d302be..eee1811 100644 --- a/src/app/_components/CollectionArchive/index.module.scss +++ b/src/app/_components/CollectionArchive/index.module.scss @@ -52,9 +52,29 @@ } } +.committeegrid { + display: grid; + grid-template-columns: repeat(12, 1fr); + width: 100%; + gap: var(--base) 115px; + + @include large-break { + gap: var(--base) 80px; + } + + @include mid-break { + grid-template-columns: repeat(6, 1fr); + gap: calc(var(--base) / 2) var(--base); + } +} + .column { grid-column-end: span 4; + @include large-break { + grid-column-end: span 6; + } + @include mid-break { grid-column-end: span 6; } diff --git a/src/app/_components/CollectionArchive/index.tsx b/src/app/_components/CollectionArchive/index.tsx index f67d3e7..5e9e7fd 100644 --- a/src/app/_components/CollectionArchive/index.tsx +++ b/src/app/_components/CollectionArchive/index.tsx @@ -6,6 +6,7 @@ import qs from 'qs' import type { Committee, Post, Project, Society, Sponsor } from '../../../payload/payload-types' import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types' import { Card } from '../Card' +import { CommitteeItem } from '../CommitteeItem' import { Gutter } from '../Gutter' import { PageRange } from '../PageRange' import { Pagination } from '../Pagination' @@ -172,7 +173,7 @@ export const CollectionArchive: React.FC = props => {
{!isLoading && error && {error}} - {showPageRange !== false && populateBy !== 'selection' && ( + {/* {showPageRange !== false && populateBy !== 'selection' && (
= props => { />
- )} + )} */} -
+
{results.docs?.map((result, index) => { if (typeof result === 'object' && result !== null) { return ( @@ -200,6 +201,9 @@ export const CollectionArchive: React.FC = props => { {relationTo === 'sponsors' && 'slug' in result && 'name' in result && ( )} + {relationTo === 'committee' && 'bio' in result && ( + + )}
) } diff --git a/src/app/_components/CommitteeItem/index.module.scss b/src/app/_components/CommitteeItem/index.module.scss new file mode 100644 index 0000000..75676b2 --- /dev/null +++ b/src/app/_components/CommitteeItem/index.module.scss @@ -0,0 +1,169 @@ +@import '../../_css/common'; + +.card { + border: 1px var(--theme-elevation-200) solid; + border-radius: 4px; + height: 100%; + display: flex; + flex-direction: column; +} + +.person { + height: 263px; + display: flex; + width: 461px; + position: relative; + flex-direction: column; +} + +.rectangle { + position: relative; + background-color: #f2f2f2; + border-radius: 37px; + height: 263px; + position: absolute; + left: 102px; + z-index: -1; + padding-left: 63px; + padding-top: 75px; + padding-right: 5px; +} + +.vertical { + flex-direction: column; +} + +.horizontal { + flex-direction: row; + + &:local() { + .mediaWrapper { + width: 150px; + + @include mid-break { + width: 100%; + } + } + } + + @include mid-break { + flex-direction: column; + } +} + +.content { + padding: var(--base); + flex-grow: 1; + display: flex; + flex-direction: column; + gap: calc(var(--base) / 2); + + @include small-break { + padding: calc(var(--base) / 2); + gap: calc(var(--base) / 4); + } +} + +.title { + width: 266px; + height: 114px; + flex-shrink: 0; + color: #000; + text-align: center; + line-height: 104%; + margin: 0px; +} + +.firstName { + font-weight: 700; + font-size: 40px; + font-style: normal; +} + +.lastName { + color: #000000; + font-size: 40px; + font-weight: 400; + letter-spacing: 0; + line-height: 41.6px; +} + +.role { + color: #727272; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 104%; /* 20.8px */ + text-align: center; + position: relative; + top: 30px; +} + +.titleLink { + text-decoration: none; +} + +.centerAlign { + align-items: center; +} + +.body { + flex-grow: 1; +} + +.leader { + @extend %label; + display: flex; + gap: var(--base); +} + +.description { + margin: 0; +} + +.hideImageOnMobile { + @include mid-break { + display: none; + } +} + +.mediaWrapper { + text-decoration: none; + display: block; + position: relative; + aspect-ratio: 16 / 9; +} + +.container { + padding-top: 38px; + position: relative; +} + +.profileImage { + object-fit: cover; + width: 187px; + height: 187px; + flex-shrink: 0; + border-radius: 93.5px; + box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.25); + background-color: #ffffff; +} + +.placeholder { + background-color: var(--theme-elevation-50); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.actions { + display: flex; + align-items: center; + + @include mid-break { + flex-direction: column; + align-items: flex-start; + } +} diff --git a/src/app/_components/CommitteeItem/index.tsx b/src/app/_components/CommitteeItem/index.tsx new file mode 100644 index 0000000..1044ccc --- /dev/null +++ b/src/app/_components/CommitteeItem/index.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import { Poppins } from '@next/font/google' +import Image from 'next/image' +import Link from 'next/link' + +import { Committee, Media } from '../../../payload/payload-types' +import { Media as MediaComp } from '../Media' + +import classes from './index.module.scss' + +const poppins = Poppins({ + subsets: ['latin'], + weight: ['400', '700'], + style: ['normal'], +}) + +export const CommitteeItem: React.FC<{ + committee?: Committee +}> = props => { + const { + committee: { firstName, lastName, position, bio, logo }, + } = props + + // const { slug, title, categories, meta } = doc || {} + // const { description, image: metaImage } = meta || {} + + // const hasCategories = categories && Array.isArray(categories) && categories.length > 0 + // const titleToUse = titleFromProps || title + // const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space + // const href = `/${relationTo}/${slug}` + + return ( +
+ {logo && ( + + )} +
+

+ + {firstName} +
+ + + {lastName} +
+ + {position} +

+
+
+ ) +} diff --git a/src/app/_components/Media/index.tsx b/src/app/_components/Media/index.tsx index cb80e65..21d7e4f 100644 --- a/src/app/_components/Media/index.tsx +++ b/src/app/_components/Media/index.tsx @@ -5,7 +5,7 @@ import { Props } from './types' import { Video } from './Video' export const Media: React.FC = props => { - const { className, resource, htmlElement = 'div' } = props + const { className, resource, imgClassName, htmlElement = 'div' } = props const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video') const Tag = (htmlElement as any) || Fragment @@ -18,7 +18,7 @@ export const Media: React.FC = props => { } : {})} > - {isVideo ?