Skip to content
Snippets Groups Projects
Commit 2c4cd59f authored by rgcastro's avatar rgcastro Committed by Stephanie Briere Americo
Browse files

Fixed footer responsivity.

parent 34fff486
Branches
No related tags found
3 merge requests!58Version 1.1,!54Issue #53: Fix password info,!15Issue/4
Show whitespace changes
Inline Side-by-side
src/components/footer/bkp_footer.js 0 → 100644
+ 108
− 0
View file @ 2c4cd59f
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Logo from "./c3sl.png";
const useStyles = makeStyles(theme => ({
footer: {
background: "#66a6c2",
position: "fixed",
left: 0,
bottom: 0,
right: 0,
width: "100%",
height: "78px"
},
img: {
width: "50px",
marginTop: "5px",
marginBottom: "5px",
justifyCenter: "center"
["@media (min-width:1200px)"]: {
marginLeft: "15px",
},
["@media (max-width:1200px)"]: {
marginLeft: "50%",
width: "50px",
justifyCenter: "center"
}
},
item: {
marginTop: "5px",
marginBottom: "5px",
display: "flex",
justifyContent: "space-evenly",
flexDirection: "column",
["@media (max-width:525px)"]: {
width: "50px",
["@media (max-width:338px)"]: {
marginTop: "3%"
}
},
["@media (max-height:681px)"]: {
width: "65px"
},
["@media (max-width:1040px)"]: {
justifyCenter: "center"
}
},
text: {
color: "#46525d",
fontSize: "15px",
textAlign: "center",
["@media (max-width:1200px)"]: {
display:"none"
}
},
adress: {
color: "#46525d",
fontSize: "12px",
textAlign: "right",
marginRight: "15px",
["@media (max-width:1200px)"]: {
display:"none"
}
}
}));
function Footer() {
const classes = useStyles();
return (
<Grid container className={classes.footer}>
<Grid item xs={12} md={2} lg={2} className={classes.item}>
<img src={Logo} className={classes.img}></img>
</Grid>
<Grid item md={8} lg={8} className={classes.item}>
<Typography className={classes.text}>
Ministério da
<b>
<br />
Ciência, Tecnologia,
<br />
Inovações e Comunicações
</b>
</Typography>
</Grid>
<Grid item md={2} lg={2} className={classes.item}>
<Typography className={classes.adress}>
Esplanada dos Ministérios, Bloco R
<br />
CEP: 70044-900 – Brasília-DF
<br />
Telefone: 61 2027-6000
</Typography>
</Grid>
</Grid>
);
}
export default Footer;
src/components/footer/footer.js
+ 29
− 20
View file @ 2c4cd59f
...@@ -12,44 +12,51 @@ const useStyles = makeStyles(theme => ({ ...@@ -12,44 +12,51 @@ const useStyles = makeStyles(theme => ({
bottom: 0, bottom: 0,
right: 0, right: 0,
width: "100%", width: "100%",
height: "auto" height: "78px"
}, },
img: { img: {
width: "50px", width: "50px",
marginTop: "5px", display: "block",
marginBottom: "5px", marginTop: "auto",
marginLeft: "15px", marginBottom: "auto",
["@media (max-width:525px)"]: { marginLeft: "auto",
width: "50px", marginRight: "auto",
["@media (max-width:338px)"]: { ["@media (min-width: 960px)"]: {
marginTop: "3%" marginLeft: "5px",
}
},
["@media (max-height:681px)"]: {
width: "65px"
} }
}, },
item: { item: {
marginTop: "5px",
marginBottom: "5px",
display: "flex", display: "flex",
justifyContent: "space-evenly", justifyContent: "space-evenly",
flexDirection: "column" flexDirection: "column",
alignItems: "center"
}, },
text: { text: {
color: "#46525d", color: "#46525d",
fontSize: "15px", fontSize: "15px",
textAlign: "center" textAlign: "center",
left: "50%",
["@media (max-width: 960px)"]: {
display: "none"
}
}, },
adress: { adress: {
display: "block",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
paddingRight: "10px",
color: "#46525d", color: "#46525d",
fontSize: "12px", fontSize: "12px",
textAlign: "right", textAlign: "right",
marginRight: "15px" ["@media (max-width: 960px)"]: {
display: "none"
}
} }
})); }));
...@@ -57,11 +64,11 @@ function Footer() { ...@@ -57,11 +64,11 @@ function Footer() {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Grid container className={classes.footer}> <Grid container className={classes.footer}>
<Grid item xs={2} className={classes.item}> <Grid item xs={12} sm={12} md={3} lg={2} className={classes.item}>
<img src={Logo} className={classes.img}></img> <img src={Logo} className={classes.img}></img>
</Grid> </Grid>
<Grid item xs={8} className={classes.item}> <Grid item md={6} lg={8} className={classes.item}>
<Typography className={classes.text}> <Typography className={classes.text}>
Ministério da Ministério da
<b> <b>
...@@ -73,7 +80,7 @@ function Footer() { ...@@ -73,7 +80,7 @@ function Footer() {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={2} className={classes.item}> <Grid item md={3} lg={2} className={classes.item}>
<Typography className={classes.adress}> <Typography className={classes.adress}>
Esplanada dos Ministérios, Bloco R Esplanada dos Ministérios, Bloco R
<br /> <br />
...@@ -82,6 +89,8 @@ function Footer() { ...@@ -82,6 +89,8 @@ function Footer() {
Telefone: 61 2027-6000 Telefone: 61 2027-6000
</Typography> </Typography>
</Grid> </Grid>
</Grid> </Grid>
); );
} }
......
src/components/footer/footer.js~ 0 → 100644
+ 98
− 0
View file @ 2c4cd59f
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Logo from "./c3sl.png";
const useStyles = makeStyles(theme => ({
footer: {
background: "#66a6c2",
position: "fixed",
left: 0,
bottom: 0,
right: 0,
width: "100%",
height: "78px"
},
img: {
width: "50px",
display: "block",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
["@media (min-width: 960px)"]: {
marginLeft: "5px",
}
},
item: {
display: "flex",
justifyContent: "space-evenly",
flexDirection: "column",
alignItems: "center"
},
text: {
color: "#46525d",
fontSize: "15px",
textAlign: "center",
left: "50%",
["@media (max-width: 960px)"]: {
display: "none"
}
},
adress: {
display: "block",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
paddingRight: "10px",
color: "#46525d",
fontSize: "12px",
textAlign: "right",
["@media (max-width: 960px)"]: {
display: "none"
}
}
}));
function Footer() {
const classes = useStyles();
return (
<Grid container className={classes.footer}>
<Grid item xs={12} sm={12} md={3} lg={2} className={classes.item}>
<img src={Logo} className={classes.img}></img>
</Grid>
<Grid item md={6} lg={8} className={classes.item}>
<Typography className={classes.text}>
Ministério da
<b>
<br />
Ciência, Tecnologia,
<br />
Inovações e Comunicações
</b>
</Typography>
</Grid>
<Grid item md={3} lg={2} className={classes.item}>
<Typography className={classes.adress}>
Esplanada dos Ministérios, Bloco R
<br />
CEP: 70044-900 – Brasília-DF
<br />
Telefone: 61 2027-6000
</Typography>
</Grid>
</Grid>
);
}
export default Footer;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment