From 2c4cd59f7f4d465a0a3a082fc2b34f2cb2e983be Mon Sep 17 00:00:00 2001
From: rgcastro <rgcastro@inf.ufpr.br>
Date: Mon, 27 Apr 2020 10:31:55 -0300
Subject: [PATCH] Fixed footer responsivity.
---
src/components/footer/bkp_footer.js | 108 ++++++++++++++++++++++++++++
src/components/footer/footer.js | 49 +++++++------
src/components/footer/footer.js~ | 98 +++++++++++++++++++++++++
3 files changed, 235 insertions(+), 20 deletions(-)
create mode 100644 src/components/footer/bkp_footer.js
create mode 100644 src/components/footer/footer.js~
diff --git a/src/components/footer/bkp_footer.js b/src/components/footer/bkp_footer.js
new file mode 100644
index 0000000..1b71c44
--- /dev/null
+++ b/src/components/footer/bkp_footer.js
@@ -0,0 +1,108 @@
+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;
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 524635c..3e2ee4e 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -12,44 +12,51 @@ const useStyles = makeStyles(theme => ({
bottom: 0,
right: 0,
width: "100%",
- height: "auto"
+ height: "78px"
},
img: {
width: "50px",
- marginTop: "5px",
- marginBottom: "5px",
- marginLeft: "15px",
- ["@media (max-width:525px)"]: {
- width: "50px",
- ["@media (max-width:338px)"]: {
- marginTop: "3%"
- }
- },
- ["@media (max-height:681px)"]: {
- width: "65px"
+ display: "block",
+ marginTop: "auto",
+ marginBottom: "auto",
+ marginLeft: "auto",
+ marginRight: "auto",
+ ["@media (min-width: 960px)"]: {
+ marginLeft: "5px",
}
},
item: {
- marginTop: "5px",
- marginBottom: "5px",
display: "flex",
justifyContent: "space-evenly",
- flexDirection: "column"
+ flexDirection: "column",
+ alignItems: "center"
},
text: {
color: "#46525d",
fontSize: "15px",
- textAlign: "center"
+ 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",
- marginRight: "15px"
+ ["@media (max-width: 960px)"]: {
+ display: "none"
+ }
}
}));
@@ -57,11 +64,11 @@ function Footer() {
const classes = useStyles();
return (
<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>
</Grid>
- <Grid item xs={8} className={classes.item}>
+ <Grid item md={6} lg={8} className={classes.item}>
<Typography className={classes.text}>
Ministério da
<b>
@@ -73,7 +80,7 @@ function Footer() {
</Typography>
</Grid>
- <Grid item xs={2} className={classes.item}>
+ <Grid item md={3} lg={2} className={classes.item}>
<Typography className={classes.adress}>
Esplanada dos Ministérios, Bloco R
<br />
@@ -82,6 +89,8 @@ function Footer() {
Telefone: 61 2027-6000
</Typography>
</Grid>
+
+
</Grid>
);
}
diff --git a/src/components/footer/footer.js~ b/src/components/footer/footer.js~
new file mode 100644
index 0000000..3e2ee4e
--- /dev/null
+++ b/src/components/footer/footer.js~
@@ -0,0 +1,98 @@
+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;
--
GitLab