diff --git a/src/Components/StatsBarFunction.js b/src/Components/StatsBarFunction.js index 8b58fc3ed7f448ec8a43edf0f12bb469916eebb0..857c7393632a50ffdd3a8922044bbc4c14cb5efa 100644 --- a/src/Components/StatsBarFunction.js +++ b/src/Components/StatsBarFunction.js @@ -16,70 +16,86 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with Plataforma Integrada MEC. If not, see <http://www.gnu.org/licenses/>.*/ -import React, {useState, useEffect} from 'react'; +import React, { useState, useEffect } from 'react'; import styled from 'styled-components' import { apiUrl } from "../env"; -import axios from "axios"; +import axios from "axios"; import mapaBrasil from '../img/mapa-brasil-line-icon.svg'; import Grid from '@material-ui/core/Grid'; export default function (props) { - const [available_resources, setAvailableResources] = useState(0) - const [month_publications, setMonthPublications] = useState(0) - const [month_downloads, setMonthDownloads] = useState(0) - - useEffect(() => { - axios.get(`${apiUrl}/statistics`) - .then( - (res) => { - setAvailableResources(res.data.count) - setMonthPublications(res.data.month_publications) - setMonthDownloads(res.data.month_downloads) + const [available_resources, setAvailableResources] = useState(0) + const [month_publications, setMonthPublications] = useState(0) + const [month_downloads, setMonthDownloads] = useState(0) + + const WINDOW_WIDTH = window.innerWidth + + useEffect(() => { + axios.get(`${apiUrl}/statistics`) + .then( + (res) => { + setAvailableResources(res.data.count) + setMonthPublications(res.data.month_publications) + setMonthDownloads(res.data.month_downloads) }) - }, []) - - return ( - <StatsTab> - <StyledGrid container> - <Grid item md={6} xs={12} className="first"> - <img src={mapaBrasil} height="83px" alt="mapa do brasil"/> - <span className="total"> - <span className="numeros"> - {available_resources} - </span> - <span className="legenda"> - Recursos disponíveis - </span> - </span> - </Grid> - - <Grid item md={6} xs={12} className="second"> - <span className="title"> - ESSE MÊS: - </span> - <span className="enviados"> - <span className="numeros"> - {month_downloads} - </span> - - <span className="legenda"> - Baixados - </span> - </span> - <span className="enviados"> - <span className="numeros"> - {month_publications} - </span> - - <span className="legenda"> - Publicados - </span> - </span> - - </Grid> - </StyledGrid> - </StatsTab> - ) + }, []) + + return ( + <StatsTab> + <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" /> + <Grid container direction={WINDOW_WIDTH <= 670 ? "column" : "row"} justify="center" alignItems="center" spacing={3}> + <Grid item> + <Grid container direction="row" alignItems="center" spacing={2}> + <Grid item> + <img src={mapaBrasil} height="83px" alt="mapa do brasil" /> + </Grid> + <Grid item> + <Grid container direction="column"> + <StyledGridNumbers item style={{ textAlign: "center" }}> + {available_resources} + </StyledGridNumbers> + <StyledGridLabels item> + Recursos disponíveis + </StyledGridLabels> + </Grid> + </Grid> + </Grid> + </Grid> + <Grid item style={WINDOW_WIDTH <= 670 ? {width: "100%"} : null}> + <StyledDivider /> + </Grid> + <Grid item> + <Grid container direction="row" alignItems="center" spacing={2}> + <StyledGridLabels item> + ESSE MÊS: + </StyledGridLabels> + + <Grid item> + <Grid container direction="column"> + <StyledGridNumbers item> + {month_downloads} + </StyledGridNumbers> + <StyledGridLabels item> + Baixados + </StyledGridLabels> + </Grid> + </Grid> + + <Grid item> + <Grid container direction="column"> + <StyledGridNumbers item> + {month_publications} + </StyledGridNumbers> + <StyledGridLabels item> + Publicados + </StyledGridLabels> + </Grid> + </Grid> + </Grid> + </Grid> + </Grid> + </StatsTab> + ) } @@ -87,74 +103,35 @@ const StatsTab = styled.div` padding : 20px 0; color : #fff; background-color : #00bcd4; + font-family: 'Roboto', sans-serif; ` - -const StyledGrid = styled(Grid)` - vertical-align : middle !important; - - .first { - display : flex !important; - @media screen and (max-width : 502px) { - justify-content : center !important; - border-bottom : 1px dotted #fff !important; - padding-bottom : 10px !important; - } - @media screen and (min-width : 502px) { - justify-content : right !important; - text-align : right !important; - border-right : 1px dotted #fff !important; - } - - img { - height : 70px; - } - - } - - .total { - text-align : center; - display : inline-block; - line-height : 1; - padding : 0 20px; - } - - .numeros { - display : block; - font-weight : 700; - font-size : 2.1em; - } - - .legenda { - @media screen and (min-width : 502px) { - font-size : 1.285em; - } - font-weight : 300; - } - - .title { - @media screen and (min-width : 502px) { - font-size : 1.42em; - } - line-height : 1; - } - - .enviados { - text-align : center; - display : inline-block; - line-height : 1; - padding : 0 20px; - } - - .second { - @media screen and (min-width : 502px) { - padding-left : 20px; - } - @media screen and (max-width : 502px) { - justify-content : center !important; - text-align : center !important; - padding-top : 10px !important; - font-size : 16px; - } - } - +const StyledDivider = styled.div` + border-bottom: 1px dotted white; + width: 80%; + margin: 0 auto; + height: 1px; + @media screen and (min-width : 670px) { + border-right: 1px dotted white; + width: 1px; + height: 70.3px; + } ` +const StyledGridNumbers = styled(Grid)` + text-align: center; + font-weight: 700; + font-size: 26px; + > p{ + font-family: 'Roboto', sans-serif; + } + @media screen and (min-width : 406px) { + font-size: 3.571em; + } +` + +const StyledGridLabels = styled(Grid)` + font-size: 16px; + font-weight: 300; + @media screen and (min-width : 406px) { + font-size: 1.285em; + } +` \ No newline at end of file