Skip to content

Commit

Permalink
Merge pull request #29 from mvhacks/team-mobile-edits
Browse files Browse the repository at this point in the history 
mobile team edits (smaller & row change)
  • Loading branch information
@emilymarkova
emilymarkova authored Jan 14, 2025
2 parents 8bca77f + 648fd51 commit a234c4f
Showing 1 changed file with 145 additions and 95 deletions.
240 changes: 145 additions & 95 deletions src/components/Team.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import Table from '@mui/joy/Table';
import Typography from '@mui/joy/Typography';
import Button from "@mui/joy/Button";
import blank from "../images/Team/blank.jpeg";
import e from "../images/email.png";
import g from "../images/github.png";
import Button from '@mui/joy/Button';
import blank from '../images/Team/blank.jpeg';
import e from '../images/email.png';
import g from '../images/github.png';

function addPerson(name: string, image: string, role: string, link: string, type: string) {

let typeImage = type === "Github" ? g : e;
return { name, image, role, link, type, typeImage};

}

const directors = [
Expand Down Expand Up @@ -49,125 +47,177 @@ const sponsorship = [
];

const teams = [
{ name: "Directors", members: directors },
{ name: "Tech", members: tech },
{ name: "Outreach", members: outreach },
{ name: "Sponsorship", members: sponsorship }
{ name:"Directors", members: directors },
{ name:"Tech", members: tech },
{ name:"Outreach", members: outreach },
{ name:"Sponsorship", members: sponsorship }
];

export default function Team() {
return (
<div style={{ padding: '5%' }}>
<div style={{ padding:'5%' }}>
<Typography
level="h2"
level='h2'
sx={{
color: '#ffffff',
marginBottom: '2%',
textAlign: "center"
color:'#ffffff',
marginBottom:'2%',
textAlign:'center'
}}
>
TEAM
</Typography>

{teams.map((team) => (

<Table
key={team.name}
sx={{
backgroundColor: '#221a46',
marginTop: '2%',
color: 'white',
border: '6px solid #c6add4',
overflow: 'hidden',
backgroundColor:'#221a46',
marginTop:'2%',
color:'white',
border:'6px solid #c6add4',
overflow:'hidden',
'& td, & th': {
padding: '12px 16px',
fontSize: '1.1rem',
wordWrap: 'break-word',
whiteSpace: 'normal' }
padding:'12px 16px',
fontSize:'1.1rem',
wordWrap:'break-word',
whiteSpace:'normal'
},
'@media (max-width: 700px)': {
'& tr > td > div': {
display:'flex',
flexWrap:'wrap',
justifyContent:'space-evenly',
gap:'12px'
},
'& tr > td > div > div': {
width:'46% !important',
margin:'0px !important',
display:'flex',
flexDirection:'column',
alignItems:'center',
gap:'2px'
},
'& tr > td > div > div img': {
height:'90px',
width:'90px',
objectFit:'cover'
},
'& tr > td > div > div > div:first-of-type': {
fontSize:'13px !important',
fontWeight:'bold',
color:'white',
},
'& tr > td > div > div > div:nth-of-type(2)': {
fontSize:'10px !important',
color:'grey',
}
}
}}
>
<tbody key={team.name}>
<tbody>
<tr>
<td style={{
fontSize: '20px',
textTransform: 'uppercase',
padding: '12px 16px'
}}>
<td
style={{
fontSize:'20px',
textTransform:'uppercase',
padding:'12px 16px'
}}
>
{team.name}
</td>
</tr>
<tr>
<td>
<div style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'left',
gap: '16px'
}}>

{team.members.map((member, i) => (
<div key={i} style={{
width: '180px',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center'
}}>
<img
src={member.image}
height="170px"
width="170px"
id="member"
alt="member-image"
style={{ objectFit: "cover"}}
/>
<div style={{
fontSize: '17px',
fontWeight: 'bold',
color: 'white'
}}>
{member.name}
</div>
<div style={{
fontSize: '15px',
color: 'grey'
}}>
{member.role}
</div>
<div>
<Button
sx={{
borderRadius: "10px",
marginTop: "3%",
backgroundColor: '#c6add4',
height: "30px",
width:"170px",
'&:hover': {backgroundColor: '#bb97cf'}
<td>
<div
style={{
display:'flex',
flexWrap:'wrap',
justifyContent:'center',
gap:'16px'
}}
>
{team.members.map((member, i) => (
<div
key={i}
style={{
textAlign:'center',
justifyContent:'center',
alignItems:'center',
width:'45%',
maxWidth:'180px',
margin:'5px'
}}
>
<img
src={member.image}
height="170px"
width="170px"
id="member"
alt="member-image"
style={{ objectFit: 'cover' }}
/>
<div
style={{
fontSize:'17px',
fontWeight:'bold',
color:'white'
}}
>
{member.name}
</div>
<div
style={{
fontSize:'15px',
color:'grey'
}}
id="link"
component="a"
href={member.link}
>
<img
src={member.typeImage}
height="25"
width="25"
id="member"
alt="member-link"
style={{paddingRight: "10px"}}
/>
{member.type}
</Button>
{member.role}
</div>
<div>
<Button
sx={{
borderRadius:'10px',
marginTop:'3%',
backgroundColor:'#c6add4',
height:'30px',
width:'170px',
'&:hover': {
backgroundColor:'#bb97cf'
},
'@media (max-width: 700px)': {
height:'20px',
width:'90px',
fontSize:'13px',
padding:'0 8px',
'& img': {
height:'18px !important',
width:'18px !important'
}
}
}}
id="link"
component="a"
href={member.link}
>
<img
src={member.typeImage}
height="25"
width="25"
id="member"
alt="member-link"
style={{ paddingRight: '10px' }}
/>
{member.type}
</Button>
</div>
</div>
</div>
))}

))}
</div>
</td>
</tr>
</tbody>
</Table>

</Table>
))}

</div>
);
}

0 comments on commit a234c4f

Please sign in to comment.