Skip to content
Snippets Groups Projects
Commit c3c807c8 authored by lfr20's avatar lfr20
Browse files

fix stats bar

parent b9ea1de5
No related branches found
No related tags found
3 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!42Fix problems reported by marlon
This commit is part of merge request !42. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
src/Components/StatsBarFunction.js
+ 103
− 126
View file @ c3c807c8
......@@ -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> &nbsp;
<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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment