Merge pull request #55 from mbwatson/update/layout-fixes

Update/layout fixes
RENCI · Jun 12, 2023 · 4b45f79 · 4b45f79
2 parents 66f5a1a + 3a48452
commit 4b45f79
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 76 deletions.
diff --git a/components/layout/text-image-section/text-image-section.js b/components/layout/text-image-section/text-image-section.js
@@ -2,28 +2,34 @@ import { Box, Stack } from '@mui/material'
 import Image from 'next/image'
 import PropTypes from 'prop-types'
 
-export const TextImageSection = ({ imageUrl, imageHeight, imageWidth, children }) => (
+export const TextImageSection = ({ imageUrl, imageHeight, imageWidth, imageAlt, children, imageAspectRatio, rounded }) => (
   <Stack
-    direction={{ sm: 'column', md: 'row' }}
-    spacing={{ sm: 2, md: 6 }}
+    direction={{ xs: 'column', sm: 'row' }}
+    spacing={{ xs: 2, sm: 6 }}
     sx={{
       marginY: '3rem',
     }}
   >
     {imageUrl && <Box sx={{
       flex: {
-        sm: '0 0',
-        md: `0 0 ${255 / 16}rem`
+        xs: '0 0',
+        sm: `0 0 ${255 / 16}rem`
       },
     }}>
-      <Image
-        priority
-        src={imageUrl}
-        width={imageWidth}
-        height={imageHeight}
-        layout="responsive"
-        objectFit='contain'
-      />
+      <Box sx={{ 
+        aspectRatio: imageAspectRatio,
+        ...(rounded && { borderRadius: '50%', overflow: 'hidden' })
+      }}>
+        <Image 
+          priority
+          src={imageUrl}
+          alt={imageAlt}
+          width={imageWidth}
+          height={imageHeight}
+          layout="responsive"
+          objectFit='cover'
+        />
+      </Box>
     </Box>}
     <Box sx={{ flex: '1' }}>
       {children}
@@ -35,5 +41,8 @@ TextImageSection.propTypes = {
   imageUrl: PropTypes.string,
   imageHeight: PropTypes.number,
   imageWidth: PropTypes.number,
+  imageAlt: PropTypes.string, 
+  imageAspectRatio: PropTypes.string,
+  rounded: PropTypes.bool,
   children: PropTypes.node.isRequired,
 }
diff --git a/components/people/person-card.js b/components/people/person-card.js
@@ -1,48 +1,60 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Card, CardMedia, CardContent, Typography } from '@mui/material'
-import { Link } from '../link'
-import avatar from '../../images/generic-avatar.svg'
-import { useTheme } from '@emotion/react'
+import React from "react";
+import PropTypes from "prop-types";
+import { Card, CardMedia, CardContent, Typography, Box } from "@mui/material";
+import { Link } from "../link";
+import avatar from "../../images/generic-avatar.svg";
+import { useTheme } from "@emotion/react";
 
 export const PersonCard = ({ person, showTitle = false, anchorName }) => {
   const theme = useTheme();
-  
+
   return (
-      <Card elevation={ 0 } name={ anchorName } sx={{ 
-        display: 'flex',
-        flexDirection: 'column',
+    <Card
+      elevation={0}
+      name={anchorName}
+      sx={{
+        "& a": { textDecoration: "none" },
+      }}
+    >
+      <Link to={`/people/${person.slug}`}>
+        <Box sx={{
+          display: "flex",
+          flexDirection: "column",
+          [theme.breakpoints.down("sm")]: {
+            flexDirection: "row",
+            alignItems: "center",
+          },
+        }}>
+          <CardMedia
+            component="img"
+            sx={{
+              aspectRatio: "1 / 1",
+              borderRadius: "50%",
 
-        [theme.breakpoints.down('sm')]: {
-          flexDirection: 'row',
-          alignItems: 'center'
-        }
-      }}>
-        <CardMedia
-          component="img"
-          sx={{ 
-            aspectRatio: '1 / 1',
-            borderRadius: '50%',
+              [theme.breakpoints.down("sm")]: {
+                width: 100,
+              },
+            }}
+            image={person.photoURL ? person.photoURL : avatar.src}
+            alt={`${person.firstName} ${person.lastName} photo`}
+          />
 
-            [theme.breakpoints.down('sm')]: {
-              width: 100,
-            }
-          }}
-          image={ person.photoURL ? person.photoURL : avatar.src }
-          alt={ `${person.firstName} ${person.lastName} photo` }
-        />
+          <CardContent sx={{ display: "flex", flexDirection: "column" }}>
+            <Typography mb={0.5} sx={{ textDecoration: "underline" }}>
+              {person.firstName} {person.lastName}
+            </Typography>
 
-        <CardContent sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Link to={ `/people/${ person.slug }` }>
-            { person.firstName } { person.lastName }
-          </Link>
-          { showTitle && person.title && (
-            <Typography variant='caption'>{ person.title }</Typography>
-          )}
-        </CardContent>
-      </Card>
-  )
-}
+            {showTitle && person.title && (
+              <Typography variant="caption" sx={{ lineHeight: 1.4 }}>
+                {person.title}
+              </Typography>
+            )}
+          </CardContent>
+        </Box>
+      </Link>
+    </Card>
+  );
+};
 
 PersonCard.propTypes = {
   anchorName: PropTypes.string,
@@ -54,4 +66,4 @@ PersonCard.propTypes = {
     title: PropTypes.string,
     photo: PropTypes.object,
   }),
-}
+};
diff --git a/pages/collaborations/[id].js b/pages/collaborations/[id].js
@@ -3,6 +3,7 @@ import { fetchStrapiCollaboration } from '../../lib/strapi'
 import {
   Link, Page, PersonCard, PersonGrid, Section, Markdown
 } from '../../components'
+import { Divider } from '@mui/material'
 
 export default function Collaboration({ collaboration }) {
   return (
@@ -13,36 +14,49 @@ export default function Collaboration({ collaboration }) {
     >
       {
         !collaboration.featuredImage && collaboration.description && (
-          <Section title="Description">
-            <Markdown>
-              {collaboration.description}
-            </Markdown>
-          </Section>
+          <>
+            <Section title="Description">
+              <Markdown>
+                {collaboration.description}
+              </Markdown>
+            </Section>
+            <Divider />
+          </>
         )
       }
       {
         collaboration.role && (
-          <Section title="RENCI's Role">
-            <Markdown>
-              {collaboration.role}
-            </Markdown>
-          </Section>
+          <>
+            <Section title="RENCI's Role">
+              <Markdown>
+                {collaboration.role}
+              </Markdown>
+            </Section>
+            <Divider />
+          </>
         )
       }
 
-      <Section title="Projects">
-        <ul style={{ margin: 0 }}>
-          {
-            collaboration.projects
-              .sort((p, q) => p.name.toLowerCase() < q.name.toLowerCase() ? -1 : 1)
-              .map(project => (
-                <li key={ `${ collaboration.name }-${ project.name }` }>
-                  <Link to={ `/projects/${ project.slug }` }>{ project.name }</Link>
-                </li>
-              ))
-          }
-        </ul>
-      </Section>
+      {
+        collaboration.projects?.length !== 0 && (
+          <>
+            <Section title="Projects">
+              <ul style={{ margin: 0 }}>
+                {
+                  collaboration.projects
+                    .sort((p, q) => p.name.toLowerCase() < q.name.toLowerCase() ? -1 : 1)
+                    .map(project => (
+                      <li key={ `${ collaboration.name }-${ project.name }` }>
+                        <Link to={ `/projects/${ project.slug }` }>{ project.name }</Link>
+                      </li>
+                    ))
+                }
+              </ul>
+            </Section>
+            <Divider />
+          </>
+        )
+      }
 
       <Section title="Contributors">
         <h3>People</h3>

diff --git a/pages/people/[slug].js b/pages/people/[slug].js
@@ -10,6 +10,9 @@ export default function Person({ person }) {
         imageUrl={ person.photoURL }
         imageWidth={400}
         imageHeight={400}
+        imageAspectRatio={"1 / 1"}
+        imageAlt={ `Photo of ${ person.firstName } ${ person.lastName }` }
+        rounded={true}
         >
           <Typography variant="h1" >
             { person.fullName }

diff --git a/pages/teams/index.js b/pages/teams/index.js
@@ -28,7 +28,7 @@ export default function Teams({ teams }) {
         Learn more about RENCI&apos;s Operations teams below.
       </Typography>
 
-      <ul style={{ margin: 0 }}>
+      <ul>
         {
           teams.map(team => (
             <li key={ `link-to-${ team.name }` }>