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
...@@ -28,6 +28,8 @@ export default function (props) { ...@@ -28,6 +28,8 @@ export default function (props) {
const [month_publications, setMonthPublications] = useState(0) const [month_publications, setMonthPublications] = useState(0)
const [month_downloads, setMonthDownloads] = useState(0) const [month_downloads, setMonthDownloads] = useState(0)
const WINDOW_WIDTH = window.innerWidth
useEffect(() => { useEffect(() => {
axios.get(`${apiUrl}/statistics`) axios.get(`${apiUrl}/statistics`)
.then( .then(
...@@ -40,44 +42,58 @@ export default function (props) { ...@@ -40,44 +42,58 @@ export default function (props) {
return ( return (
<StatsTab> <StatsTab>
<StyledGrid container> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
<Grid item md={6} xs={12} className="first"> <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" /> <img src={mapaBrasil} height="83px" alt="mapa do brasil" />
<span className="total"> </Grid>
<span className="numeros"> <Grid item>
<Grid container direction="column">
<StyledGridNumbers item style={{ textAlign: "center" }}>
{available_resources} {available_resources}
</span> </StyledGridNumbers>
<span className="legenda"> <StyledGridLabels item>
Recursos disponíveis Recursos disponíveis
</span> </StyledGridLabels>
</span>
</Grid> </Grid>
</Grid>
<Grid item md={6} xs={12} className="second"> </Grid>
<span className="title"> </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: ESSE MÊS:
</span> &nbsp; </StyledGridLabels>
<span className="enviados">
<span className="numeros">
{month_downloads}
</span>
<span className="legenda"> <Grid item>
<Grid container direction="column">
<StyledGridNumbers item>
{month_downloads}
</StyledGridNumbers>
<StyledGridLabels item>
Baixados Baixados
</span> </StyledGridLabels>
</span> </Grid>
<span className="enviados"> </Grid>
<span className="numeros">
{month_publications}
</span>
<span className="legenda"> <Grid item>
<Grid container direction="column">
<StyledGridNumbers item>
{month_publications}
</StyledGridNumbers>
<StyledGridLabels item>
Publicados Publicados
</span> </StyledGridLabels>
</span> </Grid>
</Grid>
</Grid>
</Grid>
</Grid> </Grid>
</StyledGrid>
</StatsTab> </StatsTab>
) )
...@@ -87,74 +103,35 @@ const StatsTab = styled.div` ...@@ -87,74 +103,35 @@ const StatsTab = styled.div`
padding : 20px 0; padding : 20px 0;
color : #fff; color : #fff;
background-color : #00bcd4; background-color : #00bcd4;
font-family: 'Roboto', sans-serif;
` `
const StyledDivider = styled.div`
const StyledGrid = styled(Grid)` border-bottom: 1px dotted white;
vertical-align : middle !important; width: 80%;
margin: 0 auto;
.first { height: 1px;
display : flex !important; @media screen and (min-width : 670px) {
@media screen and (max-width : 502px) { border-right: 1px dotted white;
justify-content : center !important; width: 1px;
border-bottom : 1px dotted #fff !important; height: 70.3px;
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;
} }
`
} const StyledGridNumbers = styled(Grid)`
.total {
text-align: center; text-align: center;
display : inline-block;
line-height : 1;
padding : 0 20px;
}
.numeros {
display : block;
font-weight: 700; font-weight: 700;
font-size : 2.1em; font-size: 26px;
} > p{
font-family: 'Roboto', sans-serif;
.legenda {
@media screen and (min-width : 502px) {
font-size : 1.285em;
}
font-weight : 300;
} }
@media screen and (min-width : 406px) {
.title { font-size: 3.571em;
@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 { const StyledGridLabels = styled(Grid)`
@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; font-size: 16px;
font-weight: 300;
@media screen and (min-width : 406px) {
font-size: 1.285em;
} }
}
` `
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment