Skip to content

GitLab

Commit ec8fbab1 authored by Florent Chehab's avatar Florent Chehab
Browse files

Better handling of different width

parent 97f308c4
Pipeline #27068 passed with stages
in 2 minutes and 22 seconds
Hide whitespace changes
Inline Side-by-side
frontend/src/components/university/UniversityTemplate.js
View file @ ec8fbab1
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
import { compose } from 'recompose';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
......@@ -44,33 +47,18 @@ class UniversityTemplate extends React.Component {
value: 0,
};
handlerResize() {
this.forceUpdate();
}
componentDidMount() {
window.addEventListener("resize", this.handlerResize.bind(this));
}
componentWillUnmount() {
window.addEventListener("resize", this.handlerResize.bind(this));
}
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const { classes } = this.props;
const { classes, univId, width } = this.props;
const { value } = this.state;
const w = window,
d = document,
documentElement = d.documentElement,
body = d.getElementsByTagName('body')[0],
width = w.innerWidth || documentElement.clientWidth || body.clientWidth,
height = w.innerHeight || documentElement.clientHeight || body.clientHeight;
const { univId } = this.props;
let scroll = true;
if (isWidthUp('lg', width)) {
scroll = false;
}
return (
<div>
......@@ -83,8 +71,8 @@ class UniversityTemplate extends React.Component {
<Tabs
value={value}
onChange={this.handleChange}
scrollable={width < 1000 ? true : false}
centered={width >= 1000 ? true : false}
scrollable={scroll}
centered={!scroll}
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
......@@ -113,4 +101,7 @@ UniversityTemplate.propTypes = {
univId: PropTypes.string.isRequired,
};
export default withStyles(styles)(UniversityTemplate);
\ No newline at end of file
export default compose(
withWidth({ noSSR: true }),
withStyles(styles)
)(UniversityTemplate);
frontend/src/components/university/modules/GenericModule.js
View file @ ec8fbab1
......@@ -8,10 +8,13 @@ import Badge from '@material-ui/core/Badge';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
import SettingsBackRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
import CreateIcon from '@material-ui/icons/Create';
import VerifiedUserIcon from '@material-ui/icons/VerifiedUser';
import LinkIcon from '@material-ui/icons/Link';
import FullScreenDialog from '../../shared/FullScreenDialog';
......@@ -25,6 +28,11 @@ const styles = theme => ({
padding: 1 * theme.spacing.unit,
// marginBottom: 2 * theme.spacing.unit
},
rootLinks: {
display: 'flex',
justifyContent: 'flex-start',
flexWrap: 'wrap',
},
badge: {
// margin: 0.5 * theme.spacing.unit,
top: -0.5 * theme.spacing.unit,
......@@ -44,10 +52,13 @@ const styles = theme => ({
color: theme.palette.action.disabled
},
button: {
width: 5*theme.spacing.unit,
height: 5*theme.spacing.unit,
width: 5 * theme.spacing.unit,
height: 5 * theme.spacing.unit,
// margin: 0.5 * theme.spacing.unit,
},
chip: {
margin: theme.spacing.unit,
},
})
......@@ -68,7 +79,7 @@ class GenericModule extends React.Component {
const { classes, title } = this.props;
return (
<div>
<FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog}/>
<FullScreenDialog open={this.state.fullScreenDialogOpen} handleClose={this.handleCloseFullScreenDialog} />
<Paper className={classes.root} square={true}>
<Grid container spacing={8}>
<Grid item xs>
......@@ -76,7 +87,7 @@ class GenericModule extends React.Component {
<Typography variant='caption'> Mis à jour par <em>chehabfl</em> le 08/09/2018 à 15h20</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: 'right' }}>
<Tooltip title="Informations sur la modération" placement="top">
<Badge classes={{ badge: classes.badge }} badgeContent={4} color="secondary">
<IconButton aria-label="Modération" className={classes.button}>
......@@ -104,6 +115,20 @@ class GenericModule extends React.Component {
<div>
{this.props.children}
</div>
<div className={classes.rootLinks}>
<Chip
avatar={
<Avatar>
<LinkIcon />
</Avatar>
}
label="Site de l'EPFL"
className={classes.chip}
color="secondary"
onClick={() => console.log("test")}
variant="outlined"
/>
</div>
</Paper>
</div>
)
......
frontend/src/components/university/modules/UniversitySemestersDates.js 0 → 100644
View file @ ec8fbab1
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Markdown from '../../shared/Markdown';
import Typography from '@material-ui/core/Typography';
import CloudQueueIcon from '@material-ui/icons/CloudQueue';
import LocalFloristIcon from '@material-ui/icons/LocalFlorist';
import MyComponent from '../../MyComponent';
import TextLink from '../../other/TextLink';
import GenericModule from './GenericModule';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
const styles = theme => ({
root: {
width: '100%',
overflowX: 'auto',
},
tableCell: {
padding: '2px',
},
content: {
display: "flex",
alignItems: "center",
},
icon: {
paddingRight: theme.spacing.unit
}
});
const comment = "**Attention certaines activités commencent avant cette période**";
class UniversitySemestersDates extends React.Component {
render() {
const { classes, theme } = this.props;
return (
<GenericModule title={"Date des semestres"}>
<div className={classes.root}>
<Table >
<TableHead>
<TableRow key={0}>
<TableCell className={classes.tableCell} component="th" > Semestre </TableCell>
<TableCell className={classes.tableCell} component="th" > Date de début </TableCell>
<TableCell className={classes.tableCell} component="th" > Date de fin </TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow key={1}>
<TableCell className={classes.tableCell} component="td">
<div className={classes.content}>
<CloudQueueIcon color='disabled' className={classes.icon} />
<div>Automne</div>
</div>
</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
</TableRow>
<TableRow key={2}>
<TableCell className={classes.tableCell} component="td">
<div className={classes.content}>
<LocalFloristIcon color='disabled' className={classes.icon}/>
<div>Printemps</div>
</div>
</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
<TableCell className={classes.tableCell} component="td" >12/03/2018</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
<Markdown source={comment}/>
</GenericModule>
)
}
}
export default withStyles(styles, { withTheme: true })(UniversitySemestersDates);
frontend/src/components/university/tabs/GeneralInfoTab.js
View file @ ec8fbab1
......@@ -2,45 +2,82 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MyComponent from '../../MyComponent';
import { compose } from 'recompose';
import GenericModule from '../modules/GenericModule';
import UniversityGeneral from '../modules/UniversityGeneral';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Lorem from 'react-lorem-component';
import UniversityGeneral from '../modules/UniversityGeneral';
import UniversitySemestersDates from '../modules/UniversitySemestersDates';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
const styles = theme => ({
root: {},
root: { flexGrow: 1, },
});
class GeneralInfo extends MyComponent {
myRender() {
return (
<div>
<Grid container spacing={16}>
<Grid item xs={8}>
<UniversityGeneral />
</Grid>
<Grid item xs={4}>
<GenericModule title={"Date des semestres"} />
</Grid>
<Grid item xs={12} md={6}>
<GenericModule title={"DRI"} />
</Grid>
<Grid item xs={12} md={6}>
<GenericModule title={"Offres de départs"} />
const { classes } = this.props;
// Resizing with the grid was causing weird gaps so we rerender depending on the width
if (isWidthUp('lg', this.props.width)) {
return (
<div className={classes.root}>
<Grid container spacing={16} justify='center' alignItems="flex-start" >
<Grid item lg={7}>
<Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs>
<UniversityGeneral />
</Grid>
<Grid item xs>
<GenericModule title={"DRI"} />
</Grid>
</Grid>
</Grid>
<Grid item lg={5}>
<Grid className={classes.root} container spacing={16} direction='column' >
<Grid item xs>
<UniversitySemestersDates />
</Grid>
<Grid item xs>
<GenericModule title={"Offres de départs"} />
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<GenericModule title={"Résumé Départs"} />
<Lorem count={20} />
</div>
);
} else {
return (
<div className={classes.root}>
<Grid container spacing={16} >
<Grid item xs={12}>
<UniversityGeneral />
</Grid>
<Grid item xs={12}>
<GenericModule title={"DRI"} />
</Grid>
<Grid item xs={12}>
<UniversitySemestersDates />
</Grid>
<Grid item xs={12}>
<GenericModule title={"Offres de départs"} />
</Grid>
</Grid>
</Grid>
<Lorem count={20} />
</div>
);
<Lorem count={20} />
</div>
);
}
}
}
......@@ -50,4 +87,7 @@ class GeneralInfo extends MyComponent {
// univId: PropTypes.string.isRequired,
// };
export default withStyles(styles)(GeneralInfo);
\ No newline at end of file
export default compose(
withWidth({ noSSR: true }),
withStyles(styles)
)(GeneralInfo);
\ No newline at end of file
Supports Markdown
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