Commit ae20d1f4 authored by Florent Chehab's avatar Florent Chehab

Markdown ready !

parent a42accc9
Pipeline #27058 passed with stages
in 2 minutes and 23 seconds
......@@ -43,10 +43,17 @@ class ThemeProvider extends MyComponent {
}
}
myRender() {
const font = {typography: {
fontSize: 14,
htmlFontSize: 14
}}
const theme = Object.assign({}, this.state.theme, font)
return (
<div>
<MuiThemeProvider theme={createMuiTheme(this.state.theme)}>
<MuiThemeProvider theme={createMuiTheme(theme)}>
<Router>
{this.props.children}
</Router>
......
......@@ -56,7 +56,7 @@ class UnivPopupContent extends Component {
</CardContent>
</CardActionArea>
<CardActions>
<Link to={"/app/university/" + univId}>
<Link to={"/app/university/" + univId} style={{ textDecoration: 'none' }}>
<Button variant="contained" size="small" color="primary">
< IconAdd />
En savoir plus
......
......@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Markdown from '../../utils/Markdown'
const styles = theme => ({
myPaper: {
......@@ -10,15 +11,34 @@ const styles = theme => ({
}
});
const source = `
Les objectifs de ce service sont :
- 1
- 2
- 3
Âge des données de l'UTC :
| **Feature** | **Support** |
| ------ | ----------- |
| Ancien départs | ✔ |
| Départs possibles | ✔ |
| Informatio sur les universités | ✔ |
`;
class PageHome extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.myPaper}>
<Typography variant="display1">
Accueil du site, coucou :)
<Typography variant="display2">
Bienvenue sur <i>Outgoing REX</i>
</Typography>
<Markdown source={source} />
</Paper>
);
......
......@@ -35,7 +35,7 @@ function renderUniversityNotFound() {
>
<DialogTitle id="alert-dialog-title">{"L'université demandée n'est pas reconnue !"}</DialogTitle>
<DialogActions>
<NavLink to="/app/university">
<NavLink to="/app/university" style={{ textDecoration: 'none' }}>
<Button variant="contained" color="primary">
C'est noté, ramenez-moi sur le droit chemin.
</Button>
......
......@@ -14,7 +14,7 @@ import { NavLink } from 'react-router-dom'
export const mainListItems = (
<div>
<NavLink to={'/app/'}>
<NavLink to={'/app/'} style={{ textDecoration: 'none' }}>
{/* TODO add styling */}
<ListItem button>
<ListItemIcon>
......@@ -24,7 +24,7 @@ export const mainListItems = (
</ListItem>
</NavLink>
<NavLink to={'/app/search/'}>
<NavLink to={'/app/search/'} style={{ textDecoration: 'none' }}>
<ListItem button>
<ListItemIcon>
<SearchIcon />
......@@ -33,7 +33,7 @@ export const mainListItems = (
</ListItem>
</NavLink>
<NavLink to={'/app/map/'}>
<NavLink to={'/app/map/'} style={{ textDecoration: 'none' }}>
<ListItem button>
<ListItemIcon>
<MapIcon />
......@@ -42,7 +42,7 @@ export const mainListItems = (
</ListItem>
</NavLink>
<NavLink to={'/app/university/undefined'}>
<NavLink to={'/app/university/undefined'} style={{ textDecoration: 'none' }}>
<ListItem button>
<ListItemIcon>
<LocationCityIcon />
......@@ -75,7 +75,7 @@ export const secondaryListItems = (
export const thirdListItems = (
<div>
<NavLink to={'/app/settings/'}>
<NavLink to={'/app/settings/'} style={{ textDecoration: 'none' }}>
<ListItem button>
<ListItemIcon>
<SettingsIcon />
......
// Inspired by : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/page-layout-examples/blog/Markdown.js
import React from 'react';
import ReactMarkdown from 'react-markdown';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
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 Paper from '@material-ui/core/Paper';
import { rgbToHex, lighten, darken } from '@material-ui/core/styles/colorManipulator';
import { Divider } from '@material-ui/core';
const styles = (theme) => {
const { palette } = theme;
const linkColor = palette.type == 'dark' ? lighten(palette.secondary.main, 0.8) : darken(palette.secondary.main, 0.3);
const backgroundTable = palette.type == 'dark' ? lighten(palette.background.paper, 0.07) : darken(palette.background.paper, 0.02);
const headerTable = palette.type == 'dark' ? lighten(palette.background.paper, 0.13) : darken(palette.background.paper, 0.07);
return {
list: {
color: palette.text.primary,
},
code: {
fontFamily: "monospace"
},
listItem: {
marginTop: theme.spacing.unit,
},
link: {
color: linkColor,
textDecoration: "none",
borderBottom: "1px dotted"
},
blockquote: {
color: palette.text.secondary,
borderLeftWidth: "5px",
borderLeftStyle: "solid",
borderLeftColor: linkColor,
borderRadius: "1px",
margin: "1.5em 10px",
paddingTop: "0px",
paddingBottom: "0px",
paddingRight: "10px",
paddingLeft: "10px",
},
table: {
//color: palette.text.primary,
},
tableHead: {
fontSize: "14px",
background: headerTable,
},
backgroundTable: {
background: backgroundTable
},
bold: {
fontWeight: 700
}
}
}
const renderers = {
/* eslint-disable-next-line react/prop-types */
heading: ({ level, ...props }) => {
let variant;
let paragraph;
switch (level) {
case 1:
variant = 'headline';
break;
case 2:
variant = 'title';
break;
case 3:
variant = 'subheading';
break;
case 4:
variant = 'caption';
paragraph = true;
break;
default:
variant = 'body';
break;
}
return <Typography {...props} gutterBottom variant={variant} paragraph={paragraph} style={{ fontWeight: 700 }} />;
},
list: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => (
<ul className={classes.list}>
{props.children}
</ul>
)),
listItem: withStyles(styles, { withTheme: true })(({ classes, tight, ordered, ...props }) => (
<li className={classes.listItem}>
<Typography component="span" {...props} />
</li>
)),
paragraph: props => <Typography {...props} paragraph />,
link: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<a href={props.href} className={classes.link}>
{props.children}
</a>
)),
code: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<Typography variant={"body1"} paragraph>
<pre ><code>
{props.value}
</code></pre>
</Typography>
)),
inlineCode: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<code className={classes.code}>
{props.children}
</code>
)),
blockquote: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<blockquote className={classes.blockquote}>
<em>
{props.children}
</em>
</blockquote>
)),
table: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<Paper className={classes.backgroundTable}>
<Table className={classes.table}> {props.children} </Table>
</Paper>
)),
tableHead: withStyles(styles, { withTheme: true })(({ classes, ...props }) => (
<TableHead classes={{ root: classes.bold }} className={classes.tableHead}> {props.children} </TableHead>
)),
tableBody: props => (<TableBody> {props.children} </TableBody>),
tableRow: props => (<TableRow hover={true}> {props.children} </TableRow>),
tableCell: props => (<TableCell> {props.children} </TableCell>),
thematicBreak: props => (<Divider/>)
};
export default function Markdown(props) {
return <ReactMarkdown renderers={renderers} {...props} mode={'escape'} />;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<html style="font-size:14">
<head>
<meta
......
This diff is collapsed.
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