Skip to content

Commit

Permalink
Made Events Page More Responsive (#151)
Browse files Browse the repository at this point in the history 
* fixed events filtering buttons and events card UI

* removed commented out code

* enhance code with Grid for future events

* adjust Grid margin

* adjust margin of past events title

* update buttons style to Grid

---------

Co-authored-by: joycellu <[email protected]>

Fixed about page photo alignments (#152)

Co-authored-by: Will-Hsu <[email protected]>

Updated Opportunities Group Image (#158)

Re-sorted years of events and toggled 2024 by default (#156)
  • Loading branch information
@joycellu @kevwu27
joycellu authored and kevwu27 committed Oct 2, 2024
1 parent 5b5f248 commit d17d41d
Show file tree
Hide file tree
Showing 8 changed files with 520 additions and 313 deletions.
421 changes: 404 additions & 17 deletions backend/package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion backend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
"express-validator": "^7.0.1",
"luxon": "^3.4.3",
"mongoose": "^7.3.1",
"nodemon": "^2.0.22"
"nodemon": "^2.0.22",
"qrcode": "^1.5.3"
},
"devDependencies": {
"eslint": "^8.43.0"
Expand Down
271 changes: 73 additions & 198 deletions frontend/src/components/About/MeetTheTeam.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,216 +213,91 @@ const MeetTheTeam = () => {
alignItems: 'center',
}}
>
{isMiddleScreen && (
<Grid container item xs={12} justifyContent="center">
{currentCategory.members
.slice((currentPage - 1) * 6, currentPage * 6)
.map((member, index) => (
<Grid
item
xs={12}
sm={3.5}
md={3.1}
key={index}
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
<Grid container item xs={12} sm={9} md={9} lg={9} justifyContent="center">
{currentCategory.members
.slice((currentPage - 1) * 6, currentPage * 6)
.map((member, index) => (
<Grid
item
xs={6}
sm={4}
md={4}
lg={4}
key={index}
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
>
<div
style={{
width: verySmallScreen
? '120px'
: isSmallScreen
? '120px'
: isMiddleScreen
? '140px'
: '190px',
height: verySmallScreen
? '120px'
: isSmallScreen
? '120px'
: isMiddleScreen
? '140px'
: '190px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
style={{
width: '190px',
height: '190px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
src={member.photo}
alt="img"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
</div>
<h3
<img
src={member.photo}
key={member.photo}
alt="img"
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '700',
fontSize: '18px',
width: '100%',
height: '100%',
objectFit: 'cover',
}}
>
{member.name}
</h3>
<h5
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '14px',
marginTop: '-2%',
}}
>
{member.title}
</h5>
</Grid>
))}

{emptyMembers.map((member, index) => (
<Grid item xs={12} sm={3.5} md={3.1} key={index + currentCategory.members.length}>
{/* Empty placeholder, no visible content */}
</Grid>
))}
</Grid>
)}
{isSmallScreen && (
<Grid container item xs={12} justifyContent="center">
{currentCategory.members
.slice((currentPage - 1) * 6, currentPage * 6)
.map((member, index) => (
<Grid
item
xs={6}
sm={3.5}
md={0}
lg={3.1}
key={index}
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
/>
</div>
<h3
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '700',
fontSize: '18px',
}}
>
<div
style={{
width: verySmallScreen ? '120px' : '140px',
height: verySmallScreen ? '120px' : '140px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
src={member.photo}
key={member.photo}
alt="img"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
</div>
<h3
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '700',
fontSize: '16px',
}}
>
{member.name}
</h3>
<h5
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '12px',
marginTop: '-2%',
}}
>
{member.title}
</h5>
</Grid>
))}

{emptyMembers.map((member, index) => (
<Grid item xs={12} sm={3.5} md={3.1} key={index + currentCategory.members.length}>
{/* Empty placeholder, no visible content */}
</Grid>
))}
</Grid>
)}

{!isMiddleScreen && !isSmallScreen && (
<Grid container item xs={9} justifyContent="center">
{currentCategory.members
.slice((currentPage - 1) * 6, currentPage * 6)
.map((member, index) => (
<Grid
item
xs={12}
sm={3.5}
md={0}
lg={3.1}
key={index}
sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}
{member.name}
</h3>
<h5
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '14px',
marginTop: '-2%',
}}
>
<div
style={{
width: '200px',
height: '200px',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<img
src={member.photo}
key={member.photo}
alt="img"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
}}
/>
</div>
<h3
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '700',
fontSize: '18px',
}}
>
{member.name}
</h3>
<h5
style={{
color: 'white',
textAlign: 'center',
fontFamily: 'Inter',
fontWeight: '500',
fontSize: '14px',
marginTop: '-2%',
}}
>
{member.title}
</h5>
</Grid>
))}

{emptyMembers.map((member, index) => (
<Grid item xs={12} sm={3.5} md={3.1} key={index + currentCategory.members.length}>
{/* Empty placeholder, no visible content */}
{member.title}
</h5>
</Grid>
))}
</Grid>
)}

{emptyMembers.map((member, index) => (
<Grid item xs={6} sm={4} md={4} lg={4} key={index + currentCategory.members.length}>
{/* Empty placeholder, no visible content */}
</Grid>
))}
</Grid>

<Grid
container
item
xs={12}
sm={15}
md={12}
md={20}
justifyContent="center"
sx={{
marginTop: {
Expand All @@ -442,7 +317,7 @@ const MeetTheTeam = () => {
item
xs={5}
sm={20}
md={9}
md={15}
justifyContent="space-between"
sx={{ alignItems: 'center' }}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Event/Event.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ const EventBox = ({
{calendar_link !== '' && (
<a
href={calendar_link}
style={{ marginLeft: instagram_link === '' ? '40px' : '10px' }}>
style={{ marginLeft: instagram_link === '' ? '0px' : '10px' }}>
<img
src={calendarIcon}
alt="Calendar Icon"
Expand Down
Loading

0 comments on commit d17d41d

Please sign in to comment.