Skip to content

Implemented Event Card with placeholder images #38

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

Open
VasilakiG wants to merge 6 commits into
base: development
Choose a base branch
from
Open

Implemented Event Card with placeholder images #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7d7f575
FTR: Implemented Event Card with placeholder images
VasilakiG Apr 2, 2024
c48cda9
Update client/src/components/EventCard/HeadingDatesAndIcons.tsx
VasilakiG Apr 2, 2024
7a707fe
UPD: Updated the name of the component HeadingDatesAndIcons to EventM…
VasilakiG Apr 2, 2024
a1c6baf
UPD: Replaced all the percentages with values following the theme. In…
VasilakiG Oct 24, 2024
198352a
UPD: Introduced a custom boxShadow under shadows in the theme, made t…
VasilakiG Oct 24, 2024
45aaa68
FIX: Introduced noWrap and overflow handling to all the texts that ap…
VasilakiG Oct 24, 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
8,421 changes: 1,979 additions & 6,442 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added client/src/assets/ProgrammingLanguages/nodejs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 81 additions & 0 deletions client/src/components/EventCard/Buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { Share } from "@mui/icons-material";
import { Box, Button, CardContent, Typography } from "@mui/material";
import { FULL_WIDTH, FULL_HEIGHT } from "../../theme";

