ajoute un header de navigation pour infrance.org
Johan Girod
Mael
parent
457933b3ed
commit
c11d2a877d
|
|
@ -85,18 +85,6 @@ export default class Simu extends Component {
|
|||
)}
|
||||
<TargetSelection colours={colours} />
|
||||
</div>
|
||||
{displayResults && (
|
||||
<Animate.appear>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<button
|
||||
className="ui__ button"
|
||||
style={{ margin: 0 }}
|
||||
onClick={onSimulationContinued}>
|
||||
Continue ›
|
||||
</button>
|
||||
</div>
|
||||
</Animate.appear>
|
||||
)}
|
||||
{conversationStarted && (
|
||||
<div className="ui__ answer-group">
|
||||
<button className="ui__ skip-button">Change my answers</button>
|
||||
|
|
|
|||
|
|
@ -50,9 +50,14 @@
|
|||
|
||||
.step-question h1:before {
|
||||
content: '›';
|
||||
position: absolute;
|
||||
left: -1.1rem;
|
||||
}
|
||||
@media (min-width: 500px) {
|
||||
.step-question h1:before {
|
||||
position: absolute;
|
||||
left: -1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.step-question h1 {
|
||||
font-size: 1.7rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
@media (min-width: 500px) {
|
||||
.ui__.steps-header nav {
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
.ui__.steps-header nav {
|
||||
height: 5em;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
margin: auto;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.ui__.steps-header {
|
||||
margin-top: 1.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui__.steps-header a {
|
||||
margin-right: 0.8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.2s;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.ui__.steps-header a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ui__.steps-header a img {
|
||||
height: 80%;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.ui__.steps-header a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.ui__.steps-header a.active {
|
||||
opacity: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ui__.steps-header .progress {
|
||||
margin-top: 0.6rem;
|
||||
height: 0.5rem;
|
||||
background: rgb(41, 117, 209, 0.2);
|
||||
border-radius: 0.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui__.steps-header .progress .bar {
|
||||
background-color: rgb(41, 117, 209);
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
import './StepsHeader.css'
|
||||
import hiringSvg from './hiring.svg';
|
||||
import companySvg from './company.svg';
|
||||
import estimateSvg from './estimate.svg';
|
||||
const Progress = ({ percent}) => <div className="progress"><div className="bar" style={{
|
||||
width: `${percent}%`
|
||||
}}/></div>
|
||||
|
||||
const StepsHeader = () => (
|
||||
<header className="ui__ steps-header container"><nav>
|
||||
<NavLink to="/create-my-company" activeClassName="active">
|
||||
<img src={companySvg}/>
|
||||
<Progress percent={80}/>
|
||||
</NavLink>
|
||||
<NavLink to="/hiring-and-social-security" activeClassName="active">
|
||||
<img src={estimateSvg}/>
|
||||
<Progress percent={20}/>
|
||||
</NavLink>
|
||||
<NavLink to="/hiring-step-list" activeClassName="active">
|
||||
<img src={hiringSvg}/>
|
||||
<Progress percent={40}/>
|
||||
</NavLink></nav>
|
||||
</header>
|
||||
)
|
||||
|
||||
export default StepsHeader
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:rgb(41, 117, 209);}
|
||||
.st2{fill:none;stroke:rgb(41, 117, 209);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M24,47.5C11,47.5,0.5,37,0.5,24S11,0.5,24,0.5S47.5,11,47.5,24S37,47.5,24,47.5z"/>
|
||||
<path class="st1" d="M24,1c12.7,0,23,10.3,23,23S36.7,47,24,47S1,36.7,1,24S11.3,1,24,1 M24,0C10.7,0,0,10.7,0,24s10.7,24,24,24
|
||||
s24-10.7,24-24S37.3,0,24,0L24,0z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st2" d="M12.6,21.4v14.8c0,0.6,0.5,1.1,1.1,1.1h5.5c0.6,0,1.1-0.5,1.1-1.1v-6.3c0-0.6,0.5-1.1,1.1-1.1h5.4
|
||||
c0.6,0,1.1,0.5,1.1,1.1v6.3c0,0.6,0.5,1.1,1.1,1.1h5.5c0.6,0,1.1-0.5,1.1-1.1V21.4"/>
|
||||
<path class="st2" d="M9.4,24.6l13.4-13.4c0.7-0.7,1.8-0.7,2.5,0l13.4,13.4"/>
|
||||
<line class="st2" x1="15.5" y1="18" x2="15.5" y2="12.6"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,35 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:rgb(41, 117, 209);}
|
||||
.st2{fill:rgb(41, 117, 209, 0.7);}
|
||||
.st3{fill:none;stroke:rgb(41, 117, 209);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
.st4{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M24,47.5C11,47.5,0.5,37,0.5,24S11,0.5,24,0.5S47.5,11,47.5,24S37,47.5,24,47.5z"/>
|
||||
<path class="st1" d="M24,1c12.7,0,23,10.3,23,23S36.7,47,24,47S1,36.7,1,24S11.3,1,24,1 M24,0C10.7,0,0,10.7,0,24s10.7,24,24,24
|
||||
s24-10.7,24-24S37.3,0,24,0L24,0z"/>
|
||||
</g>
|
||||
<path class="st2" d="M37.3,24v9.5c0,1.2-2.6,3.8-3.8,3.8H24V24H37.3z"/>
|
||||
<path class="st3" d="M11,15.5c0-2.6,2.1-4.8,4.8-4.8h16.6c2.6,0,4.8,2.1,4.8,4.8v16.9c0,2.6-2.1,4.8-4.8,4.8H15.8
|
||||
c-2.6,0-4.8-2.1-4.8-4.8V15.5z"/>
|
||||
<g>
|
||||
<line class="st3" x1="17.5" y1="14.8" x2="17.5" y2="20.4"/>
|
||||
<line class="st3" x1="20.3" y1="17.6" x2="14.7" y2="17.6"/>
|
||||
</g>
|
||||
<line class="st3" x1="33.4" y1="17.6" x2="27.9" y2="17.6"/>
|
||||
<g>
|
||||
<line class="st4" x1="33.4" y1="29" x2="27.9" y2="29"/>
|
||||
<line class="st4" x1="33.4" y1="32.3" x2="27.9" y2="32.3"/>
|
||||
</g>
|
||||
<g>
|
||||
<line class="st3" x1="19.5" y1="28.7" x2="15.5" y2="32.6"/>
|
||||
<line class="st3" x1="19.5" y1="32.6" x2="15.5" y2="28.7"/>
|
||||
</g>
|
||||
<line class="st3" x1="24" y1="10.7" x2="24" y2="37.2"/>
|
||||
<line class="st3" x1="11" y1="23.9" x2="37.2" y2="23.9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:rgb(41, 117, 209);}
|
||||
.st2{fill:#FFFFFF;stroke:rgb(41, 117, 209);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
|
||||
.st3{fill:rgb(41, 117, 209, 0.7);stroke:rgb(41, 117, 209);stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M24,47.5C11,47.5,0.5,37,0.5,24S11,0.5,24,0.5S47.5,11,47.5,24S37,47.5,24,47.5z"/>
|
||||
<path class="st1" d="M24,1c12.7,0,23,10.3,23,23S36.7,47,24,47S1,36.7,1,24S11.3,1,24,1 M24,0C10.7,0,0,10.7,0,24s10.7,24,24,24
|
||||
s24-10.7,24-24S37.3,0,24,0L24,0z"/>
|
||||
</g>
|
||||
<path class="st2" d="M36.1,20h-1.2c-0.4,0-0.8-0.2-1-0.4L31.4,17c-0.1-0.1-0.2-0.2-0.4-0.3l-4.3-2.2c-0.7-0.4-1.5-0.1-1.9,0.6
|
||||
l-0.3,0.6c-0.3,0.6-0.2,1.4,0.4,1.8l0.3,0.2c0.9,0.7,0.7,2.1-0.3,2.5l-8.8,3.7c-0.8,0.4-1.2,1.4-0.6,2.2l0.7,1
|
||||
c0.4,0.6,1.1,0.8,1.7,0.5l5.4-2.3l-4.9,2.1c-0.9,0.4-1.1,1.4-0.6,2.2l0.4,0.5c0.4,0.5,1,0.7,1.6,0.5l6.1-2.1l-5.3,1.8
|
||||
c-0.9,0.3-1.3,1.5-0.7,2.2l0.4,0.5c0.5,0.7,1.4,1,2.2,0.7L36,29.6c0.6-0.2,1.1-0.8,1-1.5l-0.6-7.8C36.4,20.1,36.3,20,36.1,20z"/>
|
||||
<path class="st2" d="M11.5,19.4l2.4,0.5c0.4,0.1,0.8,0,1.2-0.2l6-3.6c0.6-0.4,1.3-0.3,1.9,0.1l4.7,3.6c0.8,0.6,0.9,1.9,0.1,2.6l0,0
|
||||
c-0.6,0.5-1.5,0.6-2.1,0.1L24,21.3c-0.5-0.3-1.1-0.4-1.7-0.1l-6,2.9c-0.9,0.4-1.2,1.6-0.7,2.5l1.7,2.4c0.7,1.1,0.1,2.5-1.2,2.6
|
||||
l-0.6,0.1c-0.2,0-0.4,0-0.6-0.1l-3-0.9c-0.8-0.2-1.3-1-1.2-1.8L11.5,19.4z"/>
|
||||
<path class="st3" d="M11.1,31.6H7.5c-0.6,0-1.1-0.5-1.1-1.1V19.4c0-0.6,0.5-1.1,1.1-1.1h3.7c0.6,0,1.1,0.5,1.1,1.1v11.1
|
||||
C12.2,31.1,11.7,31.6,11.1,31.6z"/>
|
||||
<path class="st3" d="M40.5,31.6h-3.7c-0.6,0-1.1-0.5-1.1-1.1V19.3c0-0.6,0.5-1.1,1.1-1.1h3.7c0.6,0,1.1,0.5,1.1,1.1v11.1
|
||||
C41.6,31.1,41.1,31.6,40.5,31.6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -8,6 +8,7 @@ import Landing from './Landing'
|
|||
import Hiring from './Steps/Cost and benefits'
|
||||
import CreateMyCompany from './Steps/Create/index'
|
||||
import FindMyCompany from './Steps/Find'
|
||||
import StepsHeader from './Steps/StepsHeader'
|
||||
import './ui/index.css'
|
||||
class Layout extends Component {
|
||||
componentDidMount() {
|
||||
|
|
@ -27,12 +28,15 @@ class Layout extends Component {
|
|||
</Helmet>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Landing} />
|
||||
<div className="ui__ container">
|
||||
<Route path="/règle/:name" component={RulePage} />
|
||||
<Route path="/create-my-company" component={CreateMyCompany} />
|
||||
<Route path="/hiring-and-social-security" component={Hiring} />
|
||||
<Route path="/find-my-company" component={FindMyCompany} />
|
||||
</div>
|
||||
<>
|
||||
<StepsHeader/>
|
||||
<div className="ui__ container">
|
||||
<Route path="/règle/:name" component={RulePage} />
|
||||
<Route path="/create-my-company" component={CreateMyCompany} />
|
||||
<Route path="/hiring-and-social-security" component={Hiring} />
|
||||
<Route path="/find-my-company" component={FindMyCompany} />
|
||||
</div>
|
||||
</>
|
||||
</Switch>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in New Issue