Commit 2c70c271 authored by Joaquin Valentin Peralta's avatar Joaquin Valentin Peralta
Browse files

Arreglos de estilo

parent e3520ac6
SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
import React from 'react';
import Box from '@mui/material/Box';
import { Divider } from '@mui/material';
import styles from './footer.module.scss';
export function Footer() {
return (
<Box sx={{ flexGrow: 1 }}>
<Divider className={styles.footer} />
<text className={styles.text} color="inherit"> Datos obtenidos de Transfermarkt, EA Sports FIFA y dbpedia.</text>
</Box>
);
}
.text {
display: flex;
flex-direction: row;
justify-content: center;
margin: 10px;
}
.footer {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
}
export { Footer } from './footer';
......@@ -18,11 +18,11 @@ const ListaJugadores = ({ lista, handleClickLista }) => (
onClick={() => handleClickLista(elem.fechaNac)}
>
<ListItemAvatar>
<Avatar sx={{ width: '100px', height: '100px' }}>
{elem.foto ? <img src={elem.foto} alt="" /> : <ImageIcon />}
<Avatar sx={{ width: '60px', height: '60px' }}>
{elem.foto ? <img style={{ width: '60px', height: '60px' }} src={elem.foto} alt="" /> : <ImageIcon />}
</Avatar>
</ListItemAvatar>
<ListItemText primary={elem.nombre} secondary={elem.pais} />
<ListItemText sx={{ marginLeft: '10px' }} primary={elem.nombre} secondary={elem.pais} />
</ListItem>
))}
</List>
......
.lista {
width: 500px;
height: 500px;
width: 200px;
height: 400px;
}
.listElem {
margin-top: 3px;
......
......@@ -3,7 +3,7 @@ import React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
export function NavBar() {
......@@ -11,13 +11,12 @@ export function NavBar() {
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Link to="/comparacion">
<Link to="/comparacion" style={{ color: 'white' }}>
<Button color="inherit">Jugadores</Button>
</Link>
<Link to="/clubes">
<Link to="/clubes" style={{ color: 'white' }}>
<Button color="inherit">Clubes</Button>
</Link>
<Button color="inherit">Transfermarket</Button>
</Toolbar>
</AppBar>
</Box>
......
/* eslint-disable no-unused-vars */
/* eslint-disable no-var */
import { NavBar } from 'common/navbar/navbar';
import { Footer } from 'common/footer/footer';
import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import { IconButton } from '@mui/material';
import { IconButton, Divider, Container } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { Grafica } from 'pages/grafica/grafica';
import { API_ROUTES } from 'networking/api-routes';
......@@ -204,15 +205,18 @@ const Clubes = () => {
return (
<>
<NavBar />
<h1>
CLUBES
</h1>
<p>{abstract}</p>
<Container>
<h1>
CLUBES
</h1>
<p>{abstract}</p>
</Container>
<Divider />
<div className={styles.content}>
<div className={styles.column}>
<div className={styles.search}>
<TextField
label="Nombre del jugador"
label="Nombre del club"
onChange={handleChange}
value={nombre}
/>
......@@ -228,7 +232,7 @@ const Clubes = () => {
<button type="button" onClick={run}>APRIETA</button>
<div className={styles.row}>
<div className={styles.chart}>
<p>Goles hechos a lo largo de las temporadas</p>
<p>Goles hechos</p>
<Grafica data={datosGrafica} dataKey1="temporada" dataKey2="golesHechos" />
</div>
<div className={styles.chart}>
......@@ -236,23 +240,26 @@ const Clubes = () => {
<Grafica data={datosGraficaClubValoracion} dataKey1="temporada" dataKey2="golesRecibidos" />
</div>
<div className={styles.chart}>
<p>Partidos ganados </p>
<p>Partidos ganados</p>
<Grafica data={datosGraficaClubValoracion} dataKey1="temporada" dataKey2="partidosGanados" />
</div>
<div className={styles.chart}>
<p>Partidos perdidos </p>
<p>Partidos perdidos</p>
<Grafica data={datosGraficaClubValoracion} dataKey1="temporada" dataKey2="partidosPerdidos" />
</div>
<div className={styles.chart}>
<p>Partidos empatados </p>
<p>Partidos empatados</p>
<Grafica data={datosGraficaClubValoracion} dataKey1="temporada" dataKey2="partidosEmpatados" />
</div>
<div className={styles.chart}>
<p>promedio de valoracion de arqueros</p>
<p>Promedio de valoracion de arqueros</p>
<Grafica data={datosGraficaClubValoracion} dataKey1="temporada" dataKey2="valoracion" />
</div>
</div>
</div>
<Footer />
</>
);
};
......
......@@ -15,18 +15,21 @@
.content {
margin-top: 100px;
display: flex;
justify-content: space-around;
}
.chart {
}
.column {
display: flex;
flex-direction: column;
margin-right: 10px;
}
.search {
display: flex;
flex-direction: row;
height: 60px;
margin-left: 20px;
width: 250px;
}
.lista {
margin-left: 20px;
......
import { NavBar } from 'common/navbar/navbar';
import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import { IconButton, Typography } from '@mui/material';
import { Footer } from 'common/footer/footer';
import {
IconButton, Typography, Divider, Container,
} from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { Grafica } from 'pages/grafica/grafica';
import { ApiService } from 'networking/api-service';
......@@ -195,11 +198,15 @@ LIMIT 1
};
return (
<>
<NavBar />
<h1>
Jugadores
</h1>
<p> Datos de jugadores obtenidos de: Tranfermarkt, FIFA, dbpedia.</p>
<Container>
<h1>
JUGADORES
</h1>
<p>{abstract}</p>
</Container>
<Divider />
<div className={styles.content}>
<div className={styles.column}>
<div className={styles.search}>
......@@ -220,6 +227,9 @@ LIMIT 1
<Grafica data={listaValoracion} dataKey1="temporada" dataKey2="valoracion" />
</div>
<div className={styles.ficha}>
<Typography>
FICHA DEL JUGADOR
</Typography>
<Typography>
Nombre:
{' '}
......@@ -251,15 +261,17 @@ LIMIT 1
{' '}
{datoTrans.altura}
</Typography>
<Typography>
{/* <Typography>
{' '}
Biografía:
{' '}
{abstract}
</Typography>
</Typography> */}
</div>
</div>
<Footer />
</>
);
};
......
......@@ -15,6 +15,7 @@
.content {
margin-top: 100px;
display: flex;
justify-content: space-around;
}
.chart {
}
......
Markdown is supported
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