US403, US413, US404
This commit is contained in:
@@ -9,6 +9,7 @@ import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
|
||||
import Business from '@material-ui/icons/Business';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import WatchLater from '@material-ui/icons/WatchLater';
|
||||
import Home from '@material-ui/icons/Home';
|
||||
|
||||
const variantIcon = {
|
||||
assignment: AssignmentIcon,
|
||||
@@ -17,6 +18,7 @@ const variantIcon = {
|
||||
business_center: BusinessCenterIcon,
|
||||
business: Business,
|
||||
watch_later: WatchLater,
|
||||
home: Home,
|
||||
};
|
||||
|
||||
const styles = theme => ({
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
import React, { Fragment, Children } from 'react';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import { withStyles, getMuiTheme } from '@material-ui/core/styles';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import Link from 'next/link'
|
||||
import Drawer from '@material-ui/core/Drawer';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import HomeIcon from '@material-ui/icons/HomeOutlined';
|
||||
import OfferIcon from '@material-ui/icons/LocalOfferOutlined';
|
||||
import CompanyIcon from '@material-ui/icons/DomainOutlined';
|
||||
import HelpIcon from '@material-ui/icons/HelpOutline';
|
||||
import VideoIcon from '@material-ui/icons/OndemandVideoOutlined';
|
||||
import NotesIcon from '@material-ui/icons/NotesOutlined';
|
||||
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||
import WorkOutlineIcon from '@material-ui/icons/WorkOutline';
|
||||
import AccountCircleOutlinedIcon from '@material-ui/icons/AccountCircleOutlined';
|
||||
import FolderSharedIcon from '@material-ui/icons/FolderShared';
|
||||
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
|
||||
import PermContactCalendar from '@material-ui/icons/PermContactCalendar';
|
||||
import VideoCam from '@material-ui/icons/Videocam';
|
||||
import SettingsIcon from '@material-ui/icons/Settings';
|
||||
import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
|
||||
import ArrowForward from '@material-ui/icons/ArrowForward';
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import { ListItemText } from '@material-ui/core';
|
||||
import Loader from '../templates/loader'
|
||||
import { connect } from 'react-redux'
|
||||
import { fetchCurrentUserRequest } from "../../actions/user";
|
||||
import { requestLogout } from "../../actions/auth";
|
||||
import Button from '@material-ui/core/Button';
|
||||
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { withRouter } from "next/router";
|
||||
import ActiveLink from "../atoms/Activelink";
|
||||
import axios from 'axios';
|
||||
import setAuthorizationHeader from "../../data/setAuthorizationHeader";
|
||||
import getConfig from 'next/config'
|
||||
import Router from 'next/router'
|
||||
import ButtonBase from "@material-ui/core/ButtonBase";
|
||||
import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
position: 'relative',
|
||||
zIndex: '999',
|
||||
'& a': {
|
||||
textDecoration: 'none'
|
||||
}
|
||||
},
|
||||
toolbar: {
|
||||
height: '64px',
|
||||
},
|
||||
grow: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
menuButton: {
|
||||
marginLeft: -12,
|
||||
marginRight: 20,
|
||||
display: 'block'
|
||||
},
|
||||
menuLogo: {
|
||||
cursor: 'pointer',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: '200px'
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '130px'
|
||||
},
|
||||
},
|
||||
menuAvatar: {
|
||||
width: '2.5em',
|
||||
borderRadius: '50%',
|
||||
marginTop: theme.spacing(2),
|
||||
marginLeft: theme.spacing(2),
|
||||
},
|
||||
menuUserName: {
|
||||
color: theme.palette.menu.emailText,
|
||||
fontSize: '1.3rem',
|
||||
fontWeight: '500',
|
||||
},
|
||||
menuUserEmail: {
|
||||
color: theme.palette.menu.emailText,
|
||||
fontSize: '0.9rem',
|
||||
fontWeight: '200',
|
||||
},
|
||||
darkDivider: {
|
||||
background: 'whitesmoke',
|
||||
opacity: '0.1',
|
||||
},
|
||||
List: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
height: '100%',
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
'&>a:first-child': {
|
||||
minHeight: '64px',
|
||||
height: '64px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
[theme.breakpoints.up('md')]: {
|
||||
'&>a:first-child': {
|
||||
height: '64px',
|
||||
},
|
||||
'&>a:first-child li': {
|
||||
height: '64px',
|
||||
alignItems: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
fullList: {
|
||||
width: 'auto',
|
||||
cursor: 'pointer',
|
||||
paddingBottom: 0
|
||||
},
|
||||
lightFullList: {
|
||||
height: '100vh',
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
darkFullList: {
|
||||
backgroundColor: theme.palette.background.dark,
|
||||
},
|
||||
lightMenuItem: {
|
||||
color: theme.palette.menu.lightText,
|
||||
textDecoration: 'none',
|
||||
},
|
||||
darkMenuItem: {
|
||||
color: theme.palette.menu.darkText,
|
||||
textDecoration: 'none',
|
||||
},
|
||||
darkMenuItemSpecific: {
|
||||
'&:hover,&:active': {
|
||||
color: theme.palette.primary.main,
|
||||
}
|
||||
},
|
||||
links: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
height: '100%',
|
||||
},
|
||||
linkGroup: {
|
||||
padding: theme.spacing(1.2, 0),
|
||||
paddingLeft: 0,
|
||||
},
|
||||
videothequeLinkGroup: {
|
||||
backgroundColor: theme.palette.background.videotheque,
|
||||
},
|
||||
blogLinkGroup: {
|
||||
backgroundColor: theme.palette.background.blog,
|
||||
},
|
||||
recruteurLinkGroup: {
|
||||
backgroundColor: theme.palette.background.recruteur,
|
||||
},
|
||||
rootListItem: {
|
||||
padding: theme.spacing(1, 2),
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
rootListItemIcon: {
|
||||
padding: theme.spacing(1, 2),
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
ListItemUserConnected: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
ListItemText: {
|
||||
fontSize: '1em',
|
||||
},
|
||||
icon: {
|
||||
paddingRight: theme.spacing(2.5),
|
||||
},
|
||||
iconAccount: {
|
||||
color: theme.palette.primary.dark,
|
||||
},
|
||||
title: {
|
||||
color: theme.palette.secondary.main,
|
||||
fontSize: '1.5em'
|
||||
},
|
||||
email: {
|
||||
color: theme.palette.menu.emailText,
|
||||
fontSize: '0.9em'
|
||||
},
|
||||
button: {
|
||||
padding: theme.spacing(0.5, 1),
|
||||
textTransform: 'inherit',
|
||||
'& svg': {
|
||||
width: '0.7em',
|
||||
height: '0.7em',
|
||||
},
|
||||
},
|
||||
|
||||
active: {
|
||||
'& span, & svg': {
|
||||
color: theme.palette.primary.main + ' !important',
|
||||
},
|
||||
},
|
||||
|
||||
//DESKTOP PART
|
||||
|
||||
desktopMenuItem: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
padding: theme.spacing(0.4),
|
||||
},
|
||||
'& span.MuiTypography-root': {
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: '500',
|
||||
},
|
||||
},
|
||||
desktopMenuList: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: 0,
|
||||
},
|
||||
appBarDesktopSection: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
appBarDesktopSection1: {
|
||||
padding: theme.spacing(0, 2),
|
||||
height: '100%',
|
||||
borderRight: 'solid 1px whitesmoke',
|
||||
},
|
||||
appBarDesktopSection2: {
|
||||
width: '100%',
|
||||
justifyContent: 'space-between',
|
||||
padding: theme.spacing(0, 2),
|
||||
'& ul': {
|
||||
width: '95%',
|
||||
},
|
||||
'& ul>div': {
|
||||
display: 'flex',
|
||||
},
|
||||
'& ul > div:nth-child(1) a span': {
|
||||
color: theme.palette.primary.dark,
|
||||
'&:hover, &:active': {
|
||||
color: theme.palette.primary.main,
|
||||
}
|
||||
},
|
||||
'& .MuiListItemText-root': {
|
||||
padding: theme.spacing(0, 1),
|
||||
[theme.breakpoints.down('md')]: {
|
||||
padding: theme.spacing(0),
|
||||
},
|
||||
},
|
||||
'& a:last-child .MuiButtonBase-root span': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
appBarDesktopSection3: {
|
||||
padding: theme.spacing(0, 2),
|
||||
height: '100%',
|
||||
backgroundColor: theme.palette.primary.dark,
|
||||
'& a': {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
'& span, & svg': {
|
||||
color: theme.palette.secondary.main,
|
||||
},
|
||||
},
|
||||
toolbarDesktop: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
height: '64px',
|
||||
},
|
||||
desktopMenuButtonLogin: {
|
||||
background: theme.palette.primary.main,
|
||||
borderColor: theme.palette.primary.main,
|
||||
},
|
||||
rootListItemDesktop: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
},
|
||||
iconDesktop: {
|
||||
paddingRight: theme.spacing(2.5),
|
||||
[theme.breakpoints.up('md')]: {
|
||||
paddingRight: 0,
|
||||
},
|
||||
},
|
||||
});
|
||||
let urlEnv;
|
||||
|
||||
class HeaderOffre extends React.Component {
|
||||
state = {
|
||||
top: false,
|
||||
left: false,
|
||||
bottom: false,
|
||||
right: false,
|
||||
toggle: true
|
||||
};
|
||||
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
toggleDrawer = (side, open) => () => {
|
||||
this.setState({
|
||||
[side]: open,
|
||||
});
|
||||
};
|
||||
|
||||
onRedirectAccount = e => {
|
||||
urlEnv = (process.env.NODE_ENV !== 'production') ? '//localhost/app_dev.php' : process.env.SERVER_URL;
|
||||
e.preventDefault();
|
||||
var redirectAccountUrl = urlEnv + "/api/talent?bearer=" + localStorage.getItem("ttJWT");
|
||||
window.open(redirectAccountUrl);
|
||||
}
|
||||
|
||||
toggle = () => this.setState(state => ({ toggle: !state.toggle }))
|
||||
chargerPage =(type)=> {
|
||||
console.log(type);
|
||||
//Router.replace(page);
|
||||
sessionStorage.setItem(type+'_currentPage',1);
|
||||
|
||||
}
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
const { publicRuntimeConfig } = getConfig();
|
||||
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
|
||||
|
||||
<Drawer anchor="right" open={this.state.right} onClose={this.toggleDrawer('right', false)}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={this.toggleDrawer('right', false)}
|
||||
onKeyDown={this.toggleDrawer('right', false)}
|
||||
>{!!this.props.loading &&
|
||||
(<Loader />
|
||||
)}
|
||||
{!!!this.props.loading && !!!this.props.fetched
|
||||
&&
|
||||
<div className={classes.fullList + ' ' + classes.darkFullList}>
|
||||
|
||||
</div>}
|
||||
{!!!this.props.loading && !!this.props.fetched &&
|
||||
<Fragment>
|
||||
{this.props.user.picture ?
|
||||
<img alt="talents-tube" src={publicRuntimeConfig.symphonyUrl +publicRuntimeConfig.postedContentUrl+ this.props.user.picture} className={classes.menuAvatar} />
|
||||
:
|
||||
<img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={classes.menuAvatar} />
|
||||
}
|
||||
<ListItem classes={{ root: classes.rootListItem }} className={classes.ListItemUserConnected}>
|
||||
<Typography gutterBottom component="h1" className={classes.menuUserName}>
|
||||
{this.props.user.firstname + " " + this.props.user.lastname}
|
||||
</Typography>
|
||||
|
||||
<Typography gutterBottom component="h3" className={classes.menuUserEmail} >
|
||||
{this.props.user.email}
|
||||
</Typography>
|
||||
</ListItem>
|
||||
|
||||
<Divider className={classes.darkDivider} />
|
||||
|
||||
{/* TODO:real links */}
|
||||
<Link href="/Candidatures" >
|
||||
<a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
|
||||
<FolderSharedIcon className={classes.icon} />
|
||||
<ListItemText primary='Mes candidatures'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
<Link href="/profileStep" >
|
||||
<a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
|
||||
<AccountCircleIcon className={classes.icon} />
|
||||
<ListItemText primary='Mon compte'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
|
||||
<Link href="/Parametres" >
|
||||
<a className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
|
||||
<SettingsIcon className={classes.icon} />
|
||||
<ListItemText primary='Paramètres de notification'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
<Link href="/" >
|
||||
<a onClick={() => {
|
||||
localStorage.removeItem("ttJWT");
|
||||
return this.props.requestLogout();
|
||||
}} className={classes.lightMenuItem}><ListItem classes={{ root: classes.rootListItemIcon }}>
|
||||
<PowerSettingsNewIcon className={classes.icon} />
|
||||
<ListItemText primary='Déconnexion'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
</Fragment>
|
||||
}
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
{isWidthUp('md', this.props.width) ?
|
||||
(<AppBar position="static" className={classes.appBar}>
|
||||
<Toolbar disableGutters={true} className={classes.toolbarDesktop}>
|
||||
<section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection1}>
|
||||
<Link href="/" >
|
||||
<a className={classes.darkMenuItem}>
|
||||
<ListItem classes={{ root: classes.rootListItemDesktop }}>
|
||||
<img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.desktopMenuLogo} />
|
||||
</ListItem>
|
||||
</a>
|
||||
</Link>
|
||||
</section>
|
||||
<section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection2}>
|
||||
{/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
|
||||
color="inherit" aria-label="Open drawer">
|
||||
<MenuIcon />
|
||||
</IconButton> */}
|
||||
{/* <ButtonBase name='back'
|
||||
focusRipple
|
||||
className={classes.back}
|
||||
focusVisibleClassName={classes.focusVisible}
|
||||
onClick={() => Router.back()}>
|
||||
<ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
|
||||
</ButtonBase> */}
|
||||
<List className={classes.desktopMenuList}>
|
||||
<div>
|
||||
<ActiveLink activeClassName={classes.active} href="/Offres" >
|
||||
<a className={classes.desktopMenuItem} >
|
||||
<ListItemText primary="Offres d'emploi">
|
||||
</ListItemText>
|
||||
</a>
|
||||
</ActiveLink>
|
||||
<ActiveLink activeClassName={classes.active} href="/Entreprises" >
|
||||
<a className={classes.desktopMenuItem}>
|
||||
<ListItemText primary='Nos entreprises'>
|
||||
</ListItemText>
|
||||
</a>
|
||||
</ActiveLink>
|
||||
<ActiveLink activeClassName={classes.active} href="/Help" >
|
||||
<a className={classes.desktopMenuItem}>
|
||||
<ListItemText primary='Comment ça marche ?'>
|
||||
</ListItemText>
|
||||
</a>
|
||||
</ActiveLink>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{!!!this.props.loading && !!!this.props.fetched &&
|
||||
<Fragment>
|
||||
<Link href="/Login?inscription=true" >
|
||||
<a className={classes.desktopMenuItem}>
|
||||
<ListItem classes={{ root: classes.rootListItemDesktop }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className={classes.button + ' ' + classes.desktopMenuButtonRegister}>
|
||||
<PersonAddIcon className={classes.iconDesktop} />
|
||||
<ListItemText classes={{ primary: classes.ListItemText }} primary='Inscription'></ListItemText>
|
||||
</Button >
|
||||
</ListItem>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Link href="/Login" >
|
||||
<a className={classes.desktopMenuItem}>
|
||||
<ListItem classes={{ root: classes.rootListItemDesktop }}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className={classes.button + ' ' + classes.desktopMenuButtonLogin}>
|
||||
<PersonIcon className={classes.iconDesktop} />
|
||||
<ListItemText classes={{ primary: classes.ListItemText }} primary='Connexion'></ListItemText>
|
||||
</Button >
|
||||
</ListItem>
|
||||
</a>
|
||||
</Link>
|
||||
</Fragment>
|
||||
}
|
||||
{!!!this.props.loading && !!this.props.fetched &&
|
||||
<IconButton
|
||||
edge="end"
|
||||
aria-label="Profile"
|
||||
aria-controls={'primary-search-account-menu'}
|
||||
aria-haspopup="true"
|
||||
onClick={this.toggleDrawer('right', true)}
|
||||
className={classes.iconAccount + ' cypConnexionMenu'}
|
||||
>
|
||||
<AccountCircleOutlinedIcon />
|
||||
</IconButton>
|
||||
}
|
||||
</div>
|
||||
</List>
|
||||
</section>
|
||||
<section className={classes.appBarDesktopSection + ' ' + classes.appBarDesktopSection3}>
|
||||
|
||||
<a href={publicRuntimeConfig.symphonyUrl + "/"} className={classes.desktopMenuItem}>
|
||||
<ListItemText primary='Espace recruteurs'>
|
||||
</ListItemText>
|
||||
<ArrowForward className={classes.icon} />
|
||||
</a>
|
||||
</section>
|
||||
</Toolbar>
|
||||
</AppBar>)
|
||||
:
|
||||
(
|
||||
<AppBar position="static" className={classes.appBar}>
|
||||
<Toolbar className={classes.toolbar}>
|
||||
{/* <IconButton className={classes.menuButton} onClick={this.toggleDrawer('left', true)}
|
||||
color="inherit" role="button">
|
||||
<MenuIcon />
|
||||
</IconButton> */}
|
||||
<ButtonBase name='back'
|
||||
focusRipple
|
||||
className={classes.back}
|
||||
focusVisibleClassName={classes.focusVisible}
|
||||
onClick={() => Router.back()}>
|
||||
<ArrowLeft color="primary" classes={{ root: classes.icon }}></ArrowLeft>
|
||||
</ButtonBase>
|
||||
<div className={classes.grow} />
|
||||
<Link href="/" >
|
||||
<a><img alt="talents-tube" src='/statique/images/logos/TalentsTube_logo-color.svg' className={classes.menuLogo} /></a>
|
||||
</Link>
|
||||
<div className={classes.grow} />
|
||||
<IconButton
|
||||
edge="end"
|
||||
aria-label="Profile"
|
||||
aria-controls={'primary-search-account-menu'}
|
||||
aria-haspopup="true"
|
||||
onClick={this.toggleDrawer('right', true)}
|
||||
className={classes.iconAccount + ' cypConnexionMenu'}
|
||||
|
||||
>
|
||||
<AccountCircleOutlinedIcon />
|
||||
</IconButton>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
)}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state) {
|
||||
return {
|
||||
user: state.user,
|
||||
fetched: !!state.user.fetched,
|
||||
loading: !!state.user.loading
|
||||
};
|
||||
}
|
||||
export default (connect(mapStateToProps, { fetchCurrentUserRequest, requestLogout })(withStyles(styles)(withWidth()(HeaderOffre))));
|
||||
@@ -49,6 +49,12 @@ const styles = theme => ({
|
||||
justifyContent: 'flex-start',
|
||||
margin: theme.spacing(0, 0),
|
||||
},
|
||||
headerContainerMobile: {
|
||||
display: 'flex',
|
||||
top : '-20px',
|
||||
marginLeft : '20px'
|
||||
|
||||
},
|
||||
headerContainerDesktop: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
@@ -76,6 +82,15 @@ const styles = theme => ({
|
||||
color: theme.palette.primary.dark,
|
||||
}
|
||||
},
|
||||
infoContainerMobile: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
margin: theme.spacing(0, 1.5),
|
||||
'& a': {
|
||||
textDecoration: 'none',
|
||||
color: theme.palette.primary.dark,
|
||||
}
|
||||
},
|
||||
logoContainer: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -98,8 +113,18 @@ const styles = theme => ({
|
||||
width: '100%',
|
||||
borderBottom: '1px solid #E8E8E9',
|
||||
paddingBottom: '20px'
|
||||
|
||||
|
||||
},
|
||||
IconTextContainerMobile: {
|
||||
display: '',
|
||||
alignItems: 'center',
|
||||
// justifyContent: 'flex-start',
|
||||
width: '100%',
|
||||
borderTop: '1px solid #E8E8E9',
|
||||
borderBottom: '1px solid #E8E8E9',
|
||||
paddingTop: '20px',
|
||||
paddingBottom: '20px',
|
||||
marginLeft:'20px',
|
||||
marginRight:'20px'
|
||||
},
|
||||
contentContainer: {
|
||||
display: 'flex',
|
||||
@@ -187,13 +212,15 @@ const styles = theme => ({
|
||||
boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
|
||||
},
|
||||
logo: {
|
||||
|
||||
|
||||
|
||||
width: '120px',
|
||||
height: '120px',
|
||||
marginBottom:'20px',
|
||||
|
||||
},
|
||||
logoMobile: {
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
marginTop:'20px',
|
||||
|
||||
},
|
||||
stickyContainer:{
|
||||
margin: '10px 0px',
|
||||
@@ -228,12 +255,14 @@ const styles = theme => ({
|
||||
fontWeight: '600',
|
||||
marginTop:'40px',
|
||||
marginBottom:'20px',
|
||||
paddingRight:'20px',
|
||||
color: '#1E2327',
|
||||
|
||||
[theme.breakpoints.up('md')]: {
|
||||
paddingTop: theme.spacing(2),
|
||||
},
|
||||
},
|
||||
|
||||
offreTitle: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
fontSize: '1.3em',
|
||||
@@ -247,7 +276,7 @@ const styles = theme => ({
|
||||
fontSize: '1.625em',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
top: '40px',
|
||||
top: '0px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
color: '#fff',
|
||||
@@ -255,8 +284,22 @@ const styles = theme => ({
|
||||
lineHeight : '40px',
|
||||
marginBottom : '40px'
|
||||
|
||||
},
|
||||
voirEntrepriseMobile: {
|
||||
fontSize: '1.125em',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
top: '20px',
|
||||
left: '40px',
|
||||
right: '40px',
|
||||
color: '#fff',
|
||||
textAlign:'left',
|
||||
lineHeight : '40px',
|
||||
marginBottom : '40px'
|
||||
|
||||
},
|
||||
contentText: {
|
||||
width:"95%",
|
||||
fontSize: '1em',
|
||||
fontWeight: '300',
|
||||
padding: theme.spacing(1, 0),
|
||||
@@ -264,7 +307,6 @@ const styles = theme => ({
|
||||
textAlign: 'justify',
|
||||
lineHeight : '2em',
|
||||
color: '#1E2327'
|
||||
|
||||
},
|
||||
ul:{
|
||||
lineHeight : '5em',
|
||||
@@ -291,6 +333,7 @@ const styles = theme => ({
|
||||
iconText: {
|
||||
marginLeft: 0,
|
||||
justifyContent: 'flex-start',
|
||||
fontWeight: 400,
|
||||
padding: theme.spacing(0.25, 0),
|
||||
},
|
||||
iconTextDesktop: {
|
||||
@@ -360,6 +403,9 @@ const styles = theme => ({
|
||||
margin: '35px 0',
|
||||
textAlign : 'center'
|
||||
|
||||
},
|
||||
pourvuButton:{
|
||||
|
||||
},
|
||||
videoOffre: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
@@ -485,7 +531,48 @@ const styles = theme => ({
|
||||
left: '120px',
|
||||
color: '#fff',
|
||||
},
|
||||
iconPlayMobile: {
|
||||
fontSize: '1.5em',
|
||||
color: theme.palette.background.grey,
|
||||
position: 'absolute',
|
||||
bottom: '60px',
|
||||
left: '20px',
|
||||
color: '#1E2327',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '100px',
|
||||
padding: '10px',
|
||||
marginRight:'15px'
|
||||
|
||||
},
|
||||
playerTexteMobile: {
|
||||
fontSize: '1em',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
bottom: '70px',
|
||||
left: '80px',
|
||||
color: '#fff',
|
||||
},
|
||||
iconPlayBasMobile: {
|
||||
fontSize: '1.5em',
|
||||
color: theme.palette.background.grey,
|
||||
position: 'absolute',
|
||||
bottom: '30px',
|
||||
left: '20px',
|
||||
color: '#1E2327',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: '100px',
|
||||
padding: '15px',
|
||||
marginRight:'15px'
|
||||
|
||||
},
|
||||
playerTexteBasMobile: {
|
||||
fontSize: '1em',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
bottom: '47px',
|
||||
left: '80px',
|
||||
color: '#fff',
|
||||
},
|
||||
|
||||
poste: {
|
||||
// backgroundColor :'#000',
|
||||
@@ -502,6 +589,21 @@ const styles = theme => ({
|
||||
marginBottom : '40px',
|
||||
padding:'10px'
|
||||
},
|
||||
posteMobile: {
|
||||
// backgroundColor :'#000',
|
||||
// opacity:'0.5',
|
||||
fontSize: '1.250em',
|
||||
fontWeight: '600',
|
||||
position: 'absolute',
|
||||
top: '7px',
|
||||
left: '45px',
|
||||
right: '10px',
|
||||
color: '#fff',
|
||||
textAlign:'left',
|
||||
lineHeight : '20px',
|
||||
marginBottom : '20px',
|
||||
padding:'10px'
|
||||
},
|
||||
containerPoste:{
|
||||
|
||||
display: 'flex',
|
||||
@@ -626,6 +728,60 @@ function OffreDetail(props) {
|
||||
}
|
||||
|
||||
const imgDefaultUrl = "/static/images/default/default_picture_company.svg"
|
||||
{/* CONST MARQUE EMPLOYEUR */}
|
||||
const marqueEmployeur = offre.company.presentation_video && !offre.is_promoted && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||||
<section>
|
||||
|
||||
|
||||
{/* <a href={entrepriseLink}> */}
|
||||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
|
||||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
{/* </a> */}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
{/* FIN CONST MARQUE EMPLOYEUR */}
|
||||
{/* CONST TERRITOIRE */}
|
||||
|
||||
{/* FIN CONST TERRITOIRE */}
|
||||
{/* CONST DESCRIPTIF */}
|
||||
const descriptif = <section>
|
||||
<Typography variant="h1" component="h1" gutterBottom className={classes.title}>
|
||||
Descriptif de l’annonce
|
||||
</Typography>
|
||||
{/* <SimpleCollapse> */}
|
||||
<Typography gutterBottom className={classes.contentText}>
|
||||
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: offre.description
|
||||
}}></div>
|
||||
</Typography></section>
|
||||
{/* FIN CONST DESCRIPTIF */}
|
||||
{/* CONST COMPETENCES */}
|
||||
const competencesAffichage = competences.length>0 && (
|
||||
<section >
|
||||
<Typography variant="h2" component="h2" gutterBottom className={classes.title}>
|
||||
Compétences recherchées
|
||||
</Typography>
|
||||
<ul className={classes.ulListeCompetences}>{listItems}</ul>
|
||||
|
||||
</section>
|
||||
)
|
||||
{/*FIN CONST COMPETENCES */}
|
||||
return (
|
||||
|
||||
<Fragment>
|
||||
@@ -654,6 +810,7 @@ function OffreDetail(props) {
|
||||
job_temps_type= {tempsType}
|
||||
job_contract_type= {jobContract}
|
||||
></JobPosting>
|
||||
<Hidden smDown>
|
||||
{/* PARTIE DESKTOP */}
|
||||
<div style={{ width:'100%', justifyContent: 'center', display: 'flex', marginTop:'40px' }}>
|
||||
<div style={{ width:'1200px' }}>
|
||||
@@ -661,164 +818,101 @@ function OffreDetail(props) {
|
||||
<div style={{width:'67%' }}>
|
||||
{offre.video && (
|
||||
|
||||
<Fragment>
|
||||
<Suspense fallback={renderLoader()}>
|
||||
{/* <VideoVimeo {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' /> */}
|
||||
<div className={classes.contentContainer}>
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<div className={classes.containerPoste}>
|
||||
|
||||
<Typography variant="h1" component="h1" gutterBottom className={classes.poste}>
|
||||
{offre.title} <br></br>
|
||||
<span className={classes.posteEntreprise}>{offre.company.brand_name ? offre.company.brand_name : ""}</span>
|
||||
</Typography>
|
||||
<Fragment>
|
||||
<Suspense fallback={renderLoader()}>
|
||||
{/* <VideoVimeo {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' /> */}
|
||||
<div className={classes.contentContainer}>
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<div className={classes.containerPoste}>
|
||||
|
||||
<Typography variant="h1" component="h1" gutterBottom className={classes.poste}>
|
||||
{offre.title} <br></br>
|
||||
<span className={classes.posteEntreprise}>{offre.company.brand_name ? offre.company.brand_name : ""}</span>
|
||||
</Typography>
|
||||
|
||||
</div>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlay} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexte}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlay} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexte}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</Suspense>
|
||||
<div className={classes.container}>
|
||||
{/* PARTIE MOBILE */}
|
||||
<Hidden mdUp>
|
||||
<section className={classes.headerContainer}>
|
||||
<div className={classes.logoContainer}>
|
||||
|
||||
<a href={entrepriseLink} >
|
||||
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
|
||||
src={logoUrl} alt="companylogo" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div className={classes.infoContainer}>
|
||||
<Typography gutterBottom variant="h5" component="h1" className={classes.title}>
|
||||
{offre.title}
|
||||
</Typography>
|
||||
<a href={entrepriseLink} >
|
||||
<Typography gutterBottom variant="subtitle1" className={classes.text}>
|
||||
{offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
</a>
|
||||
{/* ville */}
|
||||
</div>
|
||||
</section>
|
||||
<section className={classes.IconTextContainerDesktop}>
|
||||
{offre.is_promoted && (<Chip label="Pourvue" className={classes.chip} />)}
|
||||
{offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type} />)}
|
||||
{tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr} />)}
|
||||
{offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
|
||||
{offre.beneficiaire && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)} (D)
|
||||
</section>
|
||||
</Hidden>
|
||||
|
||||
{/* PARTIE DETAIL ANNONCE */}
|
||||
<div className={classes.contentContainer}>
|
||||
<Typography variant="h1" component="h1" gutterBottom className={classes.title}>
|
||||
Descriptif de l’annonce
|
||||
</Typography>
|
||||
</Link>
|
||||
</div>
|
||||
</Suspense>
|
||||
<div className={classes.container}>
|
||||
|
||||
{/* <SimpleCollapse> */}
|
||||
<Typography gutterBottom className={classes.contentText}>
|
||||
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: offre.description
|
||||
}}></div>
|
||||
</Typography>
|
||||
{/* <section className={classes.tagsContainer}>
|
||||
{offre.public_tag.map((label, index) => {
|
||||
return (
|
||||
<Chip label={label} className={classes.tags} key={index} />
|
||||
);
|
||||
})}
|
||||
</section> */}
|
||||
{/* </SimpleCollapse> */}
|
||||
{competences.length>0 && (
|
||||
<section >
|
||||
<Typography variant="h2" component="h2" gutterBottom className={classes.title}>
|
||||
Compétences recherchées
|
||||
</Typography>
|
||||
<ul className={classes.ulListeCompetences}>{listItems}</ul>
|
||||
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* PARTIE MARQUE EMPLOYEUR */}
|
||||
{offre.company.presentation_video && !offre.is_promoted && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||||
<section>
|
||||
|
||||
|
||||
{/* <a href={entrepriseLink}> */}
|
||||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
|
||||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
{/* </a> */}
|
||||
</section>
|
||||
{/* PARTIE DETAIL ANNONCE */}
|
||||
<div className={classes.contentContainer}>
|
||||
{/* PARTIE DESCRIPTIF */}
|
||||
{descriptif}
|
||||
{/* <section className={classes.tagsContainer}>
|
||||
{offre.public_tag.map((label, index) => {
|
||||
return (
|
||||
<Chip label={label} className={classes.tags} key={index} />
|
||||
);
|
||||
})}
|
||||
</section> */}
|
||||
{/* </SimpleCollapse> */}
|
||||
{/* PARTIE compétences */}
|
||||
{competencesAffichage}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* PARTIE TERRITOIRE */}
|
||||
{offre.territories && territoryVideoId && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
|
||||
<section>
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
|
||||
Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
{/* PARTIE MARQUE EMPLOYEUR */}
|
||||
{offre.company.presentation_video && !offre.is_promoted && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||||
<section>
|
||||
|
||||
|
||||
{/* <a href={entrepriseLink}> */}
|
||||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||||
|
||||
|
||||
|
||||
{/* <Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
|
||||
Découvrir le <span className={classes.primary}>territoire</span>
|
||||
</Typography>
|
||||
<section className={classes.discoverTerritoryContentContainer}>
|
||||
<Suspense fallback={renderLoader()}>
|
||||
<VideoVimeo classesOverride={classes.videoTerritory} videoId={territoryVideoId} autoplay='0' />
|
||||
</Suspense>
|
||||
<Typography className={classes.territoryTitle}>
|
||||
{(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||||
</Typography>
|
||||
<Typography className={classes.territoryType} gutterBottom>
|
||||
{(!!!offre.territories) ? offre.territories[0].territory.extra.terType : ''}
|
||||
</Typography>
|
||||
</section> */}
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntreprise} align="center">
|
||||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
{/* </a> */}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
{/* PARTIE TERRITOIRE DESKTOP*/}
|
||||
{offre.territories && territoryVideoId && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
|
||||
<section>
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntreprise} align="center">
|
||||
Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBas} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBas}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
{/* PARTIE STICKY */}
|
||||
<Hidden smDown>
|
||||
|
||||
<StickyBox style={{width:'33%', marginLeft:'40px', padding : '0 15px'}}>
|
||||
|
||||
<section className={classes.stickyContainer}>
|
||||
<a href={entrepriseLink} >
|
||||
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
|
||||
@@ -868,19 +962,122 @@ function OffreDetail(props) {
|
||||
)}
|
||||
{offre.is_promoted && (
|
||||
<section className={classes.pourvu}>
|
||||
<Button variant="contained" disabled className={classes.pourvu}>
|
||||
<Button variant="contained" disabled className={classes.pourvuButton}>
|
||||
Pourvue
|
||||
</Button>
|
||||
</section>
|
||||
// <Chip label="Pourvue" className={classes.chip} />
|
||||
)}
|
||||
</StickyBox>
|
||||
</Hidden>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Hidden>
|
||||
{/* PARTIE MOBILE */}
|
||||
<Hidden mdUp>
|
||||
<section className={classes.contentContainer}>
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.video.cdn_url, '/'))}&type=Offre`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('xs', props.width) ? imgUrlDesktopOffre : imgUrlOffre} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<div className={classes.containerPoste}>
|
||||
|
||||
<Typography variant="h1" component="h1" gutterBottom className={classes.posteMobile}>
|
||||
{offre.title} <br></br>
|
||||
<span className={classes.posteEntreprise}>{offre.company.brand_name ? offre.company.brand_name : ""}</span>
|
||||
</Typography>
|
||||
|
||||
</div>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayMobile} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteMobile}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
<section className={classes.headerContainerMobile}>
|
||||
<div >
|
||||
|
||||
<a href={entrepriseLink} >
|
||||
<Avatar className={classes.logoMobile} classes={{ img: classes.MuiAvatarImg }}
|
||||
src={logoUrl} alt="companylogo" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div className={classes.infoContainerMobile}>
|
||||
<Typography gutterBottom variant="h5" component="h1" className={classes.title}>
|
||||
{offre.title}
|
||||
</Typography>
|
||||
<a href={entrepriseLink} >
|
||||
<Typography gutterBottom variant="subtitle1" className={classes.text}>
|
||||
{offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
</a>
|
||||
{/* ville */}
|
||||
</div>
|
||||
</section>
|
||||
<section className={classes.IconTextContainerMobile}>
|
||||
{offre.is_promoted && (<Chip label="Pourvue" className={classes.chip} />)}
|
||||
{offre.extra && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="assignment" text={offre.extra.contract_type+dureeContrat} />)}
|
||||
{tempsTypeFr && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="watch_later" text={tempsTypeFr+nombreHeure} />)}
|
||||
{offre.location && offre.location.gmap_address && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="location_on" text={offre.location.gmap_address.formatted_address} />)}
|
||||
{teletravail && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="home" text={teletravail} />)}
|
||||
{offre.beneficiaire && (<IconText classes={{ root: classes.iconText, icon: classes.iconTextIcon, text: classes.iconTextText }} variant="business" text={offre.beneficiaire} />)}
|
||||
</section>
|
||||
<section className={classes.IconTextContainerMobile}>
|
||||
{/* PARTIE DESCRIPTIF */}
|
||||
{descriptif}
|
||||
{/* PARTIE competences */}
|
||||
{competencesAffichage}
|
||||
</section>
|
||||
<section>
|
||||
{/* PARTIE MARQUE EMPLOYEUR MOBILE*/}
|
||||
{offre.company.presentation_video && !offre.is_promoted && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
|
||||
<section>
|
||||
|
||||
|
||||
{/* <a href={entrepriseLink}> */}
|
||||
{/* const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`); */}
|
||||
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${Ar.last(_.split(offre.company.presentation_video.cdn_url, '/'))}&type=Entreprise`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('xs', props.width) ? imgUrlDesktop : imgUrl} alt={offre.company.brand_name && offre.company.brand_name} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={ classes.voirEntrepriseMobile} align="center">
|
||||
Découvrir l'entreprise {offre.company.brand_name && offre.company.brand_name}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
{/* </a> */}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
{/* PARTIE TERRITOIRE MOBILE*/}
|
||||
{offre.territories && territoryVideoId && (
|
||||
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
|
||||
<section>
|
||||
<Link href={`/Player?id=/Offre/${offre.id}-${_.kebabCase(offre.title)}&videoId=${territoryVideoId}&type=Territoire`} >
|
||||
<div className={classes.discoverContainerImage}>
|
||||
<img src={isWidthUp('sm', props.width) ? imgUrlDesktopTerritoire : imgUrlTerritoire} alt={(!!!offre.territories) ? offre.territories[0].territory.brand_name : ''} />
|
||||
<Typography variant="h3" component="h3" gutterBottom className={classes.title + ' ' + classes.voirEntrepriseMobile} align="center">
|
||||
Découvrir le territoire {(offre.territories) ? offre.territories[0].territory.brand_name : ''}
|
||||
</Typography>
|
||||
<KeyboardArrowleftIcon className={classes.iconPlayBasMobile} />
|
||||
<Typography variant="h3" component="h3" className={classes.playerTexteBasMobile}>
|
||||
Lire la vidéo
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</Hidden>
|
||||
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
@@ -5,7 +5,7 @@ import Router from 'next/router';
|
||||
import RootContainer from '../atoms/RootContainer'
|
||||
import ButtonBase from "@material-ui/core/ButtonBase";
|
||||
import ArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
|
||||
import Header from '../organisms/Header'
|
||||
import Header from '../organisms/HeaderOffre'
|
||||
import withWidth, { isWidthUp } from '@material-ui/core/withWidth'
|
||||
import Hidden from '@material-ui/core/Hidden';
|
||||
import Link from 'next/link'
|
||||
@@ -72,6 +72,9 @@ const styles = theme => ({
|
||||
backgroundColor: '#F3F3F4',
|
||||
|
||||
},
|
||||
pourvuButton:{
|
||||
padding :'10px'
|
||||
},
|
||||
})
|
||||
|
||||
function LayoutOffre(props) {
|
||||
@@ -81,7 +84,7 @@ function LayoutOffre(props) {
|
||||
|
||||
return (
|
||||
<RootContainer>
|
||||
{isWidthUp('sm', props.width) ?
|
||||
{isWidthUp('xs', props.width) ?
|
||||
(<Header />)
|
||||
:
|
||||
(<ButtonBase name='back'
|
||||
@@ -101,13 +104,12 @@ function LayoutOffre(props) {
|
||||
<div id="F" className={classes.foot}>
|
||||
{/* <div className={classes.inner}>
|
||||
<div className={classes.grow} /> */}
|
||||
<Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
|
||||
{/* <Link href={`/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}`} >
|
||||
<Button
|
||||
variant="contained"
|
||||
className={classes.voirEntreprise + ' cypButtonApply'}
|
||||
>Voir l'entreprise</Button>
|
||||
|
||||
</Link>
|
||||
>Voir l'entreprise</Button>
|
||||
</Link> */}
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
@@ -120,6 +122,19 @@ function LayoutOffre(props) {
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
{isProvided && (
|
||||
<div id="F" className={classes.foot}>
|
||||
{/* <div className={classes.inner}>
|
||||
<div className={classes.grow} /> */}
|
||||
|
||||
|
||||
<Button variant="contained" disabled className={classes.pourvuButton}>
|
||||
Pourvue
|
||||
</Button>
|
||||
{/* <div className={classes.grow} />
|
||||
</div> */}
|
||||
</div>
|
||||
)}
|
||||
</Hidden>
|
||||
|
||||
</RootContainer>
|
||||
|
||||
@@ -33,6 +33,7 @@ class Offre extends React.Component {
|
||||
|
||||
return (
|
||||
<LayoutOffre backLink="/Offres" offreId={offre.id} offre={offre} isProvided={offre.is_promoted}>
|
||||
{/* <Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense> */}
|
||||
<Suspense fallback={renderLoader()}><OffreDetail offre={offre}/></Suspense>
|
||||
</LayoutOffre>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { withStyles, getMuiTheme } from '@material-ui/core/styles';
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import Link from 'next/link'
|
||||
import Drawer from '@material-ui/core/Drawer';
|
||||
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import SendIcon from '@material-ui/icons/Send';
|
||||
import CodeIcon from '@material-ui/icons/Code';
|
||||
import HomeIcon from '@material-ui/icons/Home';
|
||||
import FingerprintIcon from '@material-ui/icons/Fingerprint';
|
||||
import LocalBarIcon from '@material-ui/icons/LocalBar';
|
||||
|
||||
import List from '@material-ui/core/List';
|
||||
import ListItem from '@material-ui/core/ListItem';
|
||||
import { ListItemText } from '@material-ui/core';
|
||||
|
||||
import { Spring, animated } from 'react-spring'
|
||||
|
||||
const styles = theme => ({
|
||||
root: {
|
||||
width: '100%',
|
||||
'& a':{
|
||||
textDecoration:'none'
|
||||
}
|
||||
},
|
||||
|
||||
grow: {
|
||||
flexGrow: 1,
|
||||
},
|
||||
bar: {
|
||||
},
|
||||
menuButton: {
|
||||
marginLeft: -12,
|
||||
marginRight: 20,
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
display: 'none',
|
||||
},
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'block',
|
||||
},
|
||||
},
|
||||
menuLogo: {
|
||||
marginLeft: 20,
|
||||
marginRight: 40,
|
||||
cursor: 'pointer'
|
||||
},
|
||||
title: {
|
||||
display: 'none',
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
display: 'block',
|
||||
},
|
||||
[theme.breakpoints.down('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
marginRight: 15,
|
||||
cursor: 'pointer'
|
||||
},
|
||||
sectionDesktop: {
|
||||
display: 'none',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'flex',
|
||||
},
|
||||
},
|
||||
sectionMobile: {
|
||||
display: 'flex',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
fullList: {
|
||||
width: 'auto',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
});
|
||||
|
||||
class HeaderOffre extends React.Component {
|
||||
state = {
|
||||
top: false,
|
||||
left: false,
|
||||
bottom: false,
|
||||
right: false,
|
||||
toggle: true
|
||||
};
|
||||
|
||||
toggleDrawer = (side, open) => () => {
|
||||
this.setState({
|
||||
[side]: open,
|
||||
});
|
||||
};
|
||||
|
||||
toggle = () => this.setState(state => ({ toggle: !state.toggle }))
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Drawer anchor="top" open={this.state.top} onClose={this.toggleDrawer('top', false)}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={this.toggleDrawer('top', false)}
|
||||
onKeyDown={this.toggleDrawer('top', false)}
|
||||
>
|
||||
<div className={classes.fullList}>
|
||||
<List>
|
||||
<Link href="/" prefetch >
|
||||
<a><ListItem>
|
||||
<ListItemIcon>
|
||||
<HomeIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='Accueil'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
<Divider />
|
||||
<Link href="/contact" prefetch >
|
||||
<a><ListItem>
|
||||
<ListItemIcon>
|
||||
<SendIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary='contact'>
|
||||
</ListItemText>
|
||||
</ListItem></a>
|
||||
</Link>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
<AppBar position="static" className={classes.appBar}>
|
||||
<Toolbar>
|
||||
<IconButton className={classes.menuButton} onClick={this.toggleDrawer('top', true)}
|
||||
color="inherit" aria-label="Open drawer">
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
<Link href="/" prefetch>
|
||||
<a><div onClick={this.toggle}>
|
||||
<Spring native from={{ x: 0 }} to={{ x: this.state.toggle ? 1 : 0 }} config={{ duration: 1000 }}>
|
||||
{({ x }) => (
|
||||
<animated.div
|
||||
style={{
|
||||
opacity: x.interpolate({ output: [1, 1] }),
|
||||
transform: x
|
||||
.interpolate({
|
||||
range: [0, 0.25, 0.35, 0.45, 0.55, 0.65, 0.75, 1],
|
||||
output: [1, 0.97, 0.9, 1.1, 0.9, 1.1, 1.03, 1]
|
||||
})
|
||||
.interpolate(x => `scale(${x})`)
|
||||
}}>
|
||||
<img alt="e-declic" src='https://www.e-declic.com/files/e-declic/img/logo.png' className={classes.menuLogo} />
|
||||
</animated.div>
|
||||
)}
|
||||
</Spring>
|
||||
</div></a>
|
||||
</Link>
|
||||
|
||||
<Link href="/contact" prefetch >
|
||||
<a><Typography className={classes.title} variant="h5" color="inherit" noWrap>
|
||||
Contact
|
||||
</Typography></a>
|
||||
</Link>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</div >
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
HeaderOffre.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
export default withStyles(styles)(HeaderOffre)
|
||||
Reference in New Issue
Block a user