const Buttons = () => {

return (
<CardContent
sx={{
display: "flex",
width: FULL_WIDTH,
}}
>
<Box
sx={{
width: FULL_WIDTH,
display: "flex",
alignItems: "flex-start",
justifyContent: "flex-start",
}}
>
<Button
variant="contained"
color="primary"
sx={{
height: FULL_HEIGHT,
fontSize: 19,
marginRight: 2,
borderRadius: 2,
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
<Typography
color="black"
noWrap
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
REGISTER NOW
</Typography>
</Button>
<Button
variant="outlined"
color="secondary"
sx={{
height: FULL_HEIGHT,
fontSize: 17.5,
marginRight: 2,
borderRadius: 2,
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
<Typography
noWrap
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
PREVIEW COMPETITION
</Typography>
</Button>
<Button
variant="outlined"
color="secondary"
sx={{
height: FULL_HEIGHT,
justifyContent: "center",
alignContent: "center",
padding: 2,
borderRadius: 2,
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
>
<Share />
</Button>
</Box>
</CardContent >
);
};

export default Buttons;
50 changes: 50 additions & 0 deletions client/src/components/EventCard/EventMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import { Box, Typography } from "@mui/material";
import IconLabels from "./IconLabel";
import LocalFireDepartmentIcon from '@mui/icons-material/LocalFireDepartment';
import { FULL_WIDTH } from "../../theme";

const CardHeading = "The Lost Beginning";
const CompetitionDate = "JAN 13, 2024";
const CompetitionTime = "19:00";
const CompetitionPlace = "BASE42";

const EventMetadata = () => {

return (
<Box
sx={{
marginLeft: 2.5,
marginRight: 20,
display: "flex",
flexDirection: "column",
justifyContent: "center",
width: FULL_WIDTH,
}}
>
<Typography
gutterBottom variant="h4"
component="div"
noWrap
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
{CardHeading}
</Typography>

<Typography
variant="body1"
color="text.secondary"
noWrap
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
{CompetitionDate} | {CompetitionTime} | {CompetitionPlace}
</Typography>

<IconLabels iconLabels={[
{ icon: <LocalFireDepartmentIcon />, label: "75", containerSx: undefined },
{ icon: <LocalFireDepartmentIcon />, label: "224", containerSx: undefined },
]} />
</Box>
);
};

export default EventMetadata;
29 changes: 29 additions & 0 deletions client/src/components/EventCard/ExtraLanguages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Box, Typography } from "@mui/material";
import { Language, thresholdOfLanguages } from "./ProgrammingLanguages";

const ExtraLanguages = ({ languages }: { languages: Language[] }) => {
return (
<Box
sx={{
width: 90,
height: 60,
display: "flex",
direction: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: "text.disabled",
borderRadius: 1,
}}
>
<Typography
sx={{
fontSize: { xs: 16, sm: 18, md: 20, lg: 22, xl: 24 },
}}
>
+{languages.length - thresholdOfLanguages}
</Typography>
</Box>
);
};

export default ExtraLanguages;
35 changes: 35 additions & 0 deletions client/src/components/EventCard/IconLabel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Box, Icon, SxProps, Theme, Typography } from "@mui/material";
import { ReactElement } from "react";

const IconLabel = ({ icon, label, containerSx }: { icon: ReactElement, label: string, containerSx: SxProps<Theme> | undefined }) => {
return (
<Box
sx={{
display: "flex",
marginTop: 1,
marginRight: 1.1, ...containerSx
}}
>
<Icon>
{icon}
</Icon>
<Typography>
{label}
</Typography>
</Box>
);
};

const IconLabels = ({ iconLabels }: { iconLabels: { icon: ReactElement, label: string, containerSx: SxProps<Theme> | undefined }[] }) => {
return (
<Box
sx={{
display: "flex",
}}
>
{iconLabels.map((iconLabel) => (<IconLabel icon={iconLabel.icon} label={iconLabel.label} containerSx={iconLabel.containerSx} />))}
</Box>
);
}

export default IconLabels;
59 changes: 59 additions & 0 deletions client/src/components/EventCard/ProgrammingLanguages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Box } from "@mui/material";
import NodeJS from "../../assets/ProgrammingLanguages/nodejs.png";
import ExtraLanguages from "./ExtraLanguages";

export const thresholdOfLanguages = 4;

export const languages = [
"NodeJS",
] as const;

export type Language = typeof languages[number];

export const images: Record<Language, string> = {
"NodeJS": NodeJS,
}

const ProgrammingLanguage = ({ language }: { language: Language }) => {
return (
<Box
component="img"
sx={{
height: 60,
width: 60,
display: "flex",
alignItems: "flex-end",
justifyContent: "flex-end",
backgroundColor: "text.disabled",
padding: 1.5,
borderRadius: 1,
marginRight: 1,
boxShadow: 1,
}}
alt={language}
src={images[language]}
>
</Box>
);
}


const ProgrammingLanguages = ({ languages }: { languages: Language[] }) => {

const languagesSize = languages.length;

const showDropdownButton = languagesSize > thresholdOfLanguages ? 1 : 0;

return (
<>
{languages
.slice(0, Math.min(languagesSize, thresholdOfLanguages - showDropdownButton))
.map((language) => (<ProgrammingLanguage language={language} />)
)}
{showDropdownButton ? (<ExtraLanguages languages={languages} />) : null}
</>
);

};

export default ProgrammingLanguages;
44 changes: 44 additions & 0 deletions client/src/components/EventCard/SponsoredBy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { Box, Typography } from "@mui/material";
import { images } from "./ProgrammingLanguages";
import { FULL_HEIGHT, FULL_WIDTH } from "../../theme";

const SponsoredBy = () => {

return (
<Box
sx={{
width: FULL_WIDTH,
display: "flex",
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-end",
padding: 1,
}}
>
<Typography
variant="body1"
color="text.secondary"
noWrap
sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}
>
Sponsored by:
</Typography>
<Box
component="img"
sx={{
height: FULL_HEIGHT,
padding: 0.2,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "flex-end",
}}
alt={"NodeJS"}
src={images["NodeJS"]}
>
</Box>
</Box>
);
};

export default SponsoredBy;
42 changes: 42 additions & 0 deletions client/src/components/EventCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Card, CardActionArea, CardContent } from "@mui/material";
import ProgrammingLanguages from "./ProgrammingLanguages";
import Buttons from "./Buttons";
import EventMetadata from "./EventMetadata";
import SponsoredBy from "./SponsoredBy";
import themeOptions from "../../theme";

const EventCard = () => {
return (
<Card
sx={{
borderRadius: 2,
marginX: 16,
boxShadow: themeOptions.shadows?.[1],
}}
>
<CardActionArea
sx={{ padding: 2 }}
>
<CardContent
sx={{ display: "flex", flexDirection: "row", }}
>
<EventMetadata />

<ProgrammingLanguages languages={["NodeJS", "NodeJS", "NodeJS", "NodeJS", "NodeJS", "NodeJS"]} />

</CardContent>

<CardContent
sx={{ display: "flex" }}
>
<Buttons />

<SponsoredBy />
</CardContent>

</CardActionArea>
</Card>
);
};

export default EventCard;
18 changes: 18 additions & 0 deletions client/src/pages/Compete/EventList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import Grid2 from "@mui/material/Unstable_Grid2";
import EventCard from "../../components/EventCard";


const EventList = () => {
return (
<Grid2 container spacing={5}>
<Grid2 lg={12}>
<EventCard />
</Grid2>
<Grid2 lg={12}>
<EventCard />
</Grid2>
</Grid2>
);
};

export default EventList;
8 changes: 7 additions & 1 deletion client/src/pages/Compete/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import PageLayout from "../../components/PageLayout";
import CompeteTabs from "./CompeteTabs";
import EventList from "./EventList";

const CompetePage = () => {
return (
<PageLayout
leftGridChildren={<CompeteTabs />}
leftGridChildren={
<>
<CompeteTabs />
<EventList />
</>
}
rightGridChildren={undefined}
/>
);
Expand Down
Loading