betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

🎨 Image et style de l'entête

barème-continu
Mael 2018-11-20 21:02:59 +01:00
parent 6d9514828a
commit 6f69641aba
2 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
source/components/GenericSimulation.css
View File

@ -1,10 +1,31 @@
#GenericSimulation {
}
#GenericSimulation > button {
#GenericSimulation #simulationContent button {
padding: 0.6em 1em;
text-align: center;
margin: 1em auto;
display: block;
border-radius: 6px;
font-weight: 500;
}
#GenericSimulation header {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1em;
}
#GenericSimulation header > h1 {
margin: 0.6em 1em 0;
}
#GenericSimulation img {
max-width: 800px;
max-height: 24em;
}
@media (min-width: 1200px) {
#GenericSimulation header > h1 {
width: 10em;
}
#GenericSimulation header {
margin-left: 10%;
}
}

49
source/components/GenericSimulation.js
View File

@ -21,29 +21,34 @@ export default class YO extends React.Component {
let { colours, noNextSteps, previousAnswers } = this.props
console.log(noNextSteps)
return (
<div className="ui__ container" id="GenericSimulation">
<h1>Quel est l'impact de vos douches ? </h1>
{!isEmpty(previousAnswers) && (
<button
style={{ background: colours.colour, color: colours.textColour }}
onClick={() => this.setState({ displayAnswers: true })}>
Mes réponses
</button>
)}
<div id="GenericSimulation">
<header>
<img src="https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=014e46e03c4b8f6472e77c50c5088377&auto=format&fit=crop&w=800&q=80" />
<h1>Quel est l'impact de vos douches ? </h1>
</header>
<div className="ui__ container" id="simulationContent">
{!isEmpty(previousAnswers) && (
<button
style={{ background: colours.colour, color: colours.textColour }}
onClick={() => this.setState({ displayAnswers: true })}>
Mes réponses
</button>
)}
{this.state.displayAnswers && (
<Answers onClose={() => this.setState({ displayAnswers: false })} />
)}
<Conversation
textColourOnWhite={this.props.colours.textColourOnWhite}
/>
{noNextSteps && (
<>
<h2>Plus de questions ! </h2>
<p>Vous avez atteint l'estimation la plus précise.</p>
</>
)}
<Targets />
{this.state.displayAnswers && (
<Answers onClose={() => this.setState({ displayAnswers: false })} />
)}
<Conversation
textColourOnWhite={this.props.colours.textColourOnWhite}
/>
{noNextSteps && (
<>
<h2>Plus de questions ! </h2>
<p>Vous avez atteint l'estimation la plus précise.</p>
</>
)}
<Targets />
</div>
</div>
)
}