Skip to content

Removed Minor Option When Minor is Unadded #167 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CSES-UCSD merged 5 commits into from
Oct 10, 2024
Merged

Removed Minor Option When Minor is Unadded #167 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9bed50e
Remove Cses Web Dev Community Tab (#164)
shreyaNagunuri May 30, 2024
00025e0
Made Opportunities Page More Dynamic (#160)
joycellu May 30, 2024
5237330
removed Upcoming Events when no events (#159)
shreyaNagunuri May 30, 2024
71037cd
adding minor option
shreyaNagunuri Oct 3, 2024
5cdb318
Merge branch 'Will-Hsu:main' into feature/shreyaNagunuri/UpdateMinorO…
shreyaNagunuri Oct 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions frontend/src/components/About/MeetTheTeam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,6 @@ const categories = [
{ name: 'Ganesh Kumarappan', title: 'Backend Developer', photo: Ganesh },
],
},
{
id: 3,
name: 'CSES WebDev',
members: [
{ name: 'Shruti Bhamidipati', title: 'President', photo: Shruti },
{ name: 'Manan Patel', title: 'VP Finance', photo: Manan },
{ name: 'Jheel Gandhi', title: 'VP Design', photo: Jheel },
{ name: 'Sonia Fereidooni', title: 'VP Operations', photo: Sonia },
{ name: 'Ryan Rickey', title: 'Software Team Lead', photo: Ryan },
{ name: 'Jake Villaseno', title: 'UI/UX Designer', photo: Jake },
//{ name: 'Saleha Ahmedi', title: 'WebDev', photo: Saleha},
],
},
{
id: 4,
name: 'CSES Open Source',
Expand Down
33 changes: 6 additions & 27 deletions frontend/src/components/About/OurCommunities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,6 @@ const Communities = () => {
</p>

<Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center'}}>
<Grid item
sx={{
...styles.communityCard,
width: verySmallScreen ? '250px' : { xs: '350px', sm: '500px', md: '500px' },
height: verySmallScreen ? '84px' : { xs: '100px', sm: '160px', md: '160px' },
margin: verySmallScreen ? '10% 0% 0% 0%' : { xs: '10% 2% 2% 2%', sm: '5% 3%', md: '3% 2%' }
}}>
<img
src={innovate}
alt="Innovate"
style={{ ...styles.communityCardImg, backgroundColor: 'black'}}
/>
<Box sx={{ height: 'auto', padding: verySmallScreen ? '2%' : '4%', alignSelf: 'center' }}>
<Box sx={{ ...styles.subheadingTop }} >
CSES Innovate
</Box>
<p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' :'6px'}}>
Learn about tech entrepreneurship! Form teams and build your own start-ups from ideation to pitch.
</p>
</Box>
</Grid>
<Grid item
sx={{
...styles.communityCard,
Expand Down Expand Up @@ -102,16 +81,16 @@ const Communities = () => {
margin: verySmallScreen ? '10% 0% 0% 0%' : { xs: '10% 2% 2% 2%', sm: '5% 3%', md: '3% 2%' }
}}>
<img
src={webdev}
alt="WebDev"
style={{ ...styles.communityCardImg}}
src={innovate}
alt="Innovate"
style={{ ...styles.communityCardImg, backgroundColor: 'black'}}
/>
<Box sx={{ height: 'auto', padding: verySmallScreen ? '2%' : '4%', alignSelf: 'center' }}>
<Box sx={{ ...styles.subheadingTop }} >
CSES WebDev
CSES Innovate
</Box>
<p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' : '6px'}}>
Gain hands-on experience in web design and development for real clients, from UCSD clubs to non-profits!
<p style={{ color: 'black', fontSize: 'clamp(8px, 2vw, 16px)', marginTop: verySmallScreen ? '2px' :'6px'}}>
Learn about tech entrepreneurship! Form teams and build your own start-ups from ideation to pitch.
</p>
</Box>
</Grid>
Expand Down
129 changes: 66 additions & 63 deletions frontend/src/components/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,78 +179,81 @@ const Home = () => {
<Grid item xs={0} sm={0} md={0.5} lg={1} />
</Grid>

<div>
{displayedFutureEvents.length !== 0 && (
<div style={{ margin: '0 39px' }}>
<div
style={{
color: 'white',
fontSize: '40px',
fontFamily: 'Chakra Petch',
marginTop: '117px',
fontWeight: '700',
}}
>
<p style={{ marginBottom: '20px', fontSize: 'clamp(32px, 8vw, 65px)' }}>
UPCOMING EVENTS
</p>
</div>

{isMobile && (
<div
style={{
color: 'white',
fontSize: '40px',
fontFamily: 'Chakra Petch',
marginTop: '117px',
fontWeight: '700',
marginBottom: '25px',
overflowX: 'auto', // Enable horizontal scrolling
maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
}}
>
<p style={{ marginBottom: '20px', fontSize: 'clamp(32px, 8vw, 65px)' }}>
UPCOMING EVENTS.
</p>
{displayedFutureEvents.map((eventData, id) => (
<div key={id}>
<MobileEventBox
title={eventData.title}
targetDate={new Date(eventData.end_time)}
location={eventData.location} end_time={eventData.end_time}
start_time={eventData.start_time}
_id={eventData._id}
/>
</div>
))}
</div>
)}

{isMobile && (
<div
style={{
marginBottom: '25px',
overflowX: 'auto', // Enable horizontal scrolling
maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
}}
>
{displayedFutureEvents.map((eventData, id) => (
<div key={id}>
<MobileEventBox
title={eventData.title}
targetDate={new Date(eventData.end_time)}
location={eventData.location}
end_time={eventData.end_time}
start_time={eventData.start_time}
_id={eventData._id}
/>
</div>
))}
</div>
)}

{!isMobile && (
<div
style={{
display: 'flex',
marginBottom: '25px',
overflowX: 'auto', // Enable horizontal scrolling
maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
}}
>
{displayedFutureEvents.map((eventData, id) => (
<div key={id} style={{ marginRight: '30px', marginTop: '30px' }}>
<EventBox
title={eventData.title}
targetDate={new Date(eventData.end_time)}
location={eventData.location}
calendar_link={eventData.calendar_link}
description={eventData.description}
end_time={eventData.end_time}
instagram_link={eventData.instagram_link}
start_time={eventData.start_time}
_id={eventData._id}
/>
</div>
))}
</div>
)}
<div style={{ marginLeft: isMobile ? '-2%' : '-0.3%' }}>
<Button
size="large"
text="See All Events ->"
onClick={() => navigate('/events')}
></Button>
{!isMobile && (
<div
style={{
display: 'flex',
marginBottom: '25px',
overflowX: 'auto', // Enable horizontal scrolling
maxWidth: '100%', // Ensure the container doesn't exceed its parent's width
}}
>
{displayedFutureEvents.map((eventData, id) => (
<div key={id} style={{ marginRight: '30px', marginTop: '30px' }}>
<EventBox
title={eventData.title}
targetDate={new Date(eventData.end_time)}
location={eventData.location}
calendar_link={eventData.calendar_link}
description={eventData.description}
end_time={eventData.end_time}
instagram_link={eventData.instagram_link}
start_time={eventData.start_time}
_id={eventData._id}
/>
</div>
))}
</div>
)}
<div style={{ marginLeft: isMobile ? '-2%' : '-0.3%' }}>
<Button
size="large"
text="See All Events ->"
onClick={() => navigate('/events')}
></Button>
</div>
</div>
)}
</div>
</Container>
</Box>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/MemberProfile/MemberProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ const MemberProfile = (userData: MemberProfileProps) => {
Major:
<span style={{ fontWeight: 'bold', marginLeft: '8px' }}>{userData.memberMajor}</span>
</p>
{((typeof userData.memberMinor !== 'undefined')) &&
{((typeof userData.memberMinor !== 'undefined' && userData.memberMinor !== '')) &&
<p
style={{
display: 'flex', // added
Expand Down
105 changes: 90 additions & 15 deletions frontend/src/components/Opportunities/Opportunities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Container, Typography, Grid, Link, Box, useTheme } from '@mui/material';
import React, { ReactNode, useEffect, useRef, useState } from 'react';
import { Container, Typography, Grid, Link, Box, useTheme, useMediaQuery } from '@mui/material';
import MuiButton from '@mui/material/Button';
import bg from '../../images/shape2.svg';
import sponsor from '../../images/cseLogo.gif';
Expand All @@ -18,6 +18,21 @@ interface ImageWithBoxShadowProps {
href?: string;
}

interface FadeInSectionProps {
children: ReactNode;
}

const fadeInStyle = {
opacity: 0,
transform: 'translateY(20px)',
transition: 'opacity 0.5s ease-out, transform 0.5s ease-out',
};

const fadeInVisibleStyle = {
opacity: 1,
transform: 'translateY(0)',
};

export const ImageWithBoxShadow = ({
src,
alt,
Expand All @@ -27,6 +42,7 @@ export const ImageWithBoxShadow = ({
}: ImageWithBoxShadowProps) => {
const theme = useTheme();
const styles = opportunitiesStyles(theme);

return (
<a href={href} style={styles.link}>
<img
Expand All @@ -43,6 +59,48 @@ export const ImageWithBoxShadow = ({
);
};

const FadeInSection = ({ children }: FadeInSectionProps) => {
const [isVisible, setIsVisible] = useState(false);
const domRef = useRef<HTMLDivElement | null>(null);

useEffect(() => {
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.1 }
);

if (domRef.current) {
observer.observe(domRef.current);
}

return () => {
if (domRef.current) {
observer.unobserve(domRef.current);
}
};
}, []);

return (
<Box
ref={domRef}
sx={{
...fadeInStyle,
...(isVisible && fadeInVisibleStyle),
}}
>
{children}
</Box>
);
};


const Opportunities = () => {
const theme = useTheme();
const styles = opportunitiesStyles(theme);
Expand All @@ -55,12 +113,17 @@ const Opportunities = () => {
<img src={bg} alt="bg" style={{ ...styles.bg2, position: 'absolute' }} />
</Box>
<Container maxWidth="xl" sx={styles.body}>
<Typography sx={styles.title}>OPPORTUNITIES</Typography>
<Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
<Grid item xs={12} sm={12} md={6}>
<ImageWithBoxShadow src={members} alt="members" />
<Grid item xs={12} sm={12} md={10.9}>
<Typography sx={styles.title} align="left">OPPORTUNITIES</Typography>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<FadeInSection>
<ImageWithBoxShadow src={members} alt="members" />
</FadeInSection>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<FadeInSection>
<Typography sx={styles.subtitle}>
For <span style={{ fontStyle: 'italic' }}>members</span>.
</Typography>
Expand Down Expand Up @@ -117,11 +180,15 @@ const Opportunities = () => {
Become a Member
</MuiButton>
</Box>
</FadeInSection>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<ImageWithBoxShadow src={sponsors} alt="sponsors" />
<FadeInSection>
<ImageWithBoxShadow src={sponsors} alt="sponsors" />
</FadeInSection>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<FadeInSection>
<Typography sx={styles.subtitle}>
For <span style={{ fontStyle: 'italic' }}>sponsors</span>.
</Typography>
Expand Down Expand Up @@ -166,29 +233,37 @@ const Opportunities = () => {
See Opportunities -&gt;
</MuiButton>
</Box>
</FadeInSection>
</Grid>
</Grid>

<Typography align="center" sx={{ ...styles.subtitle, margin: '60px 0% 50px 0%' }}>
<FadeInSection>
Thank you to our current sponsors!
</FadeInSection>
</Typography>

<Grid container direction="column" alignItems="stretch">
<Grid item pl="10%" pr="10%">
<Grid container spacing={2} sx={{ justifyContent: 'center', alignItems: 'center' }}>
<Grid item xs={12} sm={10} md={5.5}>
<FadeInSection>
<ImageWithBoxShadow
src={sponsor}
alt="sponsor"
boxColor="white"
href="https://cse.ucsd.edu/"
borderColor="black"
/>
</FadeInSection>
</Grid>
<Grid item pl="30%" pr="30%">
<ImageWithBoxShadow
src={sponsor2}
alt="sponsor2"
boxColor="white"
href="https://as.ucsd.edu/"
/>
<Grid item xs={7} sm={5} md={3.5}>
<FadeInSection>
<ImageWithBoxShadow
src={sponsor2}
alt="sponsor2"
boxColor="white"
href="https://as.ucsd.edu/"
/>
</FadeInSection>
</Grid>
</Grid>
</Container>
Expand Down
Loading