🎨 Design plein bleu pour l'ecran d'accueil
Mael
Laurent Bossavit
parent
c9076eff41
commit
804f46d104
|
|
@ -1,23 +1,23 @@
|
|||
#targetSelection {
|
||||
height: 35em;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
font-size: 100%;
|
||||
max-width: 860px;
|
||||
|
||||
padding: 0.3em 2em;
|
||||
|
||||
border-radius: 0.6em;
|
||||
}
|
||||
|
||||
#targetSelection > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#targetSelection h2 {
|
||||
margin: 2em;
|
||||
#targetSelection h1 {
|
||||
margin: 0.3em;
|
||||
color: inherit;
|
||||
}
|
||||
#targetSelection #targets {
|
||||
width: 30em;
|
||||
margin: 0 auto;
|
||||
margin: 1em auto;
|
||||
/* For the checkbox that will appear */
|
||||
padding: 0 2em;
|
||||
}
|
||||
#targetSelection #targets > div {
|
||||
margin-bottom: 2em;
|
||||
|
|
@ -34,6 +34,8 @@
|
|||
}
|
||||
#targetSelection label i {
|
||||
font-size: 170%;
|
||||
|
||||
margin-left: -1.6em;
|
||||
}
|
||||
|
||||
#targetSelection .optionTitle {
|
||||
|
|
@ -51,11 +53,6 @@
|
|||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
#targetSelection input:disabled + label,
|
||||
#targetSelection input:disabled + label p,
|
||||
#targetSelection input:disabled + label > i {
|
||||
color: #aaa !important;
|
||||
}
|
||||
|
||||
#targetSelection input + label > i.fa {
|
||||
max-width: 0.75em;
|
||||
|
|
@ -72,10 +69,6 @@
|
|||
color: #4b4b66;
|
||||
}
|
||||
|
||||
#targetSelection input[type='text'] {
|
||||
border: 1px solid #3c4963;
|
||||
}
|
||||
|
||||
#targetSelection .targetValue {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
|
|
@ -83,12 +76,28 @@
|
|||
|
||||
#targetSelection .targetValue,
|
||||
#targetSelection input[type='text'] {
|
||||
width: 6em;
|
||||
width: 4.5em !important;
|
||||
display: inline-block;
|
||||
height: 1.4em;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-size: 120%;
|
||||
padding: 0em 0.3em;
|
||||
background: white;
|
||||
border-radius: 0.1em;
|
||||
border: none;
|
||||
color: #4b4b66;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#targetSelection input[type='text'] {
|
||||
border: 3px solid #4b4b66;
|
||||
}
|
||||
|
||||
#targetSelection .fa-calculator {
|
||||
margin: 0 0.4em;
|
||||
font-size: 90%;
|
||||
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
|
||||
|
|
|
|||
|
|
@ -55,28 +55,31 @@ export default class TargetSelection extends Component {
|
|||
if (this.props.targets.length == 0) return null
|
||||
|
||||
return (
|
||||
<section id="targetSelection">
|
||||
<h1>Entrez un salaire mensuel</h1>
|
||||
<section
|
||||
id="targetSelection"
|
||||
style={{
|
||||
background: this.props.colours.colour,
|
||||
color: this.props.colours.textColour
|
||||
}}
|
||||
>
|
||||
{this.renderOutputList()}
|
||||
|
||||
{this.state.activeInput && (
|
||||
{this.state.activeInput ? (
|
||||
<div id="action">
|
||||
{this.state.affinage ? (
|
||||
!this.props.conversationVisible && (
|
||||
<p style={{ color: this.props.colours.textColourOnWhite }}>
|
||||
<p style={{ color: this.props.colours.textColour }}>
|
||||
Cochez un ou plusieurs objectifs
|
||||
</p>
|
||||
)
|
||||
) : (
|
||||
<BlueButton
|
||||
onClick={() =>
|
||||
console.log('iozn') || this.setState({ affinage: true })
|
||||
}
|
||||
>
|
||||
<BlueButton onClick={() => this.setState({ affinage: true })}>
|
||||
Affiner
|
||||
</BlueButton>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<h1>Entrez un salaire mensuel</h1>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
|
|
@ -132,19 +135,25 @@ export default class TargetSelection extends Component {
|
|||
: {}
|
||||
}
|
||||
>
|
||||
{visibleCheckbox(s) ? (
|
||||
optionIsChecked(s) ? (
|
||||
<i
|
||||
className="fa fa-check-square-o fa-2x"
|
||||
style={{ color: textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-square-o fa-2x"
|
||||
style={{ color: '#4b4b66' }}
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
{
|
||||
<span
|
||||
style={{
|
||||
visibility: visibleCheckbox(s) ? 'visible' : 'hidden'
|
||||
}}
|
||||
>
|
||||
{optionIsChecked(s) ? (
|
||||
<i
|
||||
className="fa fa-check-square-o fa-2x"
|
||||
style={{ color: textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-square-o fa-2x"
|
||||
style={{ color: '#4b4b66' }}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
}
|
||||
<span className="optionTitle">{s.title || s.name}</span>
|
||||
</label>
|
||||
<span className="targetInputOrValue">
|
||||
|
|
@ -158,20 +167,26 @@ export default class TargetSelection extends Component {
|
|||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="targetValue"
|
||||
style={{ width: '6em' }}
|
||||
onClick={() =>
|
||||
this.setState({ activeInput: s.dottedName })
|
||||
}>
|
||||
{do {
|
||||
let rule = this.props.targets.find(
|
||||
propEq('dottedName', s.dottedName)
|
||||
),
|
||||
value = rule && rule.nodeValue
|
||||
;<RuleValue value={value} />
|
||||
}}
|
||||
</span>
|
||||
<>
|
||||
{this.state.activeInput && (
|
||||
<i className="fa fa-calculator" aria-hidden="true" />
|
||||
)}
|
||||
<span
|
||||
className="targetValue"
|
||||
style={{ width: '6em' }}
|
||||
onClick={() =>
|
||||
this.setState({ activeInput: s.dottedName })
|
||||
}
|
||||
>
|
||||
{do {
|
||||
let rule = this.props.targets.find(
|
||||
propEq('dottedName', s.dottedName)
|
||||
),
|
||||
value = rule && rule.nodeValue
|
||||
;<RuleValue value={value} />
|
||||
}}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ import { reduxForm } from 'redux-form'
|
|||
import { scroller, Element } from 'react-scroll'
|
||||
import { getInputComponent } from 'Engine/generateQuestions'
|
||||
import Satisfaction from '../Satisfaction'
|
||||
|
||||
import { connect } from 'react-redux'
|
||||
import './conversation.css'
|
||||
|
||||
let scroll = () =>
|
||||
scroller.scrollTo('myScrollToElement', {
|
||||
duration: 500,
|
||||
|
|
|
|||
Loading…
Reference in New Issue