From f57a4d7c12e40be14feadd89cba7b3ebacf0fba4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafael=20L=C3=A1szl=C3=B3?= <rlacko99@gmail.com>
Date: Sun, 31 Jan 2021 18:00:47 +0100
Subject: [PATCH] desktop footer
---
src/components/Footer.tsx | 131 +++++++++++++++++++++++++++++++++-----
1 file changed, 116 insertions(+), 15 deletions(-)
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 945e766..2d254f6 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,17 +1,24 @@
-import { Box, IconButton, makeStyles, Typography, useTheme } from '@material-ui/core';
+import {
+ Box,
+ IconButton,
+ makeStyles,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from '@material-ui/core';
import FacebookIcon from '@material-ui/icons/Facebook';
import MailIcon from '@material-ui/icons/Mail';
import React from 'react';
import DevTeamIcon from './svg/DevTeamIcon';
import SchdesignIcon from './svg/SchdesignIcon';
-const useStyles = makeStyles((theme) => ({
+const useMobileStyles = makeStyles((theme) => ({
footer: {
background: theme.footer.background,
padding: '0.3rem',
paddingTop: '0.6rem',
},
- contact: {
+ contactText: {
color: theme.palette.primary.contrastText,
fontSize: '1.7rem',
fontWeight: 500,
@@ -49,47 +56,76 @@ const useStyles = makeStyles((theme) => ({
},
}));
+const useDesktopStyles = makeStyles((theme) => ({
+ footer: {
+ padding: '0.4rem',
+ },
+ devteam: {
+ fontSize: '1.8rem',
+ paddingLeft: '0.6rem',
+ },
+ schdesignButton: {
+ paddingTop: '0.5rem',
+ },
+ contact: {
+ paddingRight: '2rem',
+ },
+ social: {
+ fontSize: '1.5rem',
+ margin: '0',
+ marginRight: '0.3rem',
+ marginTop: '0.2rem',
+ marginBottom: '0.2rem',
+ },
+ socialText: {
+ color: theme.palette.secondary.main,
+ },
+}));
+
const Footer: React.FC = () => {
- const classes = useStyles();
+ const mClasses = useMobileStyles();
+ const dClasses = useDesktopStyles();
const theme = useTheme();
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));
+
const SmallScreen: React.FC = () => (
<Box display="flex" justifyContent="center" flexDirection="column">
- <Typography align="center" className={classes.contact}>
+ <Typography align="center" className={mClasses.contactText}>
Kapcsolat
</Typography>
<Box display="flex" justifyContent="center">
<IconButton
- className={classes.socialButton}
+ className={mClasses.socialButton}
onClick={(): void => {
window.open('https://www.facebook.com/groups/schbody/');
}}
>
- <FacebookIcon className={classes.social} />
+ <FacebookIcon className={mClasses.social} />
</IconButton>
<IconButton
- className={classes.socialButton}
+ className={mClasses.socialButton}
onClick={(): void => {
window.location.href = 'mailto:body@sch.bme.hu';
}}
>
- <MailIcon className={classes.social} />
+ <MailIcon className={mClasses.social} />
</IconButton>
</Box>
- <Box display="flex" justifyContent="space-around" className={classes.groups}>
+ <Box display="flex" justifyContent="space-around" className={mClasses.groups}>
<IconButton
- className={classes.groupButton}
+ className={mClasses.groupButton}
onClick={(): void => {
window.open('https://kszk.bme.hu/');
}}
>
<Box display="flex" justifyContent="center" alignItems="center">
<DevTeamIcon width="28px" height="28px" />
- <Typography className={classes.devteam}>DevTeam</Typography>
+ <Typography className={mClasses.devteam}>DevTeam</Typography>
</Box>
</IconButton>
<IconButton
- className={classes.groupButton}
+ className={mClasses.groupButton}
onClick={(): void => {
window.open('https://schdesign.hu/');
}}
@@ -99,9 +135,74 @@ const Footer: React.FC = () => {
</Box>
</Box>
);
+
+ const LargeScreen: React.FC = () => (
+ <Box display="flex" justifyContent="space-between">
+ <Box
+ display="flex"
+ justifyContent="space-around"
+ alignItems="center"
+ className={mClasses.groups}
+ >
+ <IconButton
+ className={mClasses.groupButton}
+ onClick={(): void => {
+ window.open('https://kszk.bme.hu/');
+ }}
+ >
+ <Box display="flex" justifyContent="center" alignItems="center">
+ <DevTeamIcon width="36px" height="36px" />
+ <Typography className={`${mClasses.devteam} ${dClasses.devteam}`}>DevTeam</Typography>
+ </Box>
+ </IconButton>
+ <IconButton
+ className={`${mClasses.groupButton} ${dClasses.schdesignButton}`}
+ onClick={(): void => {
+ window.open('https://schdesign.hu/');
+ }}
+ >
+ <SchdesignIcon width="140px" height="50px" color1={theme.palette.primary.contrastText} />
+ </IconButton>
+ </Box>
+ <Box
+ display="flex"
+ flexDirection="column"
+ alignItems="flex-start"
+ className={dClasses.contact}
+ >
+ <Typography align="center" className={mClasses.contactText}>
+ Kapcsolat
+ </Typography>
+ <Box display="flex" flexDirection="column" alignItems="flex-start">
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.open('https://www.facebook.com/groups/schbody/');
+ }}
+ >
+ <Box display="flex" alignItems="center" justifyContent="center">
+ <FacebookIcon className={`${mClasses.social} ${dClasses.social}`} />
+ <Typography className={dClasses.socialText}>Facebook</Typography>
+ </Box>
+ </IconButton>
+
+ <IconButton
+ className={mClasses.socialButton}
+ onClick={(): void => {
+ window.location.href = 'mailto:body@sch.bme.hu';
+ }}
+ >
+ <MailIcon className={`${mClasses.social} ${dClasses.social}`} />
+ <Typography className={dClasses.socialText}>body@sch.bme.hu</Typography>
+ </IconButton>
+ </Box>
+ </Box>
+ </Box>
+ );
+
return (
- <Box component="footer" className={classes.footer}>
- <SmallScreen />
+ <Box component="footer" className={`${mClasses.footer} ${!isSmallScreen && dClasses.footer}`}>
+ {isSmallScreen ? <SmallScreen /> : <LargeScreen />}
</Box>
);
};
--
GitLab