talents-tube/app
9
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Feat: territory style

Browse Source
This commit is contained in:
Sebastien Glatz
2019-10-01 18:09:05 +02:00
parent 2464d4b6bc
commit 5c579cb592
2 changed files with 101 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nextjs/components/organisms/OffreDetail.js
+75 -29
View File
@@ -91,16 +91,13 @@ const styles = theme => ({
alignItems: 'flex-start',
justifyContent: 'flex-start',
margin: theme.spacing(1.5, 0),
[theme.breakpoints.up('md')]: {
paddingBottom: '8vh',
},
},
shareContainer: {
display: 'flex',
flexDirection: 'column',
alignSelf: 'center',
},
discoverContainer: {
discoverContainerCompany: {
backgroundColor: theme.palette.background.grey,
paddingBottom: theme.spacing(2),
'& section': {
@@ -110,9 +107,6 @@ const styles = theme => ({
justifyContent: 'center',
backgroundColor: theme.palette.background.grey,
},
[theme.breakpoints.up('md')]: {
marginBottom: '8vh',
},
},
discoverContainerImage: {
cursor: 'pointer',
@@ -130,6 +124,17 @@ const styles = theme => ({
width: '100%',
},
},
discoverContainerTerritory: {
backgroundColor: theme.palette.background.grey,
paddingBottom: theme.spacing(10),
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(8),
},
},
discoverTerritoryContentContainer: {
boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
},
logo: {
width: 'inherit',
height: '100%',
@@ -240,11 +245,31 @@ const styles = theme => ({
marginRight: 'auto',
},
},
video: {
videoOffre: {
[theme.breakpoints.up('md')]: {
paddingBottom: '35%', /* 16:9 */
},
},
videoTerritory: {
paddingBottom: '56% !important',
[theme.breakpoints.up('md')]: {
paddingBottom: '56% !important',
}
},
territoryTitle: {
fontWeight: '500',
padding: theme.spacing(2),
paddingBottom: 0,
background: theme.palette.background.default,
},
territoryType: {
fontWeight: '200',
padding: theme.spacing(2),
paddingTop: 0,
background: theme.palette.background.default,
borderBottomLeftRadius: '5px',
borderBottomRightRadius: '5px',
},
})
const { publicRuntimeConfig } = getConfig()
@@ -257,13 +282,15 @@ function OffreDetail(props) {
const imgUrlDesktop = (offre.company && offre.company.presentation_video && offre.company.presentation_video.thumbnails && offre.company.presentation_video.thumbnails[0] && offre.company.presentation_video.thumbnails[0].sizes[4]) ? offre.company.presentation_video.thumbnails[0].sizes[4].link : DefaultUrl
const socialShareUrl = typeof window !== 'undefined' ? window.location : publicRuntimeConfig.frontServerUrl + `/Offre/${offre.id}-${_.kebabCase(offre.title)}-${_.kebabCase(offre.location.gmap_address.name)}`;
const entrepriseLink = (offre.company && `/Entreprise/${offre.company.id}-${_.kebabCase(offre.company.brand_name)}-${_.kebabCase(offre.location.gmap_address.name)}`);
const territoryVideoUrlTab = (offre.territories && offre.territories[0] && offre.territories[0].territory)?offre.territories[0].territory.presentation_video.cdn_url.split('/'):'';
const territoryVideoId = territoryVideoUrlTab[2]
return (
<Fragment>
<OgHead seo_title={offre.title}
seo_description={offre.description}
seo_url={socialShareUrl}
image={imgUrlDesktop}
<OgHead seo_title={offre.title}
seo_description={offre.description}
seo_url={socialShareUrl}
image={imgUrlDesktop}
></OgHead>
{offre.video && (
<Fragment>
@@ -274,8 +301,8 @@ function OffreDetail(props) {
<a>
<div className={classes.logoContainer}>
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
src={logoUrl} alt="companyLogo" />
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
src={logoUrl} alt="companyLogo" />
</div>
</a>
@@ -307,7 +334,7 @@ function OffreDetail(props) {
</section>
</Hidden>
<VideoVimeo {...isCandidature == 'true' ? 'classes={{ video: classes.video }}': ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1'/>
<VideoVimeo {...isCandidature == 'true' ? 'classes={{ video: classes.videoOffre }}' : ''} videoId={Ar.last(_.split(offre.video.cdn_url, '/'))} autoplay='1' />
<div className={classes.container}>
<Hidden mdUp>
@@ -317,7 +344,7 @@ function OffreDetail(props) {
<a>
<Avatar className={classes.logo} classes={{ img: classes.MuiAvatarImg }}
src={logoUrl} alt="companylogo"/>
src={logoUrl} alt="companylogo" />
</a>
</div>
@@ -382,21 +409,40 @@ function OffreDetail(props) {
</div>
</div>
{offre.company.presentation_video && !offre.is_promoted && (
<div className={classes.container + ' ' + classes.discoverContainer}>
<section>
<Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
Découvrir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
</Typography>
<div className={classes.container + ' ' + classes.discoverContainerCompany}>
<section>
<Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
Découvrir l'entreprise <span className={classes.primary}>{offre.company.brand_name && offre.company.brand_name}</span>
</Typography>
<Link href={entrepriseLink} >
<div className={classes.discoverContainerImage}>
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt="company"/>
<KeyboardArrowleftIcon className={classes.iconPlay} />
</div>
</Link>
</section>
<Link href={entrepriseLink} >
<div className={classes.discoverContainerImage}>
<img src={isWidthUp('sm', props.width) ? imgUrlDesktop : imgUrl} alt="company" />
<KeyboardArrowleftIcon className={classes.iconPlay} />
</div>
</Link>
</section>
</div>
)}
{offre.territories && (
<div className={classes.container + ' ' + classes.discoverContainerTerritory}>
<section>
<Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
Découvrir le <span className={classes.primary}>territoire</span>
</Typography>
<section className={classes.discoverTerritoryContentContainer}>
<VideoVimeo classesOverride={classes.videoTerritory} videoId={territoryVideoId} autoplay='0' />
<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>
)}
</Fragment>
nextjs/pages/Entreprise.js
+26 -11
View File
@@ -152,8 +152,14 @@ const styles = theme => ({
},
},
discoverTerritoryContentContainer: {
boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.10)',
boxShadow: '0px 0px 10px rgba(30, 35, 39, 0.15)',
transition: 'box-shadow ease-out',
'&:hover': {
boxShadow: '0px 6px 16px rgba(30, 35, 39, 0.15)',
transition: 'box-shadow 2s',
},
},
logo: {
width: 'inherit',
height: '100%',
@@ -302,14 +308,21 @@ const styles = theme => ({
}
},
videoVimeo: {
paddingBottom: '56% !important',
paddingBottom: '56% !important',
[theme.breakpoints.up('md')]: {
paddingBottom: '56% !important',
paddingBottom: '56% !important',
}
},
territoryTitle: {
fontWeight: '500',
padding: theme.spacing(2),
paddingBottom: 0,
background: theme.palette.background.default,
},
territoryType: {
fontWeight: '200',
padding: theme.spacing(2),
paddingTop: 0,
background: theme.palette.background.default,
borderBottomLeftRadius: '5px',
borderBottomRightRadius: '5px',
@@ -347,9 +360,8 @@ class Entreprise extends React.Component {
const offre = (company.count_ads == 1) ? company.count_ads + ' offre' : company.count_ads + ' offres'
const nbOffre = (company.count_ads > 0) ? offre : 'Candidature spontanée'
const territoryVideoUrlTab = (company.territories[0] && company.territories[0].territory)?company.territories[0].territory.presentation_video.cdn_url.split('/'):'';
const territoryVideoUrlTab = (company.territories[0] && company.territories[0].territory) ? company.territories[0].territory.presentation_video.cdn_url.split('/') : '';
const territoryVideoId = territoryVideoUrlTab[2]
console.log(territoryVideoUrlTab)
const NewLayout = ({ Table }) => (
<div>
@@ -407,7 +419,7 @@ class Entreprise extends React.Component {
>Candidature spontanée</Button>
</section>
</Hidden>
{company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1'/>}
{company.presentation_video && <VideoVimeo videoId={Ar.last(_.split(company.presentation_video.cdn_url, '/'))} autoplay='1' />}
<div className={classes.container}>
<Hidden mdUp>
<section className={classes.headerContainer}>
@@ -525,11 +537,14 @@ class Entreprise extends React.Component {
<section>
<Typography gutterBottom className={classes.title + ' ' + classes.discoverTitle} align="center">
Découvrir le <span className={classes.primary}>territoire</span>
</Typography>
<section className={ classes.discoverTerritoryContentContainer }>
<VideoVimeo classesOverride={ classes.videoVimeo } videoId={territoryVideoId} autoplay='0' />
<Typography className={ classes.territoryTitle } gutterBottom>
{ !_.isEmpty(company.territories) ? company.territories[0].territory.brand_name : '' }
</Typography>
<section className={classes.discoverTerritoryContentContainer}>
<VideoVimeo classesOverride={classes.videoVimeo} videoId={territoryVideoId} autoplay='0' />
<Typography className={classes.territoryTitle}>
{(company.territories) ? company.territories[0].territory.brand_name : ''}
</Typography>
<Typography className={classes.territoryType} gutterBottom>
{(company.territories) ? company.territories[0].territory.extra.terType : ''}
</Typography>
</section>
</section>