Merge pull request #49 from ecss-soton/consistent-collection-archive

Society collection

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",

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 (

src/app/_components/CollectionArchive/index.module.scss

@@ -52,18 +52,46 @@
   }
 }
 
+.committeegrid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  width: 100%;
+  gap: var(--base) calc(var(--base) * 2);
+
+  @include mid-break {
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--base) calc(var(--base) * 2);
+  }
+}
+
 .column {
   grid-column-end: span 4;
 
   @include mid-break {
-    grid-column-end: span 6;
+    grid-column-end: span 3;
   }
 
   @include small-break {
     grid-column-end: span 6;
   }
 }
 
+.columnCommittee {
+  grid-column-end: span 4;
+
+  @include large-break {
+    grid-column-end: span 4;
+  }
+
+  @include mid-break {
+    grid-column-end: span 6;
+  }
+
+  @include small-break {
+    grid-column-end: span 12;
+  }
+}
+
 .pagination {
   margin-top: calc(var(--base) * 2);
 

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'
@@ -117,7 +118,7 @@ export const CollectionArchive: React.FC<Props> = props => {
           depth: 1,
           limit,
           page,
-          sort: 'level',
+          sort: relationTo === 'committee' ? 'position' : 'level',
           where: {
             ...(categories
               ? {
@@ -172,7 +173,7 @@ export const CollectionArchive: React.FC<Props> = props => {
       <div className={classes.scrollRef} ref={scrollRef} />
       {!isLoading && error && <Gutter>{error}</Gutter>}
       <Fragment>
-        {showPageRange !== false && populateBy !== 'selection' && (
+        {/* {showPageRange !== false && populateBy !== 'selection' && (
           <Gutter>
             <div className={classes.pageRange}>
               <PageRange
@@ -183,13 +184,18 @@ export const CollectionArchive: React.FC<Props> = props => {
               />
             </div>
           </Gutter>
-        )}
+        )} */}
         <Gutter>
-          <div className={classes.grid}>
+          <div className={relationTo === 'committee' ? classes.committeegrid : classes.grid}>
             {results.docs?.map((result, index) => {
               if (typeof result === 'object' && result !== null) {
                 return (
-                  <div className={classes.column} key={index}>
+                  <div
+                    className={
+                      relationTo === 'committee' ? classes.columnCommittee : classes.column
+                    }
+                    key={index}
+                  >
                     {/* {relationTo == ('projects' || 'posts' || 'committee') && (
                       <Card doc={result} relationTo={relationTo} showCategories />
                     )} */}
@@ -200,6 +206,9 @@ export const CollectionArchive: React.FC<Props> = props => {
                     {relationTo === 'sponsors' && 'slug' in result && 'name' in result && (
                       <SponsorItem slug={result.slug} name={result.name} logo={result.logo} />
                     )}
+                    {relationTo === 'committee' && 'bio' in result && (
+                      <CommitteeItem committee={result} />
+                    )}
                   </div>
                 )
               }

src/app/_components/CommitteeItem/index.module.scss

@@ -0,0 +1,201 @@
+@import '../../_css/common';
+
+.card  {
+  border: 1px var(--theme-elevation-200) solid;
+  border-radius: 4px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.person {
+    height: 100%;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+
+    @include small-break {
+        max-width: 500px;
+        max-height: 270px;
+    }
+}
+
+.rectangle {
+    position: relative;
+    background-color: #f2f2f2;
+    border-radius: 37px;
+    height: 100%;
+    width: 80%;
+    position: absolute; 
+    left: 23%;
+    z-index: -1;
+    padding-left: 12%;
+    padding-top: 12%;
+    padding-right: 1%;
+}
+
+.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: 100%;
+    height: 100%;
+    color: #000;
+    text-align: center;
+    line-height: 104%;
+    margin: 0px;
+}
+
+.firstName {
+    font-weight: 700;
+    font-style: normal;
+    font-size: max(2.3vw, 25px);
+    line-height: 104%;
+
+    @include mid-break {
+        font-size: 4.4vw;
+    }
+
+    @include small-break {
+      font-size: min(44px,8vw);
+    }
+}
+
+.lastName {
+    color: #000000;
+    font-weight: 400;
+    letter-spacing: 0;
+    font-size: max(2.3vw, 25px);
+    line-height: 104%;
+
+    @include mid-break {
+      font-size: 4.4vw;
+    }
+
+    @include small-break {
+      font-size: min(44px,8vw);
+    }
+}
+
+.role {
+  color: #727272;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 104%; /* 20.8px */
+  font-size: max(1.1vw, 12px);
+  text-align: center;
+  position: relative;
+  top: 15px;
+
+  @include mid-break {
+    font-size: 2.2vw;
+  }
+
+  @include small-break {
+    font-size: min(22px,4vw);
+  }
+}
+
+.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: 7%;
+  position: relative;
+  padding-bottom: 7%;
+  display: flex;
+  flex-shrink: 1;
+  height: 100%;
+  padding-right: 60%;
+}
+
+.profileImage {
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
+  border-radius: 50%;
+  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;
+  }
+}